1、JSX 简介
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写XML（HTML）格式的代码。
优势：声明式语法更加直观，与HTML结构相同，降低了学习成本、提升开发效率。
JSX 是 React 的核心内容。
总结
1、推荐使用JSX语法创建React元素
2、写JSX就跟写HTML一样，更加直观、友好
3、JSX语法更能体现React的声明式的特点（描述UI长什么样子）
4、使用步骤
4.1、使用JSX创建react元素
const title = <h1>Hello JSX</h1>
4.2、渲染react元素
ReactDOM.render(title, 挂载点)
5、为什么脚手架中可以使用 JSX 语法 ？
JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的扩展语法
需要使用 babel 编译处理后，才能在浏览器环境中使用
create-react-app 脚手架已经有默认该配置，无需手动配置
编译 JSX 语法的包为：@babel/preset-react。
2、JSX中使用JavaScript表达式
数据存储在JS中
语法：{ JavaScript 表达式 }
注意：语法是单大括号，不是双大括号 ！
const name = '码农权';
const div = (
<div>你好、我叫：{name}</div>
)
注意点
1、React的元素属性名使用驼峰命名法
2、特殊属性名：class -> className for -> htmlFor
3、没有子节点的React元素可以用 /> 结束
4、推荐：使用小括号包裹JSX，从而避免 JS 中的自动插入分号陷阱
const div = (
<div>Hello JSX</div>
)
3、条件渲染
场景：loading效果
条件渲染：根据条件渲染特定的JSX结构
可以使用if/else或三元运算符或逻辑运算符来实现
let isLoading = true;
const loadData = ()=>｛
return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处实现加载后的数据</div>);
｝
const title = (
<h1>
条件渲染：
{ loadData() }
</h1>
)
4、列表渲染
如果要渲染一组数据，应该使用数组的 map() 方法
注意：渲染列表时应该添加key属性，key 属性的值要保证唯一
原则：map() 遍历谁，就给谁添加 key 属性
注意：尽量避免使用索引号作为 key
const students = [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' },
{ id: 3, name: 'ww'}
];
const list = (
<ul>
{ students.map( item => <li key={item.id}>{item.name}</li> ) }
</ul>
)
5、样式的处理
行内样式 style
<h1 style={ { color: 'red', backgroundColor: 'skyblue' } }>
Hello 码农权
</h1>
类名 className（推荐）
<h1 className="title">
Hello 码农权
</h1>
JSX 总结
1、JSX是React的核心内容。
2、JSX表示在JS代码中编写HTML结构，是React声明式的体现。
3、使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构。
4、推荐使用 className 的方式给JSX添加样式。