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

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

javascript node.js reactjs

Javascript 使用CDN将React集成到现有的Node express应用程序中,javascript,node.js,reactjs,cdn,Javascript,Node.js,Reactjs,Cdn,我正在使用node和react创建一个web应用程序。我想将React集成到其中，而不是将Node和React应用分开。因此，我没有使用react应用程序，而是尝试将react CDN导入index.html。我的服务器完美地提供了index.html，但我在react组件中遇到了一个错误这是我的index.html <html> <head> <meta charset="utf-8"> <title>React Power

我正在使用node和react创建一个web应用程序。我想将React集成到其中，而不是将Node和React应用分开。因此，我没有使用react应用程序，而是尝试将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>

我得到的错误是

Uncaught SyntaxError: Unexpected token <                     main.js:4

uncaughtsyntaxerror:意外标记


我做错了什么？是否可以使用与CDN一起反应
首先，当我使用react/cjs/react.development库时，我得到了更多的错误。然后在阅读stackoverflow问题后，我使用/react/umd/libraries。那么cjs
和umd
CDN库之间有什么区别呢？
由于JSX（散布在JavaScript中的HTML代码）不是常规的JavaScript或ES6代码，您不能直接在浏览器中加载它
所以问题是不能从CDN获取React库，这很好
问题是您必须将main.js文件转换为常规JavaScript代码，例如使用Babel。
用巴别塔自动进行这项透明最常用的工具是webpack
如果您不想详细了解如何设置webpack和Babel，我建议您使用它，这将从您的肩上卸下设置所有样板文件的负担，并创建一个JavaScript包，您可以直接在浏览器中使用
注意：如果您最终使用create react应用程序，您不需要从CDN获取react库，它将已经包含在捆绑包中。
代码不起作用，因为react使用JSX（javascript内部的HTML），浏览器无法读取JSX，需要传输到浏览器可以读取的普通javascript。巴贝尔就是这样一个运输商。由于缺少transpiler，您的代码无法工作
您可以使用，它与transpiler捆绑在一起，以及开始使用react所需的一切。据我所知，既然您想添加您的express后端，下面是一个帮助您开始将create react应用程序连接到您的express后端的示例。希望这有帮助。您是否从官方网站上引用了此文档？是的，我理解。但是我需要单独启动react服务器，对吗？或者仍然可以使用express静态中间件提供index.html服务吗？就像app.use（express.statis（dirname+“../client”）。当然，CRA服务器实际上只是为了方便起见，它在处理代码时为您重新加载热模块。但是它也可以用来创建一个JS包，您可以使用Express static Middleware提供服务。请注意，您不会从create react应用程序提供index.html，但是当您运行npm buildYes时它创建的Javascript包我理解。但是我需要单独启动react服务器，对吗？或者仍然可以使用express静态中间件提供index.html服务吗？像app.use（express.statis（dirname+“../client”）。您可以，但需要一些修补。检查此链接。这在express服务器上有响应，但没有热重新加载。所以你每次都必须重新启动。但是你可以添加热重新加载。我尝试了这两个教程。单独使用react应用程序的一个可以工作。现在我清楚地理解了这个概念。
Uncaught SyntaxError: Unexpected token <                     main.js:4