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添加樣式。