本教程旨在解决使用cdn方式引入react和babel时，jsx代码无法正确渲染的问题。核心在于理解浏览器不原生支持jsx，需要babel进行转换。文章详细阐述了通过为包含jsx的`<script>`标签添加`type="text/jsx"`属性来指示babel进行即时编译的解决方案，并提供了完整的示例代码和使用注意事项，帮助初学者顺利启动react开发。</script>
理解React CDN引入与JSX编译
对于初学者而言，通过CDN（内容分发网络）直接在HTML文件中引入React库是一种快速体验React开发的方式。这种方法避免了复杂的构建工具配置，让开发者能够专注于React组件的编写。然而，当涉及到JSX（JavaScript XML）语法时，一个常见的问题是浏览器无法直接识别和执行它，导致组件无法正确渲染。
JSX是React的核心特性之一，它允许我们在JavaScript代码中编写类似HTML的结构，极大地提高了组件的可读性和开发效率。但由于它不是标准的JavaScript语法，需要在浏览器执行前被转换成普通的JavaScript（即React.createElement()调用）。这个转换过程通常由Babel这样的JavaScript编译器完成。
在使用CDN方式时，我们通常会引入以下三个关键库：
- React: React核心库，定义了组件、生命周期等。
- ReactDOM: React DOM库，负责将React组件渲染到DOM中。
- Babel Standalone: 一个独立运行的Babel版本，可以直接在浏览器中编译JavaScript代码，包括JSX。
核心问题：Babel如何识别并编译JSX？
当我们在HTML中引入了Babel Standalone之后，它并不会自动编译所有<script>标签内的代码。Babel需要一个明确的指示来知道哪些脚本包含了需要转换的JSX或ESNext语法。如果缺少这个指示，Babel就不会介入处理，浏览器会尝试将JSX作为普通JavaScript解析，从而导致语法错误或静默失败（即没有错误信息，但组件不显示）。
解决方案：指定脚本类型为text/jsx
根据Babel的官方文档，当@babel/standalone在浏览器中加载时，它会自动编译并执行所有带有type="text/babel"或type="text/jsx"属性的<script>标签。这就是解决JSX不渲染问题的关键。通过为包含React组件和ReactDOM.render调用的<script>标签添加type="text/jsx"属性，我们明确告知Babel该脚本需要进行JSX转换。
示例代码与实现步骤
以下是修正后的完整HTML代码，演示了如何正确地使用CDN引入React、ReactDOM和Babel Standalone，并确保JSX代码被正确编译和渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN JSX渲染示例</title>
<!-- 1. 引入React核心库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 2. 引入ReactDOM库 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 3. 引入Babel Standalone，用于在浏览器中编译JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 4. 包含React组件和渲染逻辑的脚本，并指定type="text/jsx" -->
<script type="text/jsx">
// 定义一个简单的React类组件
class StoryBox extends React.Component {
render() {
return <div>Hello from Story Box!</div>;
}
}
// 将组件渲染到ID为'root'的DOM元素中
// 注意：React 18推荐使用createRoot，但为了兼容旧版和本教程场景，此处仍使用ReactDOM.render
ReactDOM.render(<StoryBox />, document.getElementById("root"));
</script>
</head>
<body>
<!-- 5. 页面中用于挂载React组件的DOM元素 -->
<div id="root"></div>
</body>
</html>在上述代码中，关键的改动在于：
<script type="text/jsx"> // ... 你的React组件代码 ... </script>
通过添加type="text/jsx"，Babel Standalone在页面加载时会识别这个脚本，将其中的JSX转换为浏览器可理解的JavaScript，然后执行，最终将"Hello from Story Box!"显示在id="root"的div中。
注意事项与最佳实践
- 加载顺序： 确保babel.min.js在包含JSX代码的<script type="text/jsx">标签之前加载。否则，Babel将无法在JSX代码执行前对其进行编译。
- type="text/babel"与type="text/jsx"： 两种类型都可以使用。text/jsx更具体地表明了脚本内容是JSX，而text/babel则表示脚本需要Babel处理，可能包含JSX或其他ESNext特性。在仅涉及JSX的场景下，两者效果相同。
- 开发环境使用： 这种通过CDN和Babel Standalone在浏览器中即时编译JSX的方式，主要适用于学习、原型开发或简单的演示项目。
- 生产环境不推荐： 在生产环境中，不建议使用Babel Standalone进行即时编译。因为浏览器端编译会增加页面加载时间，影响用户体验。生产环境通常会使用构建工具（如Webpack、Vite、Rollup等）在开发阶段将JSX预编译为纯JavaScript，并进行代码优化和打包，以提高性能。
-
React 18 createRoot： 尽管本教程为了演示兼容性仍使用了ReactDOM.render，但React 18及更高版本推荐使用ReactDOM.createRoot来创建根节点并渲染应用，以获得更好的性能和新的并发特性。例如：
// const root = ReactDOM.createRoot(document.getElementById('root')); // root.render(<StoryBox />);在学习阶段，了解并掌握ReactDOM.render是基础，但也要留意现代React的推荐用法。
总结
通过CDN引入React进行开发是入门React的便捷途径。当遇到JSX代码不渲染的问题时，核心在于理解Babel Standalone需要明确的指示来编译JSX。为包含JSX代码的<script>标签添加type="text/jsx"属性，是解决这一问题的直接有效方法。虽然这种方式适用于开发和学习，但在生产环境中，应转向使用现代构建工具进行预编译，以优化应用性能和用户体验。
