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