一. 特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
二. 组件
class App extends React.Component{
render(){
return <p>
<h1>Hello World</h1>
</p>
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
)
注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：
class App extends React.Component{
render(){
return <p>
<h1>Hello World</h1>
<p>{this.props.name}</p>
</p>
}
}
ReactDOM.render(
<App name='今天写的第一个组件' />,
document.getElementById("root")
)
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 javascript 的保留字。
复合组建
ReactDOM.render(
<App name='今天写的第一个组件' />,
document.getElementById("root")
)
class App extends React.Component{
render(){
return <p>
<h1>Hello World</h1>
<p>{this.props.name}</p>
<Text site=" https://www.runoob.com" />
</p>
}
}
class Text extends React.Component{
render(){
return<p>
<a href={this.props.site}>
{this.props.site}
</a>
</p>
}
}
3. 状态和事件
class App extends React.Component{
constructor(...args){
super(...args)
this.state={
value:''
}
}
fn(ev){
this.setState({value:ev.target.value})
}
render(){
return <p>
<input type="text" onClick={this.fn.bind(this)} />
<p>{this.state.value}</p>
</p>
}
}
class Text extends React.Component{
render(){
return<p>
<a href={this.props.site}>
{this.props.site}
</a>
</p>
}
}
class App extends React.Component{
constructor(...args){
super(...args)
this.state = {
display:'block'
}
}
fn(){
this.setState({
display:this.state.display=='block'? 'none': 'block',
})
}
render(){
return<p>
<p onClick={this.fn.bind(this)}>点击显示隐藏</p>
<p style={{display:this.state.display}}>显示隐藏</p>
</p>
}
}
getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
