将 React 与带有 JSX 的现有应用程序一起使用
Using React with an existing application with JSX
我的CMS项目开发了10年，打算换react等新技术。
到目前为止，前端的一切都很简单明了。
首先包括 jquery.js 然后如果需要包括组件和第三方脚本，然后编码和跳舞 DOM。
但是现在，在尝试跳入更高层次的技术和不同的方法时，事情对我来说很容易变得非常复杂。
在阅读了 10 多个小时的 React 文档和教程后，我对它是什么以及它的工作原理有了很好的理解。
但是我发现我对一些流行的概念很陌生。我从未使用过 node.js，从未使用过 npm、babel、webpack，可能还有其他许多 "new" 我在任何地方都见过的东西。因为 React 而接触到这些工具，我坚信这些是现代前端开发的必然。
现在问题
我们的 CMS 运行 在 PHP 上运行并且在前端严重依赖 MooTools。我不想完全重写已有 10 年历史的 CMS，我只想在某些情况下部分尝试新技术。决定从 React 入手。
对于这种情况，我也想将 ag-Grid 集成到 React 中。
我不明白的是如何将所有这些工具组合在一起。
由于 ag-Grid，我将无法使用简单的包含 js 的反应方式。
示例中编写的代码带有一些 JSX。这意味着我们编写 JSX 并 运行 它为浏览器翻译以测试它是否可以。
- 每次测试前都需要翻译这些文件吗？
- 此外，如果文件被翻译了，调试会变得非常容易吗？
复杂吗？
- babel 能赶在运行 时间吗？如果是，这是一个好习惯吗？
- node_modules 文件夹中有很多文件。他们中的哪一个
我应该包括在制作中吗？
网络上的所有资源都是非常理论化的并且假设有知识。需要一些最佳实践指导。
有很多问题，没有一个从开始到生产的分步指南。
JSX 是对规范兼容 JavaScript 的扩展。它是 React.createElement(...) 的语法糖，在 React 开发中是可选的。
React 可以用纯 ES5 编写：
React.createElement("div", { foo: "foo" });
代替 JSX：
<div foo="foo" />
或者使用像 h 这样的辅助函数来实现相同的目标，例如react-hyperscript.
存在 PHP backend 应用程序这一事实并不妨碍使用 JSX 开发 React frontend 应用程序。这可能需要将 React 项目配置为不使用内置的 Express Web 服务器并将客户端应用程序构建到自定义位置，即现有应用程序的 public 文件夹。如果使用 create-react-app，这可能需要弹出项目）。
Each time before testing do I need to translate these files?
它们应该被转译为纯文本 JavaScript（如果它针对旧版浏览器，则为 ES5）。当客户端项目以监视模式运行时（通常 npm start），它们可以在源文件的每次更改时被翻译。
And more over if the files are translated does debugging become very
complicated?
这就是源映射的用途。
Can babel make it on the run time? If yes is it a good practice.
可以在运行时使用 Babel，这不是一个好的做法，即使在开发环境中也是如此。
There are lots of file in the node_modules folder. Which of them
should I include for production?
node_modules 的内容无关紧要。几乎所有这些都是构建客户端应用程序所需的开发依赖项。这是捆绑器的任务，它是 create-react-app 模板中的 Webpack。它在 dist 文件夹中为纯 JS 构建项目依赖项。
我的CMS项目开发了10年，打算换react等新技术。
到目前为止，前端的一切都很简单明了。
首先包括 jquery.js 然后如果需要包括组件和第三方脚本，然后编码和跳舞 DOM。
但是现在，在尝试跳入更高层次的技术和不同的方法时，事情对我来说很容易变得非常复杂。
在阅读了 10 多个小时的 React 文档和教程后，我对它是什么以及它的工作原理有了很好的理解。
但是我发现我对一些流行的概念很陌生。我从未使用过 node.js，从未使用过 npm、babel、webpack，可能还有其他许多 "new" 我在任何地方都见过的东西。因为 React 而接触到这些工具，我坚信这些是现代前端开发的必然。
现在问题
我们的 CMS 运行 在 PHP 上运行并且在前端严重依赖 MooTools。我不想完全重写已有 10 年历史的 CMS，我只想在某些情况下部分尝试新技术。决定从 React 入手。
对于这种情况，我也想将 ag-Grid 集成到 React 中。
我不明白的是如何将所有这些工具组合在一起。
由于 ag-Grid，我将无法使用简单的包含 js 的反应方式。
示例中编写的代码带有一些 JSX。这意味着我们编写 JSX 并 运行 它为浏览器翻译以测试它是否可以。
- 每次测试前都需要翻译这些文件吗？
- 此外，如果文件被翻译了，调试会变得非常容易吗？ 复杂吗？
- babel 能赶在运行 时间吗？如果是，这是一个好习惯吗？
- node_modules 文件夹中有很多文件。他们中的哪一个 我应该包括在制作中吗？
网络上的所有资源都是非常理论化的并且假设有知识。需要一些最佳实践指导。
有很多问题，没有一个从开始到生产的分步指南。
JSX 是对规范兼容 JavaScript 的扩展。它是 React.createElement(...) 的语法糖，在 React 开发中是可选的。
React 可以用纯 ES5 编写：
React.createElement("div", { foo: "foo" });
代替 JSX：
<div foo="foo" />
或者使用像 h 这样的辅助函数来实现相同的目标，例如react-hyperscript.
存在 PHP backend 应用程序这一事实并不妨碍使用 JSX 开发 React frontend 应用程序。这可能需要将 React 项目配置为不使用内置的 Express Web 服务器并将客户端应用程序构建到自定义位置，即现有应用程序的 public 文件夹。如果使用 create-react-app，这可能需要弹出项目）。
Each time before testing do I need to translate these files?
它们应该被转译为纯文本 JavaScript（如果它针对旧版浏览器，则为 ES5）。当客户端项目以监视模式运行时（通常 npm start），它们可以在源文件的每次更改时被翻译。
And more over if the files are translated does debugging become very complicated?
这就是源映射的用途。
Can babel make it on the run time? If yes is it a good practice.
可以在运行时使用 Babel，这不是一个好的做法，即使在开发环境中也是如此。
There are lots of file in the node_modules folder. Which of them should I include for production?
node_modules 的内容无关紧要。几乎所有这些都是构建客户端应用程序所需的开发依赖项。这是捆绑器的任务，它是 create-react-app 模板中的 Webpack。它在 dist 文件夹中为纯 JS 构建项目依赖项。