使用 CDN 将 React 集成到现有的 Node Express 应用程序中

Question

我正在使用 node 和 React 创建一个网络应用程序。我不想将 Node 和 React 应用程序分开，而是想将 React 集成到其中。因此，我尝试将 React CDN 导入 index.html，而不是 React 应用程序。我的服务器完美地服务于 index.html，但我在反应组件中遇到错误。

这是我的index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>React Powered chat App</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" charset="utf-8"></script>
  <script src="/scripts/main.js" charset="utf-8"></script>
  <body>
    Hello !
    <div id ='App'></div>
  </body>
</html>

这是我的 main.js

class App extends React.Component {
  render(){
    return (
      <div>
        Hello !
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('App'));

我得到的错误是

Uncaught SyntaxError: Unexpected token <                     main.js:4

我做错了什么？不能使用与 CDN 的反应吗？

首先，当我使用 react/cjs/react.development 库时，我遇到了更多错误。然后在阅读 this Whosebug 问题后，我使用 /react/umd/ 库。那么 cjs 和 umd CDN 库有什么区别？

Answer 1

由于 JSX（散布在 JavaScript 中的 HTML 代码）不是常规 JavaScript 或 ES6 代码，因此您无法直接在浏览器中加载它。

所以问题不是从 CDN 获取 React 库，没关系。

问题是您必须将 main.js 文件转换为常规 JavaScript 代码，例如使用 Babel。

使用 Babel 自动执行此转换的最常用工具是 webpack。

如果你不想详细了解如何设置 webpack 和 Babel，我建议使用 create-react-app，这会减轻你设置所有样板文件的负担，并创建一个JavaScript 可以直接在浏览器中使用的包。

注意：如果你最终使用 create-react-app，你不需要从 CDN 获取 React 库，它已经包含在捆绑。

Answer 2

代码无法运行，因为react使用了JSX（HTML inside javascript），无法被浏览器读取，需要转译为普通的javascript可以被浏览器读取。一个这样的转译器是 babel。由于缺少转译器，您的代码无法正常工作。

您可以使用 create-react-app, which comes bundled with the transpiler and everything that you'll need to get started with react. And as I understand, since you want to add your express backend, here is a tutorial 来帮助您开始将 create-react-app 附加到您的 express 后端。希望这有帮助。

Answer 3

您还需要在 Html 文件中添加 babel cdn，它将 JSX 转换为 JS

 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

使用 CDN 将 React 集成到现有的 Node Express 应用程序中

Integrate React into existing Node express app using CDN

javascript

cdn

node.js

reactjs