React是用于构建用户界面的流行JavaScript库。它是由Facebook创建的，并于2013年发布给公众。从那时起，它在技术行业中获得了广泛的采用，许多公司（大小不一）使用了网络和移动应用程序。
。React受欢迎的原因之一是它轻松创建复杂而动态的用户界面的能力。 React使用称为JSX（JavaScript XML）的语法，允许开发人员在JavaScript中编写类似于HTML的代码，从而更容易地推论其应用程序的结构和行为。
在本文中，我们将深入研究JSX的详细信息，并探索它如何使反应成为一种强大的工具来构建动态和引人入胜的用户界面。
先决条件
要遵循本文，您必须拥有：
- HTML的基本知识
- JavaScript中的知识
- 基本的反应技能
介绍
JSX是JavaScript的语法扩展名，可用于描述用户界面的外观。这使得能够利用编程的声明性方面。您可能会发现声明性一词有些复杂，但不用担心我们将在本文中介绍它。
要了解JSX在React中的作用，我们将研究如何在Plain JavaScript中创建HTML元素，然后看看它们在React中的创建方式。
我们将介绍：
- 命令vs声明性编程
- 在香草JavaScript中创建HTML元素
- 在React中创建HTML元素
- 在JSX中嵌套
命令式编程
假设您希望有人准备早餐蛋糕。您有两个选择：
首先，您可以简单地要求面包师烘烤，假设他们知道该怎么做，并忽略给出有关烘焙过程的任何说明。另外，您仍然可以要求蛋糕，但也可以为面包师提供有关如何进行烘焙过程的说明。
命令性编程是一种软件开发范式，其中在解决问题所需的每个步骤中都隐含了函数，而声明性编程是一种范式，它利用了如何实现特定解决方案背后的控制流量的抽象。
声明性描述了您想做什么，而不是您想做什么。
关于如何完成某件事的说明的想法解释了编程的命令性方面，而另一个解释了编程的声明方面。
在香草JavaScript中创建HTML元素
在我们了解JSX如何在React应用程序中使用之前，我们将首先了解其在Pure JavaScript中的完成方式。
创建一个index.html文件并粘贴下面的代码，然后在浏览器中打开。
<!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>Document</title>
</head>
<body>
<h1>The Document Object Model</h1>
<h2>The createElement() Method</h2>
<p>Create a p element and append it to the div with id "myDiv"</p>
<div id="myDiv" style="padding: 16px; background-color: paleturquoise;">
<h3>My Div</h3>
</div>
<script>
// create HTML element
const paragraph = document.createElement("p");
paragraph.innerHTML = "Created a paragraph using JS."
// append to the myDiv div
document.getElementById("myDiv").appendChild(paragraph)
</script>
</body>
</html>
createElement创建由标记名称为参数的HTML元素。
另一方面，appendChild添加了在指定父母列表的末尾创建的节点或元素（在我们的情况下为“ mydiv”）节点。
如果您理解上面的两个编程范例，则将其归类为命令性编程，因为我们隐含地提供了有关如何完成的说明。
在React中创建HTML元素
在React中，JSX是建议描述用户界面的外观的语法扩展。
为了进一步了解这种情况的发生方式，我们将通过在我们的终端上粘贴代码来创建一个简单的React应用程序。
npx create-react-app jsx-demo
cd jsx-demo
npm start
您可以通过粘贴下面的代码来编辑src/app.js文件
import React from "react"
function App() {
const h1Title = <h1 className="h1title">JSX in a nutshell</h1>
return(
h1Title
)
}
export default App
在JavaScript中，我们无法将HTML元素分配给上面所示的值，但是，在React中，JSX赋予了我们这样做的能力。
由于JavaScript中的几乎所有内容都是一个对象，因此h1Title也是一个对象，我们可以将其记录以查看其包含的内容。
在H1title分配下方，您可以添加console.log(h1Title)
{
type: 'h1',
props: {
className: 'h1title',
children: 'JSX in a nutshell'
}
}
以上是您在检查应用程序后在控制台上看到的结果的更清洁视图。该表示形式称为React Element，它代表最终的HTML输出作为普通对象。
JSX中的每个节点是一个简单的对象，描述了组件实例或DOM节点及其所需属性（props）。
React元素的两个主要属性是type，它定义了节点的类型和props，这是组件接收的属性。
一旦建立了所有组件的反应元素，React将其转换为实际的HTML DOM元素。
在JSX中筑巢
此外，可以在JSX中进行嵌套，就像可以在HTML中完成的一样。嵌套JSX节点时的一个关键问题是确保总有一个父节点。
考虑不良的JSX实现：
const pageContent =
<h1 className="h1title">JSX in a nutshell</h1>
<p>It's amazing how JSX works</p>
要解决上述代码将生成的错误，我们可以用DIV包装，如下所示：
const pageContent =
<div className="page-content">
<h1 className="h1title">JSX in a nutshell</h1>
<p>It's amazing how JSX works</p>
</div>
我们还可以安装pageContent对象并查看其中包含的内容。
{
type: 'div',
props: {
children: [
{
type: 'h1',
props: {
className: 'h1title',
children: 'JSX in a nutshell'
}
},
{
type: 'p',
props: {
children: 'It\'s amazing how JSX works'
}
},
]
className: 'page-content',
}
}
children是两个代表特定JSX节点的两个对象的数组。阵列将根据父节点的儿童数量而增长。
反应将这些对象转换为没有我们的HTML元素的能力，程序员隐含地做到这一点。
结论
许多反应开发人员（包括我本人）缺乏对JSX及其在React中的作用的了解。但是，在阅读本文后，我们对JSX有了直接的了解，以及它如何增强作为功能强大的库。
。如果您喜欢阅读本文，请留下喜欢！