# JSX語法 ## 為什么要使用JSX 我們發現在工作中如果全部按照上面的方式去書寫網頁的結構，那么書寫方式全部都是`React.createElement('h1', null, '這是一個大大的H1')`這樣去做。反而會增加許多的麻煩。React也為我們考慮了這個事情，所以它提供了JSX語法糖，可以化簡我們的代碼。 ## 配置 如要要使用 JSX 語法，必須先運行 `cnpm i babel-preset-react -D`，然后再 `.babelrc` 中添加 語法配置； ## JSX語法的本質： 使用JSX，其它它內部還是以 `React.createElement `的形式來實現的，并沒有直接把 用戶寫的 HTML代碼，渲染到頁面上； ## JSX中書寫JS 如果要在 JSX 語法內部，書寫 JS 代碼了，那么，所有的JS代碼，必須寫到 {} 內部； ### 原理 ： 當 編譯引擎，在編譯JSX代碼的時候，如果遇到了`<`那么就把它當作 HTML代碼去編譯，如果遇到了 `{}` 就把 花括號內部的代碼當作 普通JS代碼去編譯； ### JSX中的注意事項 在{}內部，可以寫任何符合JS規范的代碼；但是也要注意一些例外。 * 在JSX中，如果要為元素添加`class`屬性了，那么，必須寫成`className`，因為 `class`在ES6中是一個關鍵字；和`class`類似，label標簽的 `for` 屬性需要替換為 `htmlFor`. * 在JSX創建DOM的時候，所有的節點，必須有唯一的根元素進行包裹； * 如果要寫注釋了，注釋必須放到 {} 內部。單行注釋要記得換行。多行注釋則不需要。而且這個問題不需要大家格外注意。因為有快捷鍵 `ctrl+?`可以快速實現 `{/**/}`多行注釋。 ## 對比 可以將上一章節中的基礎語法例子改為JSX例子 <iframe width="100%" height="300" src="//jsrun.net/ZFyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ``` import React from 'react' import ReactDOM from 'react-dom' var myH1 = React.createElement('h1', null, '這是一個大大的H1') var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '這是一個div', myH1) ReactDOM.render(myDiv, document.getElementById('app')) ``` ``` import React from 'react' import ReactDOM from 'react-dom' var num = 1; var myDiv = <div title="this is div" id="mydiv" className="abc"> 這是一個div { //這是注釋 } {/*這是注釋*/} {num} <label htmlFor="box">label</label> <h1>這是一個大大的H1</h1> </div> ReactDOM.render(myDiv, document.getElementById('app')) ``` ## 總結 JSX化簡了React的api-React.createElement()函數。我們可以像書寫html一樣書寫結構。 JSX中書寫JS，要寫在{}內部。 JSX中書寫注釋 也只能書寫JS的注釋 那么要寫在{}中。單行注釋 要注意換行。多行注釋可以通過ctrl+? JSX中有一些例外的 class類句要寫成className，lable標簽的for屬性要寫成htmlFor