目录
序言
React 由 Meta（前身为 Facebook）开发，它使开发人员能够创建可重复使用的组件来完成前端页面。
不过，需要注意的是，从技术上讲，React 并不是一个框架。这是因为它只负责呈现用户界面的组件。不过，React 提供了一种替代 Angular 和 Vue 等框架的解决方案，让我们可以使用它来完成复杂的前端页面功能。
本篇文章将介绍 React 中的一个重要语法--JSX。
JSX 也是编写 React 的常用方法之一，因此我们将在下一节中介绍。
- 什么是 JSX？
- JSX 语言方法
- 使用 JSX 构建 React 组件
什么是 JSX？
在讨论 JSX 之前，让我们回顾一下上一篇文章中讲解的 React DOM 语法。
const dish = React.createElement("h1", "Hello World") ReactDOM.render(dish, document.getElementById("root"))
上述 React 语法可转换为以下 HTML DOM。
<div id="root">
<h1>Hello World</h1>
</div>
从上面的代码中可以想象到，JavaScript 中的 React 语法相对较难理解，如果是更复杂的 HTML 文件，有数千行，代码就会更加复杂和难以理解。
因此，Facebook 团队在开发 React 的同时，也针对这一缺陷添加了一种新的、更简洁的语法，用于构建前端网络组件：JSX。
JSX 是由 "JS"（JavaScript）和 "X"（XML）两个单词组成的缩写。JavaScript 和 "X "XML 两个单词组成的缩写。虽然 JSX 与 HTML 有些相似，但它本质上是通过 React 语法构建的组件，下面是一个简单的 JSX 示例。
import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
您可以看到，中间部分与 HTML 语法几乎相同，但程序的开头和结尾部分使用的是 JavaScript 语法。
事实上，计算机会使用一些工具来翻译 JSX 语法，以生成纯 HTML，我们将在后面的文章中讨论这些工具。
JSX 语言方法
JSX 语法看起来像 HTML，但它实际上是 JavaScript 和 React 的语法，因此本文将解释 JSX 语法。
className
在一般的 HTML 语法中，如果我们想给一个标记添加一个类，可以这样写
<h1 class="hi">Hello World</h1>
但是，在 JSX 语法中，要在标签中添加任何类，都要将其改为 className。
<h1 classname="hi">Hello World</h1>
嵌套元素
JSX 的语法与 HTML 相同，并支持嵌套格式。JSX 还可以创建自己的组件，并将其转化为嵌套格式。
<AnimalList> <Dog /> <Cat /> <Bird /> </AnimalList>
复合表达式
JSX 本身也是一种 JavaScript 语法，因此它完全支持我们之前讨论过的 JavaScript 语法，以及 ES6 中的语法，例如模板字面。
const fruits = ["Apples","Bananas","Cherries"] const myElement = (
<ul>
<li>{fruits[0]}</li>
<li>{fruits[1]}</li>
<li>{fruits[2]}</li>
<div>`I Love ${fruits[0]}`</div>
</ul>
);
在 JSX 中，您可以用大括号将 JavaScript 变量包起来，也可以使用 Template Literals 语法将字符串与 JSX 结合起来。
JavaScript Map
由于我们可以使用 JavaScript 语法，因此还可以使用 Array 内置的 map 函数与 JSX 集成。
const fruits = ["Apples","Bananas","Cherries"] const myElement = ( <ul> {fruits.map(element=>{ <li>{element}</li> })} </ul> ) ;
使用地图功能还可以将多个 li 组合在一起。
使用 JSX 构建 React 组件
最后，我们将以最开始的代码为例，讲解如何构建组件。
import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
第一行和第二行用于调用 react 和 react-dom/client 编写的库，以及使用内置函数。
中间的 const 用于声明，JSX 语法可以放在里面，在里面可以写一些 HTML，写完后就会得到一个名为 myElement 的元素。
最后，我们使用 ReactDOM 中的 createRoot 函数创建一个带有 "id="root "的 DOM，然后将我们创建的 myElement 元素放入根中。
完成上述过程后，您就可以构建 React 组件了。
结论
本文介绍了一种非常重要的 React 语法--JSX，它也用于简化 React 组件的构建。本文还解释了 JSX 的原理、语法以及如何构建组件。
如果您有任何建议或问题，欢迎留言！
如果您喜欢这一系列文章，请不要犹豫，点击 "喜欢 "并分享，让更多人看到它！
引用
React 白話文運動系列
JavaScript 异步等待 - React 白话运动 03
简体中文 
繁體中文 
English 
한국어 
日本語 
Español