1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2         <!-- HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写 --> 3         ReactDOM.render( 4           <div> 5           { 6             names.map(function (name) { 7               return <div>Hello, {name}!</div> 8             }) 9           }10           </div>,11           document.getElementById(‘example‘)12         );13 14         var arr =[15             <h1>Hello world!</h1>,16               <h2>React is awesome</h2>,17         ]18         <!-- JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员 -->19         var ArrComponent = React.createClass({20             render: function() {21                 return <div>22                     {arr}23                 </div>24             }25         })26         ReactDOM.render(27             <ArrComponent/>,28             document.getElementById(‘continer‘)29         )

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‘)        )