前言

在react中，我們的頁面內容就是通過JSX來編寫，那麼JSX到底是什麼呢？JSX其實就是JavaScript物件，會構建建立一個js物件來描述HTML結構的資訊。這裡要記住JSX是js的一種擴充套件語言，類似HTML但是又不是HTML，因為JSX中還能進行運算，判斷，加入一些js語言等。

JSX中的運算

   render() {
      return(
        <div>
           <h2>算數題</h2>
           <ul>
             <li>5+6={5+6}</li
 
>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

在JSX中是用 {} 來區分是HTML還是js的，也就是說，所有的js語言都得用 {} 括起來

JSX中的變數

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div
 
>flag為真</div>) : (<div>flag為假</div>)}
        </div>
      )
    }

JSX中的樣式

在JSX中,給元素新增樣式也是用style屬性，但是style裡面放的是一個樣式物件，如下所示：

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div
 
 style={{color: 'red'}}>顏色</div>
            <div style={newStyle}>樣式</div>
        </div>
      )
    }

通過上述案例，我們可以知道JSX中，樣式的屬性名稱得用駝峰命名

JSX中的HTML標籤

在JSX中，有些標籤名稱為了防止衝突得做一些轉換：

1. class得用className代替
2. lable元素中的for屬性，得用htmlFor代替，如下：

<label htmlFor="msg" ></label>

這裡還要注意，JSX中的所有標籤必須得是閉標籤