我正在使用节点创建一个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库之间的区别是什么？
代码不起作用，因为react使用JSX（javascript中的HTML），浏览器无法读取，需要转换为浏览器可以读取的普通javascript。一个这样的转换器是babel。由于没有转换器，您的代码不起作用。
您可以使用create-react-app，它与转换器捆绑在一起，以及您需要开始反应的所有内容。据我所知，由于你想添加你的快速后端，这里有一个tutorial，可以帮助你开始将create-react-app附加到你的快速后端。希望这可以帮助。
由于JSX（JavaScript中的HTML代码）不是常规JavaScript或ES6代码，因此无法直接在浏览器中加载它。
所以问题是没有从CDN获取React库，这很好。
问题是您必须将main.js文件转换为常规JavaScript代码，例如使用Babel。
使用Babel进行自动转换的最常用工具是webpack。
如果您不想详细了解如何设置webpack和Babel，我建议使用create-react-app，这需要从肩膀设置所有样板的负担，并创建一个JavaScript包，您可以直接在您的浏览器。
注意：如果您最终使用create-react-app，则不需要从CDN获取React库，它将已包含在捆绑包中。