而創建子元素可以直接交給JSX轉化器
Javascript表達式
在JSX語法中寫Javascript表達式只需要用{}即可，比如下面這個使用三目運算符的例子：JSX是HTML和JavaScript混寫的語法，當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。
不過要注意的是，JSX語法只是語法糖，它的背后是調用ReactElement的構造方法React.createElement的，所以類似這樣的寫法是不可以的：
傳播屬性（Spread Attributes）
如果提前就知道了組件的屬性的話，寫起來很容易。例如component組件有兩個動態的屬性foo和bar：
而實際上，有些屬性可能是后續添加的，我們沒辦法一開始就確定，我們可能會寫出下面不好的代碼：
這樣寫是錯誤的，因為我們手動直接添加的屬性React后續沒辦法檢查到屬性類型錯誤，也就是說，當我們手動添加的屬性發生類型錯誤時，在控制臺是看不到錯誤信息的。
在React的設定中，初始化完props后，props是不可變的。改變props會引起無法想象的后果。
延伸屬性
為了解決這個問題，React引入了屬性延伸
這樣就相當于：
當需要拓展我們的屬性的時候，定義個一個屬性對象，并通過{…props}的方式引入，在JSX中，可以使用...運算符，表示將一個對象的鍵值對與ReactElement的props屬性合并，這個...運算符的實現類似于ES6 Array中的...運算符的特性。，React會幫我們拷貝到組件的props屬性中。重要的是—這個過程是由React操控的，不是手動添賦值的屬性。
它也可以和普通的XML屬性混合使用，需要同名屬性，后者將覆蓋前者：
JSX 陷阱
style屬性
在React中寫行內樣式時，要這樣寫，不能采用引號的書寫方式
HTML轉義
比如我們有一些內容是用戶輸入的富文本，從后臺取到數據后展示在頁面上，希望展示相應的樣式
結果頁面直接輸出內容了：
React默認會進行HTML的轉義，避免XSS攻擊，如果要不轉義，可以這么寫：
參考資料
