17370845950

本教程旨在解决使用cdn方式引入react和babel时，jsx代码无法正确渲染的问题。核心在于理解浏览器不原生支持jsx，需要babel进行转换。文章详细阐述了通过为包含jsx的`

理解React CDN引入与JSX编译

对于初学者而言，通过CDN（内容分发网络）直接在HTML文件中引入React库是一种快速体验React开发的方式。这种方法避免了复杂的构建工具配置，让开发者能够专注于React组件的编写。然而，当涉及到JSX（JavaScript XML）语法时，一个常见的问题是浏览器无法直接识别和执行它，导致组件无法正确渲染。

JSX是React的核心特性之一，它允许我们在JavaScript代码中编写类似HTML的结构，极大地提高了组件的可读性和开发效率。但由于它不是标准的JavaScript语法，需要在浏览器执行前被转换成普通的JavaScript（即React.createElement()调用）。这个转换过程通常由Babel这样的JavaScript编译器完成。

在使用CDN方式时，我们通常会引入以下三个关键库：

1. React: React核心库，定义了组件、生命周期等。
2. ReactDOM: React DOM库，负责将React组件渲染到DOM中。
3. Babel Standalone: 一个独立运行的Babel版本，可以直接在浏览器中编译JavaScript代码，包括JSX。

核心问题：Babel如何识别并编译JSX？

当我们在HTML中引入了Babel Standalone之后，它并不会自动编译所有

解决方案：指定脚本类型为text/jsx

根据Babel的官方文档，当@babel/standalone在浏览器中加载时，它会自动编译并执行所有带有type="text/babel"或type="text/jsx"属性的标签添加type="text/jsx"属性，我们明确告知Babel该脚本需要进行JSX转换。

示例代码与实现步骤

以下是修正后的完整HTML代码，演示了如何正确地使用CDN引入React、ReactDOM和Babel Standalone，并确保JSX代码被正确编译和渲染：

在上述代码中，关键的改动在于：

通过添加type="text/jsx"，Babel Standalone在页面加载时会识别这个脚本，将其中的JSX转换为浏览器可理解的JavaScript，然后执行，最终将"Hello from Story Box!"显示在id="root"的div中。

注意事项与最佳实践

1. 加载顺序： 确保babel.min.js在包含JSX代码的
2. type="text/babel"与type="text/jsx"： 两种类型都可以使用。text/jsx更具体地表明了脚本内容是JSX，而text/babel则表示脚本需要Babel处理，可能包含JSX或其他ESNext特性。在仅涉及JSX的场景下，两者效果相同。
3. 开发环境使用： 这种通过CDN和Babel Standalone在浏览器中即时编译JSX的方式，主要适用于学习、原型开发或简单的演示项目。
4. 生产环境不推荐： 在生产环境中，不建议使用Babel Standalone进行即时编译。因为浏览器端编译会增加页面加载时间，影响用户体验。生产环境通常会使用构建工具（如Webpack、Vite、Rollup等）在开发阶段将JSX预编译为纯JavaScript，并进行代码优化和打包，以提高性能。
5. React 18 createRoot： 尽管本教程为了演示兼容性仍使用了ReactDOM.render，但React 18及更高版本推荐使用ReactDOM.createRoot来创建根节点并渲染应用，以获得更好的性能和新的并发特性。例如：

   // const root = ReactDOM.createRoot(document.getElementById('root'));
   // root.render();

   在学习阶段，了解并掌握ReactDOM.render是基础，但也要留意现代React的推荐用法。

总结

通过CDN引入React进行开发是入门React的便捷途径。当遇到JSX代码不渲染的问题时，核心在于理解Babel Standalone需要明确的指示来编译JSX。为包含JSX代码的