react入門-----（jsx語法，在react中獲取真實的dom節點）

1、jsx語法

var names = ['Alice', 'Emily', 'Kate'];
        <!-- HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫 -->
        ReactDOM.render(
          <div>
          {
            names.map(function (name) {
              return <div>Hello, {name}!</div>
            })
          }
          </div>,
          document.getElementById('example')
        );

        var arr =[
            <h1>Hello world!</h1>,
              <h2>React is awesome</h2>,
        ]
        <!-- JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組，則會展開這個數組的所有成員 -->
        var ArrComponent = React.createClass({
            render: function() {
                return <div>
                    {arr}
                </div>
            }
        })
        ReactDOM.render(
            <ArrComponent/>,
            document.getElementById('continer')
        )

2、獲取真實的DOM節點

var MyComponent = React.createClass({
            handleClick: function(event) {
                this.refs.myTextInput.focus()
                event.stopPropagation()
                event.preventDefault()
            },
            changeClick: function(event) {
                console.log(event.target.value)
            },
            render: function() {
                return (
                    <div>
                        <!-- 給虛擬dom添加ref屬性 -->
                        <!-- 然后可以在函數中通過 ReactDOM.findDOMNode(this.refs.tip)來獲取真實的dom節點-->
                        <input type="text" ref="myTextInput" onChange={this.changeClick}/>
                        <input type="text" value="Focus the text input" onClick={this.handleClick}/>
                    </div>
                )
            }
        })
        <!-- ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。 -->
        ReactDOM.render(
            <MyComponent/>,
            document.getElementById('continer')
        )