1、JSX 語法

在react中，就是使用jsx的語法，來實現DOM元素的展示。一個基本的jsx語法的react模板如下：

<div>{this.props.title}</div>

這種方式的本質是：在html中嵌入js表示式！！

那到底編譯器如何對jsx語法進行編譯的呢？規則就是這樣的： 遇到以“<”開頭以“>”結尾就按照HTML的語法來解析，遇到“{”開頭以“}”結尾的按照JavaScript表示式來解析。

JSX語法能夠解析表示式（基本運算操作、三目運算子、陣列等）

基本運算的示例

可以輸出基本的加減乘除。

var Hello = React.createClass({
   render: function
 
 () {
        return (
            <h1>
                hello world!
                { 1+1 }
            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

三木運算的示例

下面的isShow展示為true或者false展示不同的頁面。

var Hello = React.createClass({
    getInitialState: function
 
 () {
        return {
            isShow: true
        }
    },
    render: function () {
        return (
            <h1>
                hello world!
                { this.state.isShow ? <span>123</span>:<span>456</span> }
            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'
 
))

陣列的解析

JSX可以解析陣列，返回DOM元素。

var Hello = React.createClass({
    render: function () {
        return (
            <h1>
                hello world!
                <ul>
                    { [<li>123</li>,<li>123</li>,<li>123</li>] }
                </ul>

            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

2、條件渲染

在react中條件渲染是使用三木運算子的方式進行的。

var Hello = React.createClass({
    getInitialState: function () {
        return {
            like: true
        }
    },
    click: function () {
        this.setState({
            like: !this.state.like
        })
    },
    render: function () {
        return (
            <h1>
                hello world!

                { this.state.like?<span>I like you!</span>:<span>I dislike you!</span> }

                <button onClick={this.click}>change</button>
            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

在本示例中，使用click函式，改變state的狀態，根據改變狀態，從而展示不同的東西。

3、列表渲染

由於在react中，jsx能夠把陣列解析出來，所以從實現上來說，列表渲染一般我們使用map方法來實現DOM渲染。

var Hello = React.createClass({
    getInitialState: function () {
        return {
            arr: ['mapbar_front','liwudi','我是中國人']
        }
    },
    render: function () {
        return (
            <ul>
                { this.state.arr.map((item,index) => {
                    return (
                            <li key={index}>{item}</li>
                    )
                })}
            </ul>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

列表渲染的方式，是通過map方法來實現的，返回值是一個數組，其中的item代表陣列的每一項，會把這每一項渲染到對應的DOM中。