将 React 与 JSX 的现有应用程序结合使用

Question

我们计划为我开发了 10 年的 CMS 项目转换新技术，例如 react。

到目前为止，前端的一切都很简单明了。

首先包含 jquery.js，然后在必要时包含组件和第三方脚本，然后编码并与 DOM 共舞。

但是现在在尝试跳入更高水平的技术和不同的方法时，事情对我来说很容易变得非常复杂。

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

但是我意识到我对一些流行的概念非常陌生。 我从来没有用过 node.js，从来没有用过 npm、babel、webpack，还有很多我在任何地方都见过的“新”的东西。 因为 React，我与这些工具面对面，我相信这些是现代前端开发的必然。

现在的问题

我们的 CMS 在 PHP 上运行，并且在前端严重依赖 MooTools。 我只是想在某些情况下部分尝试新技术，而不是完全重写 10 年前的 CMS。 决定从 React 开始。

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

我不明白的是如何将所有这些工具组合在一起。

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

在示例中编写的代码有一些 JSX。 这意味着我们编写 JSX 并运行它为浏览器翻译以测试它是否正常。

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

网络上的所有来源都是非常理论化的，并假设有知识。 需要一些最佳实践指导。

有很多问题，而且没有一个从开始到生产的分步指南。

Answer 1

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的任务，它是create-react-app模板中的 Webpack。 它在dist文件夹中构建对普通 JS 的项目依赖项。