运行React代码时遭遇意外token '<'错误求助

你的问题出在JSX语法无法被浏览器直接解析——浏览器默认只会识别普通JavaScript，而<h1>Hello, world!</h1>这种JSX语法需要经过转译才能被理解。按照以下步骤修改代码即可解决：

• 将包含JSX的<script>标签的type属性设置为text/babel，告诉浏览器这部分代码需要用Babel转译
• 引入Babel的CDN脚本，提供JSX转译能力

修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
  <h2>Add React in One Minute</h2>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入Babel转译脚本 -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 设置type为text/babel -->
  <script type="text/babel">
  const root = ReactDOM.createRoot(
    document.getElementById('root')
  );
  root.render(<h1>Hello, world!</h1>);
  </script>
     
</body>
</html>

补充说明：这种CDN方式仅适合快速测试React代码，生产环境建议使用Create React App、Vite等构建工具，它们会自动处理JSX转译、依赖打包和性能优化。

内容的提问来源于stack exchange，提问作者Michael36