React JSX(二) - 技术栈

上篇文章我们讲了jsx的基本使用。这次我们来讲更深入也是更高级的东西，可以方便把我们的代码迅速转换。

在es6发布之前，也就是2015年前，我们写es5的代码。自从es6发布后，许多老版本的浏览器不支持es6，想要在所有浏览器中适配代码，我们就需要把我们写的es6代码转换成es5代码。

这个时候我们就需要一个东西叫做babel，就像我们用别的工具一样，类似于stylus,把代码转换为css形式。所以我们要把JSX代码转换为原生js执行的代码

那我们如何使用他呢？让我们开始实战。

实战

我们首先要知道，babel是一个工程化工具，他并不是一个运行中执行的依赖，而是开发时期的依赖，所以我们要把它装在devDependencies中，向里面添加到这个形式：

perl 复制代码

  "devDependencies": {
    "@babel/cli":"7.26.4",
    "@babel/core":"7.26.0",
    "@babel/preset-env":"7.26.0",
    "@babel/preset-react":"7.26.3"
  }

让我来一个个介绍，这四个分别都有什么作用

@babel/cli,这是命令行工具，让我们在终端中能运行babel，就像npx babel src -d lib
@babel/core，这是babel的核心功能区，包含了api和主要的转译功能。负责核心转译逻辑
@babel/preset-env 这是babel的自动转译规则，允许我们在不指定转译的情况下，转译为支持我们环境支持的代码
@babel/preset-react，这个预设专门用于处理React应用中的JSX语法和其他特性。它使得你可以编写包含JSX语法的React组件，并将它们转换为普通的JavaScript函数调用，这样浏览器就能理解并执行这段代码了

想要运行，我们还要在目录下创建一个.babelrc文件，这是我们配置文件， presets 预处理一个规则 "@babel/preset-env"，支持es由高级转化为低级版本加了一个@babel/preset-react 支持jsx 语法转译

perl 复制代码

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

这里我们不需要额外的功能，就不添加plugins了。

除此之外，.babelrc 还支持其他一些配置选项，比如：

env：可以在不同的环境中指定不同的配置。例如，你可能想要在开发环境和生产环境中应用不同的 Babel 配置。
sourceMaps：是否生成 source maps，这对于调试原始源代码非常有用。
ignore 和 only：用于指定应该被忽略或仅包含的文件模式。

做完这些后，我们就可以尝试转化文件试试看了。为了更贴近现实，这里我们用npx来运行程序。

npx 不用安装, 直接执行某个包，为了测试程序是否正常运行，我们需要在不同设备上运行，为了不必要的安装，我们直接用npx运行就可以了假设我们有一个文件es6.js，他的代码是：

ini 复制代码

const a =12;

我们在终端中输入 npx babel es6.js -o es5.js,运行之后，我们可以在目录上看到增加了一个es5.js文件。里面的内容是这样的

javascript 复制代码

"use strict";
var a = 12;

这样就把es6类型文件转化为es5了，由const变为var了。完美实现了要求。

上面我们还添加了一个@babel/preset-react相信大家都没有忘，可以把jsx转译为普通的js代码执行

javascript 复制代码

const hello = <p className="txt">Hello,<span>World</span><span>你好</span></p>

这个代码是肯定不能在js环境中执行的，所以我们添加了转译react的babel配置，这样我们也可以把他转译为普通的代码，还是像上面的代码一样。得到新文件中有:

javascript 复制代码

"use strict";

// 原生js 不支持jsx语法
var hello = /*#__PURE__*/React.createElement("p", {
  className: "txt"
}, "Hello,", /*#__PURE__*/React.createElement("span", null, "World"), /*#__PURE__*/React.createElement("span", null, "\u5218\u603B\u597D"));

React.createElement(type, props, children),里面是含有三个参数的。

type：可以是一个标签名字符串（如 'div', 'span' 等），表示 HTML 标签；也可以是一个 React 组件（函数组件或类组件）。
props ：该元素的属性对象。除了定义在组件上的属性外，还可以包含特殊的属性如 key 和 ref。如果不需要传递任何属性，可以设置为 null 或者直接省略后面的参数。
children ：子节点，可以是单个对象、一个对象数组，或者是文本字符串。这代表了嵌套在该元素内的其他 React 元素或文本内容。children 参数实际上是可变数量的参数，意味着你可以传递任意数量的子节点。这样我们就可以方便的使用了。

让我们再到浏览器环境中看看。一般来说，我们都是引入一段cdn，这样就可以运行jsx类型代码。但这样做会有一个弊端。当同一个局域网使用同一段cdn后，会出现被拒绝访问的情况，会影响我们的效率，所以我们可以使用几个文件来存储cdn信息，这样也是一种好的方法。

xml 复制代码

<div  id="example"></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello World!</h1>,
            document.getElementById('example') 
        )
    </script>

ReactDOM.render 是 React 中用于将 React 元素渲染到 DOM 中指定容器内的方法。此时我们得到：

总结

JSX 是 React 中用于描述用户界面的语法扩展，它让开发者可以在 JavaScript 中书写类似 HTML 的代码，极大地简化了 UI 组件的创建过程。尽管 JSX 看起来像是新的 JavaScript 特性，但实际上它是一种语法糖，需要通过 Babel 等工具按照 @babel/preset-react 规则转译为 React.createElement 函数调用，才能被 JavaScript 运行环境理解。

在 React 应用中使用 JSX 使得构建 UI 组件变得更加简单和直观，提高了代码的可读性和维护性。通过 JSX，开发者可以聚焦于业务逻辑而非繁琐的 DOM 操作，这得益于虚拟 DOM（VDOM）机制的存在。虚拟 DOM 提供了一种高效的方式来更新用户界面，减少了直接操作原生 DOM 带来的性能损耗。

借助 Babel 和 JSX，React 实现了在 JavaScript 中编写 HTML 样式的 UI 组件，不仅提升了开发效率，还改善了用户体验。函数式组件进一步推动了这一趋势，它们利用 JSX 以声明式的方式定义 UI，使代码更加简洁、清晰，便于理解和维护。总之，JSX 结合 React 的虚拟 DOM 技术，提供了一种强大而灵活的方法来构建现代 Web 应用程序的用户界面，让开发者能够更专注于实现应用的功能需求。希望大家从中收获一些东西。