點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

從寫React項目開始，我們熟悉了一種語法，叫JSX，它很好的將邏輯和模板融合在一起。當然，有一點我們應該很清楚，在React項目開發的時候，我們可以使用JSX來編寫代碼，也可以使用純JavaScript來編寫代碼，這樣的話，即使不學JSX也可以正常開發React項目。

然而，facebook官方推薦我們使用JSX來寫React代碼。為什麼呢？下面從四個方面介紹，帶你學會使用JSX。

一、JSX如何區分React組件和HTML標籤

HTML類型的標籤第一個字母用小寫來表示，React組件標籤第一個字母用大寫來表示。

比如：

上面代碼是一個HTML類型的標籤定義，需要知道兩點：

第一，當一個標籤裡面內容為空的時候，可以直接使用自閉和標籤;

第二，因為JSX本身是JavaScript語法，所以一些JavaScript中的保留字要用其他的方式書寫，就像上面class要寫成className。

這裡寫的是一個React組件，注意名字第一個字母大寫。

二、JSX中JavaScript表達式如何定義

標籤對標籤（或組件名），{}對JS代碼，無屬性默認為true

什麼意思了？就是說在JSX語法中，當遇到標籤的時候就解釋成組件或HTML標籤，當遇到{}包裹的時候就當成JavaScript代碼來執行。

比如：

上面代碼中，{}內會當表達式處理，isLoggIn為true時輸出組件<Nav/>否則輸出<LoginForm/>

當省略一個屬性的值的時候，如<Nav isDisable/>。JSX會自動把它的值認為是true（isDisable=true）。

三、JSX注釋如何寫

在子組件中寫注釋的時候要用{}

比如：

四、多屬性如何定義

用「三點」操作符來簡化多個屬性的編寫。舉個例子：

顯然，上面這種寫法，當出現更多屬性的時候，會顯得很難看。下面看一個更優雅的寫法。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！