一、什么是 JSX

JSX即JavaScript XML。一種在React組件內部構建標簽的類XML語法。JSX為react.js開發的一套語法糖，也是react.js的使用基礎。React在不使用JSX的情況下一樣可以工作，然而使用JSX可以提高組件的可讀性，因此推薦使用JSX。

二、JSX 的基本使用

 2.1 為什么使用 JSX

? 原因一：使用 React.createElement() 創建元素比較繁瑣，不簡潔

? 原因二：代碼不簡潔，無法一眼就看出結構層次

    React.createElement(  'div', null,  
       React.createElement('h1', null, '購物列表'), 
       React.createElement('ul', null, 
          React.createElement('li', null, '華為'),  
          React.createElement('li', null, 'iPhone')
       )
   )

 2.2 JSX 簡介

• JSX 是 JavaScript XML 的簡寫，表示 JavaScript 代碼中寫 XML（HTML）格式的代碼
• 優勢：聲明式語法更加直觀、與 HTML 結構相同，降低了學習成本、提升開發效率
• JSX 是 react 的核心內容

利用 React.createElement() 方法創建元素

React.createElement(  'div', null,  
    React.createElement('h1', null, '購物列表'), 
    React.createElement('ul', null, React.createElement('li', null, '華為'),  React.createElement('li', null, 'iPhone'))
)

<div>
   <h1>購物列表</h1>
   <ul>
      <li>華為</li>
      <li>iPhone</li>
   </ul>
</div>

利用 JSX 語法，結構清晰，就是平時寫的 HTML 標簽

 2.3 使用步驟

 1.使用 JSX 語法創建react 元素
 // JSX 語法
 const el = （<h1>Hello JSX!</h1>）
 2.使用 ReactDOM.render() 方法渲染 react 元素到頁面中
 // 渲染
 ReactDOM.render(el, document.querySelector('#root'))

 2.4 注意點   

3. JSX 中使用 JavaScript 表達式思考  

JSX 語法是好用，但是這和寫靜態 HTML 標簽好像沒有區別

如何動態顯示數據？實際應用一般都是從服務器獲取數據，并將數據顯示在頁面中

猜想一下，既然 JSX 是直接寫在 JS 中的，那 JS 當中的變量或函數應該可以在 JSX 中訪問

const data = 'OPPO'
render() {
    return (
        <div>
           <h1>購物列表</h1>
           <ul>
              <li>華為</li>
              <li>iPhone</li>
              <li>{data}</li>
          </ul>
       </div>
    )
}

3.1 嵌入 JS 表達式   

語法：{JavaScript表達式}

const name = '小明'
const dv = (
   <div>你好，我叫：{name}</div>
)

 注意點
 1.單打括號中可以是任意的 JavaScript 表達式，如：三元表達式，加減乘除，數組，字符串
 2.單大括號中不能出現語句(例如：if/for等)
 3.JS 對象一般只會出現在style屬性中

4. JSX 的條件渲染

思考
    條件渲染：根據不同條件渲染不同的 JSX 結構
    典型場景：Ajax 異步請求數據中的 loading 效果
    結合之前的知識，猜想該如何實現
    雖然在 JSX 中無法直接寫 if/else 判斷，但是可以嵌入函數表達式
    在函數表達式中進行 if/else 判斷

4.1 條件渲染實現   

可以在函數表達式中使用 if/else 或者三元運算符來實現

const loadData = () => {
    if(idLoading) {
        return <div>數據加載中...</div>
    } else {
        return <div>數據加載完成</div>
    }
}

const load = (
    <div>
        {loadData()}
    </div>
)

5. JSX 的列表渲染

思考：
實際開發中前端拿到的數據結構

const books = [
    {id: 1, name: 'React'},
    {id: 2, name: 'Vue'},
]

 如何轉化為下面的這種結構

const books = [
    <li>React</li>,
    <li>Vue</li>,
]

5.1 列表渲染實現

    通過遍歷數組的方法 map
    Array.prototype.map()

const list = (
    <ul>
        {books.map(item => <li>{item.name}</li>)}
    </ul>
)

6. JSX 的樣式處理

   1. 行內樣式 - style

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>  
    JSX的樣式處理
</h1>

  2.類名 - className
  需要使用 import '樣式文件路徑/樣式文件名稱.css’導入樣式文件 ,title類在xxx.css文件中定義好

<h1 className="title">  
    JSX的樣式處理
</h1>

總結

1.JSX 是React 的核心內容
2.JSX 表示在JS代碼中寫HTML結構，是React聲明式的體現
3.使用 JSX 配合嵌入的 JS 表達式、條件渲染、列表渲染，可以描述任意 UI 結構
4.推薦使用 className 的方式給JSX添加樣式

原文鏈接：https://blog.csdn.net/web00_11/article/details/121315226