摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語法，后面我們會(huì)有多帶帶的一小節(jié)講解的基本語法，不過目前為止我們先將跟多精力放在上。

書籍完整目錄

官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html

JSX 語法聽上去很討厭，但當(dāng)真正使用的時(shí)候會(huì)發(fā)現(xiàn)，JSX 的寫法在組件的組合和屬性的傳遞上提供了非常靈活的解決方案。

在學(xué)習(xí)本節(jié)的時(shí)候，希望讀者在閱讀的同時(shí)能夠?qū)嶋H編碼體驗(yàn) JSX ，寫代碼的意思是真的要寫.代.碼。

為了快速開始 JSX 的學(xué)習(xí)，我們可以通過如下幾種方式快速進(jìn)入 React 開發(fā)環(huán)境

Babel REPL

直接在 REPL 中寫 JSX 語法，可以實(shí)時(shí)的查看編譯后的結(jié)果。

在線模式 React Fiddle

第一步：打開編輯器，新建一個(gè) hello-react.html 文件
第二步：粘貼 Hello, world 代碼

https://github.com/leanklass/leanreact/tree/hello-world

創(chuàng)建 JSX 語法的本質(zhì)目的是為了使用基于 xml 的方式表達(dá)組件的嵌套，保持和 HTML 一致的結(jié)構(gòu)，語法上除了在描述組件上比較特別以外，其它和普通的 Javascript 沒有區(qū)別。 并且最終所有的 JSX 都會(huì)編譯為原生 Javascript。

需要提醒讀者的是，React 的很多例子都是通過 ES6 來寫的， 但這并不是 JSX 語法，后面我們會(huì)有多帶帶的一小節(jié)講解 ES6 的基本語法，不過目前為止我們先將跟多精力放在 JSX 上。

JSX 構(gòu)建組件的規(guī)則和 xml 規(guī)則一致

標(biāo)簽可以任意的嵌套

eg:

function render() {
  return 

           text content 
           

             
....
             
....
           
         

}

標(biāo)簽必須嚴(yán)格閉合，否則無法編譯通過

自閉合：

function render() {
  return 
}

標(biāo)簽閉合:

function render() {
  return 
....
}

JSX 組件分為 HTML 組件和 React 組件

HTML 組件就是 HTML 中的原生標(biāo)簽， 如：

function render() {
  return  
 hello, React World 
}

function render() {
  return 
 
            
list item 1
            
list item 2
         
}

React 組件就是自定義的組件，如

// 定義一個(gè)自定義組件
var CustomComponnet = React.createClass({
  render: function() {
    return 
 custom component 
  }
});

// 使用自定義組件
function render() {
    return 
  
}

和 html 一樣，JSX 中組件也有屬性，傳遞屬性的方式也相同

對(duì)于 HTML 組件

 function render() {
   return  
hello, React, world 
 }

如果是 React 組件可以定義自定義屬性，傳遞自定義屬性的方式：

  function render() {
    return 
  
  }
}

屬性即可以是字符串，也可以是任意的 Javascript 變量
, 傳遞方式是將變量用花括號(hào)， eg:

  function render() {
    var data = {a: 1, b:2};
    return 
  
  }

需要注意的地方上，屬性的寫法上和 HTML 存在區(qū)別，在寫 JSX 的時(shí)候，所有的屬性都是駝峰式的寫法，如：

function render() {
    return  

                
                
            
}

而原生的寫法為:

主要是出于標(biāo)準(zhǔn)的原因，駝峰式是 Javascript 的標(biāo)準(zhǔn)寫法，并且 React 底層是將屬性直接對(duì)應(yīng)到原生 DOM 的屬性，而原生 DOM 的屬性是駝峰式的寫法，這里也可以理解為什么類名不是 class 而是 className 了, 又因?yàn)?class 和 for 還是 js 關(guān)鍵字，所以 jsx 中:

class => className

for => htmlFor

除此之外比較特殊的地方是 data-* 和 aria-* 兩類屬性是和 HTML 一致的。

很多情況，我們需要將 JS 中的文本直接顯示，做法和顯示變量屬性一樣，用花括號(hào)

  function render() {
    var text = "Hello, World"
    return 
 {text} 
  }

花括號(hào)里邊實(shí)際上除了變量以外，可以是一段 JS 表達(dá)式，我們可以利用花括號(hào)做簡(jiǎn)單的運(yùn)算：

  funtion render() {
    var text = text;
    var isTrue = false;
    var arr = [1, 2, 3];
    return 

      {text}
      {isTrue ? "true" : "false"}

      {arr.map(function(it) {
        return  {it} 
      })}

      
  }

注釋的寫法如下：

  function render() {
    return 

            /* 這里是注釋內(nèi)容 */
           
  }

render 方法返回的組件必須是有且只有一個(gè)根組件，錯(cuò)誤情況的例子

  // 無法編譯通過，JSX 會(huì)提示編譯錯(cuò)誤
  function render() {
    return (
 .... 
           
 .... 
)
  }

JSX 可以通過命名空間的方式使用組件, 通過命名空間的方式可以解決相同名稱不同用途組件沖突的問題。

如：

  function render() {
    return 

           
           
           
  }

JSX 的寫法最終會(huì)被編譯成原生的 Javascript。 如果你愿意的話，也可以直接寫編譯后的 JS, 不過最好是寫 JSX, 因?yàn)?JSX 的目的就是為了簡(jiǎn)化寫法，并保持和 HTML 相同的開發(fā)體驗(yàn)。

JSX 具體的編譯方式有兩種

在 HTML 中引入 babel 編譯器, 如上 Hello World 程序中一樣。

離線編譯 JSX，通過 babel 編譯 JSX，細(xì)節(jié)我們將在第二章中講解。

Hello World 程序轉(zhuǎn)化為 JS 的代碼如下：

  var Hello = React.createClass({
    displayName: "Hello",
    render: function() {
      return React.createElement("div", null, "Hello ", this.props.name);
    }
  });

  ReactDOM.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById("container")
  );

可以看出：

<=> React.createElement(Hello, ....)

xml 的寫法實(shí)際上是調(diào)用 React 的工廠方法 createElement。

當(dāng)理解了 JSX 最終會(huì)編譯為 JS 就可以理解 JSX 的一些特性如命名空間，組件實(shí)際上就是一個(gè) Javascript 對(duì)象，命名空間下的組件相當(dāng)于對(duì)象的屬性

TODOMVC 以代辦事項(xiàng)列表為需求模型，包含了各種框架的實(shí)現(xiàn)。 本例子的目的為了讓讀者能夠切身的體會(huì) JSX 的使用方法。

根據(jù)一個(gè) JSON 對(duì)象，用 React JSX 的方式渲染出 TODOMVC 頁面:

JSON 對(duì)象如下：

var todolist = {
    name: "todos",
    todos: [{
            completed: false,
            title: "finish exercise"
        }, {
            completed: false,
            title: "lean jsx"
        }, {
            completed: true,
            title: "lean react"
        }]
}

修改 hello world index.html 中的代碼，為了簡(jiǎn)化問題， 我們可以直接復(fù)制 TODOMVC 中的 HTML 和 CSS 。

class 要寫為 className

input 標(biāo)簽未閉合

數(shù)組遍歷過后要添加 key 屬性，否則會(huì)提示 error 信息（在組件章節(jié)會(huì)講解）

html 轉(zhuǎn) JSX工具， Facebook 提供了 html 轉(zhuǎn) JSX 組件的工具，可以直接復(fù)制 html 轉(zhuǎn)為 JSX 組件

https://github.com/leanklass/leanreact/tree/jsx