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

Question

I'm creating a web app using node and react.我正在使用 node 和 React 创建一个 web 应用程序。 Rather than seperate Node and React apps I want to integrate React into it.我不想将 Node 和 React 应用程序分开，而是想将 React 集成到其中。 So rather than a react app, I tried importing react CDN into the index.html .因此，我尝试将 React CDN 导入index.html而不是 React 应用程序。 My server serves the index.html perfectly, but I'm getting an error in the react component.我的服务器完美地服务于 index.html，但我在反应组件中遇到错误。

this is my 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>

and this is my main.js这是我的main.js

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

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

The error I'm getting is我得到的错误是

Uncaught SyntaxError: Unexpected token <                     main.js:4

What have I done wrong?我做错了什么？ Isn't it possible to use react with CDN?不能使用与 CDN 的反应吗？

And first when I used react/cjs/react.development libraries I got more errors.首先，当我使用 react/cjs/react.development 库时，我遇到了更多错误。 Then after reading this stackoverflow question I use /react/umd/ libraries.然后在阅读了这个stackoverflow 问题后，我使用了 /react/umd/ 库。 So what's the difference between cjs and umd CDN libraries?那么cjs和umd CDN库有什么区别呢？

Answer 1

Since JSX (the HTML code sprinkled in the JavaScript) is not regular JavaScript or ES6 code, you cannot load it directly in your browser. 由于JSX（JavaScript中的HTML代码）不是常规的JavaScript或ES6代码，因此您不能直接在浏览器中加载它。

So the problem is not getting the React library from a CDN, that's fine. 所以问题不在于从CDN获取React库，这很好。

The problem is that you have to transpile your main.js file to regular JavaScript code, for example using Babel. 问题是您必须将main.js文件转换为常规JavaScript代码，例如使用Babel。

The most commonly used tool to do this transpilation with Babel automatically is webpack. 使用Babel自动进行此翻译的最常用工具是webpack。

If you don't want to learn how to set up webpack and Babel in detail, I recommend to use create-react-app , this takes the burden of setting up all of the boilerplate from your shoulders and creates a JavaScript bundle that you can use directly in your browser. 如果您不想详细了解如何设置webpack和Babel，我建议使用create-react-app ，这将负担您从肩膀上设置所有样板并创建一个JavaScript包的负担。直接在浏览器中使用。

Note : if you do end up using create-react-app, you don't need to get the React lib from a CDN, it will already be included in the bundle. 注意：如果最终使用create-react-app，则不需要从CDN获取React库，它已经包含在捆绑包中。

Answer 2

The code doesn't work because react uses JSX (HTML inside javascript), which cannot be read by the browser and needs to be transpiled to ordinary javascript which can be read by browsers. 该代码无法正常工作，因为react使用JSX（JavaScript内的HTML），该JSX无法被浏览器读取，并且需要转换为可以被浏览器读取的普通javascript。 One such transpiler is babel. 巴贝尔就是这样的译者之一。 Your code doesn't work due to the absence of transpiler. 您的代码由于缺少编译器而无法正常工作。

You can use create-react-app , which comes bundled with the transpiler and everything that you'll need to get started with react. 您可以使用transpiler附带的create-react-app ，以及使用react入门所需的一切。 And as I understand, since you want to add your express backend, here is a tutorial that will help you get started with attaching create-react-app to your express backend. 据我了解，由于您要添加快速后端，因此这里有一个教程，可以帮助您开始将create-react-app附加到快速后端。 Hope this helps. 希望这可以帮助。

Answer 3

You also need to add babel cdn in the Html file which would convert JSX to JS您还需要在 Html 文件中添加 babel cdn，它将 JSX 转换为 JS

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

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

问题描述

3 个解决方案

解决方案1
2 2017-12-31 07:07:15

解决方案2
2 已采纳 2017-12-31 07:31:35

解决方案3
0 2022-05-14 15:21:14

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

问题描述

3 个解决方案

解决方案1 2 2017-12-31 07:07:15

解决方案2 2 已采纳 2017-12-31 07:31:35

解决方案3 0 2022-05-14 15:21:14

解决方案1
2 2017-12-31 07:07:15

解决方案2
2 已采纳 2017-12-31 07:31:35

解决方案3
0 2022-05-14 15:21:14