我们计划为我的CMS项目切换新技术，如react，该项目正在开发10年。
直到现在，前端的一切都很简单明了。
首先包括jquery.js，然后在必要时包括组件和第三方脚本，然后编写代码并使用DOM。
但现在，当我试图跳到更高水平的技术和不同的方法时，事情很容易变得非常复杂
在花了10多个小时学习React文档和教程后，我对它是什么以及它是如何工作的有了很好的了解。
但我意识到我对一些流行的概念非常陌生。我从未使用过node.js，从未使用过npm、babel、webpack，以及其他我随处可见的"新"东西。由于React，我与这些工具面对面，我相信这些是现代前端开发的必然。
现在的问题
我们的CMS运行在PHP上，在前端严重依赖MooTools。与其对已有10年历史的CMS进行完全重写，我只想在某些情况下部分尝试新技术。决定从React开始。
对于这个案例，我也想将ag-Grid集成到React中。
我不明白的是如何将所有这些工具结合在一起。
由于ag网格，我将无法使用简单的include-js反应方式。
在示例中，编写的代码具有一些JSX。这意味着我们编写JSX并运行翻译后的浏览器来测试它是否正常
- 每次测试前我都需要翻译这些文件吗
- 而且，如果文件被翻译，调试会变得非常困难吗复杂吗
- 巴贝尔能准时到达吗？如果是的话，这是一个很好的做法
- node_modules文件夹中有很多文件。他们中的哪一个我应该包括制作费用吗
网络上的所有来源都是非常理论性的，并且假设有知识。需要一些最佳实践指南。
从开始到生产，有很多问题，没有一个循序渐进的指南。
JSX是一个超规范兼容JavaScript的扩展。它是React.createElement(...)的语法糖，在React开发中是可选的。
React可以用普通ES5:编写
React.createElement("div", { foo: "foo" });
代替JSX:
<div foo="foo" />
或者使用像h这样实现相同目标的辅助功能，例如react-hyperscript。
有PHP后端应用程序这一事实并不妨碍使用JSX开发React前端程序。这可能需要将React项目配置为不使用内置的Express web服务器，并将客户端应用程序构建到自定义位置，即现有应用程序的公用文件夹。如果使用create-react-app，则可能需要弹出项目(。
每次测试之前，我都需要翻译这些文件吗？
它们应该被转换为纯JavaScript(如果ES5针对较旧的浏览器(。当客户端项目以监视模式(通常为npm start(运行时，它们可以在源文件的每次更改时进行转换。
此外，如果文件被翻译，调试会变得非常困难吗复杂的
这就是源映射的用途。
babel能在运行时成功吗？如果是的话，这是一个很好的做法。
在运行时使用Babel是可能的，但这不是一个好的做法，即使在开发环境中也是如此。
node_modules文件夹中有很多文件。他们中的哪一个我应该包括制作费用吗？
node_modules的内容无关紧要。几乎所有这些都是构建客户端应用程序所需的开发依赖项。这是打包程序的任务，它是create-react-app模板中的Webpack。它在dist文件夹中构建了对纯JS的项目依赖关系。