VS Code中使用React CDN路径无输出问题求助

1. CDN引入顺序错误 #

React相关CDN必须按固定顺序引入：先加载react.development.js，再加载react-dom.development.js，最后才是你的自定义JS文件。顺序颠倒会导致ReactDOM无法找到React核心对象，直接渲染失败。

2. 挂载容器不匹配 #

• 确认HTML中存在JS代码指定的挂载DOM元素，比如JS里写ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'))，HTML里必须有<div id="root"></div>。
• 自定义JS代码要放在挂载容器之后（比如放在</body>标签前），或者用DOMContentLoaded事件包裹代码，避免代码执行时容器还未被浏览器解析。
• 不要直接把<body>或<html>作为挂载目标，这会引发渲染异常。

3. JSX未转译 #

如果你的JS文件里直接写JSX语法（比如<h1>Hello</h1>），浏览器原生无法识别，必须引入Babel CDN来转译：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

同时，自定义JS的script标签要加上type="text/babel"属性：

<script type="text/babel" src="你的JS文件路径.js"></script>

4. 文件路径错误 #

检查自定义JS文件的引用路径是否正确：如果JS和HTML在同一目录，路径写src="./your-file.js"；如果在子目录，对应调整相对路径。可以通过浏览器F12的Network标签，确认JS文件是否成功加载（404状态就是路径错了）。

5. 查看浏览器控制台报错 #

按F12打开开发者工具，切换到Console标签，根据报错直接定位问题：

• React is not defined：React CDN未加载或顺序错误
• Unexpected token '<'：JSX未被转译，缺少Babel或未设置type="text/babel"
• Target container is not a DOM element：挂载的DOM元素不存在或ID写错

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