React使用CDN引入Babel时，如何避免'UnExpected token <'语法错误？

嘿，作为React新手用CDN搭项目遇到这个报错真的挺闹心的！我之前也踩过类似的坑，咱们一步步来解决它：

问题根源 #

你猜得没错，这个报错大概率是因为Babel没正确转译你同文件里的JSX代码。浏览器本身不认识JSX的<语法，会把它当成HTML标签来解析，自然就抛出"Unexpected token <"的错误了。如果你的脚本标签没配置对，Babel根本不会去处理里面的JSX。

一步步解决 #

1. 确保CDN资源引入正确且顺序无误

先把React、ReactDOM和Babel的CDN按顺序引入，注意Babel要放在最后：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 必须引入Babel的standalone版本来转译JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 给JSX脚本标签指定正确的类型

把包含JSX的<script>标签的type从默认的text/javascript改成text/babel，这样Babel才会识别并转译里面的代码：

<script type="text/babel">
  // 这里写你的React组件和渲染逻辑
  const App = () => {
    return <h1>Hello, React CDN!</h1>;
  };

  // 渲染到页面的根容器
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>

3. 修正你的HTML结构

从你贴的代码看，HTML结构有问题：<meta>和<title>应该放在<head>标签里，而且要确保页面有一个根容器让React渲染。正确的基础结构应该是这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First React CDN App</title>
</head>
<body>
  <!-- React会把组件渲染到这个容器里 -->
  <div id="root"></div>

  <!-- 上面的CDN脚本和你的React代码放在这里 -->
</body>
</html>

额外检查点 #

如果还是报错，看看有没有这些小问题：

• 有没有拼写错误？比如type="text/babel"别写成text/bable
• Babel的CDN地址是不是正确的？别漏了@babel/standalone
• 你的JSX代码有没有语法错误？比如标签有没有闭合（比如<h1>要写成</h1>）

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