什么是JSX？
1、什么是JSX？
JSX = JavaScript + XML，就是JavaScript和XML结合的一种格式，它是 JavaScript 的语法扩展。在实际开发中，JSX 在产品的打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。设想如下变量声明：
const element = <h1>Hello, world!</h1>;这个有趣的标签语法既不是字符串也不是 HTML，它被称为 JSX。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。
2、JSX 基本语法
2.1、在 JSX 中嵌入表达式
在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。
在下面的示例中，我们将调用 JavaScript 函数 formatName(user) 的结果，并将结果嵌入到 <h1> 元素中。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);2.2、JSX 中指定属性
你可以通过使用引号，来将属性值指定为字符串字面量：
const element = <a href="https://www.reactjs.org"> link </a>;也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = <img src={user.avatarUrl}></img>;在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
2.3、使用 JSX 指定子元素
假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样：
const element = <img src={user.avatarUrl} />;JSX 标签里能够包含很多子元素:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);3、注意事项
为了便于阅读，我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。