Question

我正在使用节点创建一个Web应用程序并做出反应。我想要将React集成到它中，而不是分离Node和React应用程序。因此，我尝试将反应CDN导入index.html，而不是反应应用程序。我的服务器完全服务于index.html，但我在react组件中遇到错误。

这是我的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 stackoverflow问题后，我使用/ react / umd / libraries。那么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（javascript中的HTML），浏览器无法读取，需要将其转换为浏览器可以读取的普通javascript。一个这样的转换器是babel。由于没有转换器，您的代码无法正常工作。

您可以使用与发布程序捆绑在一起的create-react-app以及您需要开始做出反应的所有内容。据我所知，由于您想要添加快速后端，这里有一个tutorial，可以帮助您开始将create-react-app附加到您的快速后端。希望这会有所帮助。

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

2 个答案: