使用CDN引入React时解决JSX渲染问题的教程-js教程-PHP中文网

使用CDN引入React时解决JSX渲染问题的教程

DDD

发布： 2025-11-05 18:10:14

原创

325人浏览过

使用CDN引入React时解决JSX渲染问题的教程

本教程旨在解决使用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代码被正确编译和渲染：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

<!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"属性，是解决这一问题的直接有效方法。虽然这种方式适用于开发和学习，但在生产环境中，应转向使用现代构建工具进行预编译，以优化应用性能和用户体验。

以上就是使用CDN引入React时解决JSX渲染问题的教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

解决CDN引入React组件不渲染：Babel JSX解析的正确配置 React中DOM操作与useEffect：理解其必要性与最佳实践 React中如何优雅地更新嵌套状态中的函数对象 React中渲染嵌套数据：map()的深度应用与最佳实践解决React应用输入框卡顿：避免渲染函数中的异步setState循环