Question

我们正计划为我的CMS项目（如正在开发中的10年）转换诸如react之类的新技术。

直到现在，前端的一切都很简单明了。

首先包含jquery.js，然后根据需要包含组件和第三方脚本，然后使用DOM进行编码和跳舞。

但是现在，当尝试跳入更高级别的技术和其他方法时，事情对我来说很容易变得非常复杂。

花了十多个小时阅读React文档和教程之后，我对它是什么以及它如何工作有了很好的理解。

但是我意识到我对一些流行的概念非常陌生。我从未使用过node.js，从未使用过npm，babel，webpack，还有可能在其他地方见过的许多其他“新”事物。由于React，我与这些工具面对面，我坚信这些是现代前端开发的必然。

现在是问题

我们的CMS在PHP上运行，并且在很大程度上依赖于MooTools。我只想部分地尝试使用新技术，而不是完全重写拥有10年历史的CMS。决定从React开始。

对于这种情况，我也想将ag-Grid集成到React中。

我不了解的是如何将所有这些工具整合在一起。

由于ag-Grid，我将无法使用简单的include js反应方式。

在示例中，编写的代码具有一些JSX。这意味着我们编写了JSX并将其翻译后运行，以供浏览器测试是否可以。

每次测试前我都需要翻译这些文件吗？
如果翻译了文件，调试还会变得非常困难复杂吗？
babel可以在运行时使用吗？如果是，这是一个好习惯。
node_modules文件夹中有很多文件。哪一个我应该包括在生产中吗？

网上的所有资源都是非常理论性的，并且都具有知识。需要一些最佳做法的指导。

有很多问题，从开始到生产都没有一个循序渐进的指南。

Answer 1

JSX是对符合规范的JavaScript的扩展。它是React.createElement(...)的语法糖，在React开发中是可选的。

反应可以用普通的ES5编写：

React.createElement("div", { foo: "foo" });

代替JSX：

<div foo="foo" />

或使用诸如h之类的辅助功能来达到相同的目标，例如react-hyperscript。

有PHP 后端应用程序这一事实并不能阻止使用JSX开发React frontend 应用程序。这可能需要将React项目配置为不使用内置的Express Web服务器，并将客户端应用程序构建到自定义位置，即现有应用程序的公用文件夹。如果使用create-react-app，则可能需要弹出项目。

每次测试前我都需要翻译这些文件吗？

应将它们转换为纯JavaScript（如果是针对较旧的浏览器，则为ES5）。当客户端项目以监视模式（通常为npm start）运行时，可以对源文件中的每个更改转换它们。

此外，如果文件被翻译，调试会变得非常困难复杂吗？

这就是源地图的用途。

babel可以在运行时运行吗？如果是，这是一个好习惯。

可以在运行时使用Babel，即使在开发环境中，这也不是一个好习惯。

node_modules文件夹中有很多文件。哪一个我应该包括在生产中吗？

node_modules的内容无关紧要。它们几乎都是开发客户端应用程序所需的开发依赖项。这是捆绑程序（create-react-app模板中的Webpack）的任务。它在dist文件夹中将项目依赖项构建为普通JS。

在JSX中将React与现有应用程序一起使用

1 个答案: