javascript - 将 React 与带有 JSX 的现有应用程序一起使用

我们正计划为我正在开发 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，我将无法使用简单的 include js 反应方式。

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

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

有很多问题，而不是从开始到生产的一步一步的指南。

标签： javascriptnode.jsreactjsbabeljsag-grid-react

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 的内容无关紧要。几乎所有这些都是构建客户端应用程序所需的开发依赖项。这是打包器的任务，它是模板中的 Webpack create-react-app。它将项目依赖项构建到dist文件夹中的纯 JS。