什么是 JSX？

JSX 是 JavaScript 的语法扩展，用于在 React 应用程序中描述视图层的声明式语法。它将 HTML、XML 和 JavaScript 等语言混合在一起，使开发者可以更加轻松地创建自定义 UI 组件。

JSX 是什么？

JSX 是由 Facebook 提供的对 JavaScript 的扩展，它在 JavaScript 中内嵌了 HTML 标签。在 React 中，使用 JSX 来表示 UI 组件及其关系，这让模板代码更加优美、可读，并且易于维护。

为何使用 JSX？

使用 JSX 使得开发人员可以使用类似 HTML 格式的代码来创建 UI 组件。这种语法让代码非常直观，同时也使得代码的可读性更高，特别是在处理复杂的 UI 组件时。此外，它还有以下优点：

• 它可以轻松地扩展到完整的 JavaScript 数据结构。
• 它可以在编译时进行类型检查，从而提高代码的稳定性。
• 它可以通过使用 React 提供的内置优化来提高应用程序的性能。

如何使用 JSX

JSX 代码需要一个编译器将其转换为纯 JavaScript 代码。React 使用 Babel 来编译 JSX。Babel 是一个功能强大的 JavaScript 编译器，可以将 ECMAScript 6 或更新版本的代码转换为基于 JavaScript 的语言的子集的 JavaScript 代码。

下面是一个使用 JSX 的示例：

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

在这个示例中，我们创建了一个名为 element 的常量，它是一个 h1 标签，其中包含一个字符串“Hello, World!”。

JSX 的语法

嵌套

JSX 语法支持 HTML 标记的嵌套。例如：

const element = (
  <div>
    <h1>Hello, World!</h1>
    <p>Welcome to my app</p>
  </div>
);

在这个示例代码中，我们在 div 标签中嵌套了两个其他标签： h1 和 p。

表达式

JSX 也支持使用 JavaScript 表达式。可以通过将表达式包含在大括号内来实现。例如：

const myName = "Jane";
const element = <h1>Hello, {myName}!</h1>;

在这个示例代码中，我们创建了一个名为 myName 的常量，它包含字符串 "Jane"。然后将其应用于作为元素的大括号({})内的表达式。

样式

在 JSX 中，可以通过 style 属性为元素添加样式。需要使用 camelCase 命名规范来定义每个属性名，并将值指定为字符串。例如：

const element = <h1 style={{ color: "red", fontSize: "20px" }}>Hello, World!</h1>;

在这个示例代码中，我们在 h1 标签中添加了两个样式属性： color 和 fontSize，它们以对象的形式传递给 style 属性。

类名

在 JSX 中，需使用 className 属性来为元素添加类名，而非 class 关键字。例如：

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

在这个示例代码中，我们为 h1 标签添加了一个名为 title 的类名。