React 中的 JSX：是什么，如何编译？React 中的 JSX：是什么，如何编译？在现代前端开发中，React

React 中的 JSX：是什么，如何编译？

在现代前端开发中，React 是最流行的 JavaScript 库之一。它提供了一种声明式的编程方式，使开发者能够更高效地构建用户界面。而在 React 的开发过程中，JSX（JavaScript XML） 是一个非常核心的概念。本文将详细介绍 JSX 是什么，以及它是如何被编译和使用的。

JSX 是一种 JavaScript 的语法扩展，允许你在 JavaScript 代码中编写类似 HTML 或 XML 的结构。它并不是标准的 JavaScript 语法，而是 React 提供的一种语法糖，用于更直观地创建 React 元素（即虚拟 DOM 节点）。

示例：

const element = <h1>Hello, world!</h1>;

上面这段代码看起来像是 HTML，但它实际上是 JavaScript。React 使用 JSX 来描述 UI 的结构，并通过编译工具将其转换为浏览器可以理解的 JavaScript 代码。

支持嵌套结构

JSX 支持像 HTML 一样嵌套多个元素：

const element = (
  <div>
    <h1>Hello</h1>
    <p>欢迎使用 React</p>
  </div>
);

可以嵌入 JavaScript 表达式

你可以使用 {} 在 JSX 中嵌入任何 JavaScript 表达式：

const name = "Qwen";
const element = <p>Hello, {name}</p>;

支持组件调用

你还可以在 JSX 中使用自定义组件：

function Welcome(props) {
  return <h2>Welcome, {props.name}</h2>;
}

const element = <Welcome name="Qwen" />;

由于浏览器无法直接识别 JSX，因此需要通过编译工具将其转换为标准的 JavaScript 代码。这个过程通常由 Babel 完成。

Babel 是什么？

Babel 是一个 JavaScript 编译器，可以将新版本的 JavaScript（如 ES6+）以及 JSX 编译为向后兼容的代码，以适应不同浏览器。
JSX 的编译过程

当你在 React 中使用 JSX 时，Babel 会将其转换为 React.createElement() 函数的调用。

示例：

原始 JSX：

const element = <h1 className="title">Hello</h1>;

经过 Babel 编译后：

const element = React.createElement('h1', { className: 'title' }, 'Hello');

这个函数会返回一个对象，也就是 React 的虚拟 DOM 元素。

在 React 17 之前，每个使用 JSX 的文件都必须显式引入 React：

import React from 'react';

否则会报错：React is not defined。

但从 React 17 开始，Babel 和 React 团队合作引入了新的 JSX 转换方式，不再需要手动引入 React。

示例：

// 不需要 import React
const element = <h1>Hello</h1>;

Babel 会自动转换为：

import { jsx as _jsx } from 'react/jsx-runtime';

const element = _jsx('h1', { children: 'Hello' });

这意味着：

要使用 JSX，你需要配置 Babel 来支持 JSX 的编译。以下是常见的配置方式：

安装依赖

npm install --save-dev @babel/core @babel/cli @babel/preset-react

配置 .babelrc

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

使用 Babel 编译
```
npx babel src --out-dir dist
```
这样就可以将 src 目录下的 JSX 文件编译为标准的 JavaScript 文件，输出到 dist 目录中。