前言
作為一個前端開發有些不好意思，居然還沒有接觸過 React ，就借這段時間積累下 React 相關經驗，為疫情過後能有更多的就業機會。
如果你已經是個經驗豐富的 React Developer 可能這系列文章不太適合你閱讀。
雖然我承認下面大多數內容，基本都可以在官網找到原型。 但我會努力讓你們儘可能不枉此行，如果有不對之處，望各位評論指出。
為了更好的閱讀體驗，你可以在底下的“瞭解更多”查看原文（訪問我的語雀知識庫）。
JSX 介紹
什麼是 JSX
如下代碼，和 HTML 標籤似乎一樣，但不是我們認為的 HTML 標籤：
就是如此的語法稱為 JSX ，它被用來描述 React 中的"元素"，從而渲染出我們說要看的頁面。
語法糖
雖然 JSX 像是 HTML ，但其是 js 的語法擴展的語法糖。
舉例：
如上 JSX 代碼，將通過 React.createElement(component, props, ...children) api 解析成如下形式：
注意，上述解析結果就是普通的 js 代碼，同時內部對每個子 JSX 標籤（children）元素都是嵌套的。
JSX 標籤內的屬性（key=value） 將被解析成 props 對象，可以清楚的看到 href 、target、alt 等解析結果。
為何使用 JSX
如果使用過 angular2、vue ，你應該知道他們對於 js 和 html 兩塊內容是分開寫的。
angular 物理分割：
vue 通過 loader 組合拆分：
而 React 通過 JSX 語法，將兩者耦合在一起。
React 認為渲染邏輯本質上與其他 UI 邏輯內在耦合，比如，在 UI 中需要綁定處理事件、在某些時刻狀態發生變化時需要通知到 UI，以及需要在 UI 中展示準備好的數據。
React 並沒有採用將標記與邏輯進行分離到不同文件這種人為地分離方式，而是通過將二者共同存放在稱之為"組件"的鬆散耦合單元之中，來實現關注點分離。
最終，我們能更好的理解整個組件裡 UI 和邏輯部分的關係。當然這仁者見仁智者見智。
另外，在 JSX 內部會對傳入內容進行轉義，再進行渲染。所以能防止 XSS 注入攻擊。
使用 JSX
括號 { } 表達式
我們可以通過大括號，來顯式定義的變量。括號內也支持 js 表達式，或者已定義的方法。
示例：
頁面顯示：
if 條件判斷
由於 {} 括號內部不支持複雜的 js 邏輯判斷，如果涉及 if/else 之類語句，可以將 JSX 寫在 if/else 裡面，因為其本身就是 js 的擴展。
特定屬性
或許你應該注意到 HTML 中的 class 屬性，在 JSX 中被定義為 className；而 tabindex 變為 tabIndex 。
所以 JSX 和 HTML 是不一樣的，儘管他們非常類似。而且 React DOM 中，這些屬性使用 camelCase 來命名定義。
JSX 約定
需要包含 React 庫
這好理解，因為 JSX 是 React.createElement 的語法糖，所以需要在此之前引入 React ，確保 React 在作用域中。
組件名首字母大寫
組件的名稱一定要首字母大寫，如果小寫會導致解析不正確：
把 JsxBase 改為 jsxBase，第一能看到 IDE 的校驗已經是"未引用"狀態了，然後頁面也沒有預期渲染出組件內容。
點語法
可以定義一個包含很多 React JSX 的組件，然後一起導出。最後通過指定的引用來選擇使用哪個組件。
比如定義了 Foo、Bar 兩個組件，然後一同導出：
最後在使用的地方，通過 xxx.xxx 的方式來選擇使用那個組件：
不支持動態表達式
注意，JSX 通過 React.createElement 解析，其中的 type 選項不支持動態表達式。
示例：
而是要通過一箇中間變量，來引用這個動態表達式。最後返回這個中間變量。
注意，這個中間變量，還是要符合 React JSX 的命名規範，首字母要大寫。
其他
props
我們知道 JSX 內的屬性最終都會被解析到 props 中，若某個屬性沒有賦值，那它默認就為 true 。
{autocomplete: true}
另外，我們可以使用 {...xxx} 來定義整個屬性：
特殊值的問題
false, null, undefined, and true 是合法的子元素。但它們並不會被渲染：
最終，頁面是一片"空白"
另外，對於 falsy 值的渲染，需要長個心眼：
上面紅款內容顯示在頁面上了，並且渲染為 0 。
總結
關於 JSX 的知識點先梳理到這裡，基本對一般的使用足夠用了。多數都是一些規則的梳理，畢竟這是 React.createElement 的語法糖。
閱讀更多 前端雨爸 的文章
