JSX是一个 JavaScript 的语法扩展，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式
为什么使用 JSX
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现[关注点分离]
优点：
1、JSX执行更快，编译为JavaScript代码时进行优化
2、类型更安全，编译过程如果出错就不能编译，及时发现错误
3、JSX编写模板更加简单快速。（不要跟VUE比）
注意：
1、JSX必须要有根节点。
2、正常的普通HTML元素要小写。如果是大写，默认认为是组件。
JSX表达式
1、由HTML元素构成
2、中间如果需要插入变量用{}
3、{}中间可以使用表达式
4、{}中间表达式中可以使用JSX对象
5、属性和html内容一样都是用{}来插入内容
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'
let time = new Date().toLocaleTimeString()
let str = '当前时间是：'
let element = (
<div>
<h1>helloworld</h1>
// 在 JSX 中嵌入表达式
<h2>{str+time}</h2>
</div>
)
console.log(element)
let man = '发热';
let element2 = (
<div>
<h1>今天是否隔离</h1>
<h2>{man=="发热"?<button>隔离</button>:"躺床上"}</h2>
</div>
)
//let man = '发热';
let element4 = (
<div>
<span>横着躺</span>
<span>竖着躺</span>
</div>
)
man = '正常'
let element3 = (
<div>
<h1>今天是否隔离</h1>
// 三元表达式
<h2>{man=="发热"?<button>隔离</button>:element4}</h2>
</div>
)
let color = 'bgRed'
let logo = 'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
//HTML的样式类名要写className,因为class在js当中是关键词
let element5 = (
<div className={color}>
<img src={logo} />
红色的背景颜色
</div>
)
ReactDOM.render(
element5,
document.getElementById('root')
)
JSX 也是一个表达式
在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>; }
return <h1>Hello, Stranger.</h1>;}
JSX 特定属性
你可以通过使用引号，来将属性值指定为字符串字面量:
const element = <div tabIndex="0"></div>;
也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = <img src={user.avatarUrl}></img>;
在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 [tabIndex]
使用 JSX 指定子元素
假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样：
const element = <img src={user.avatarUrl} />;
JSX 标签里能够包含很多子元素:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX 防止注入攻击
你可以安全地在 JSX 当中插入用户输入内容：
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。
JSX 表示对象
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
以下两种示例代码完全等效：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
