安装
React依赖于react、react-dom这两个包。生成React项目可以通过包管理工具(如npm)导入react、react-dom包来创建[1]；也可以通过官方提供的创建方式 create-react-app：npm install -g create-react-app create-react-app my-app 或 npx create-react-app my-app(npm 5.2.0+) 来创建[2]。如果只是在现成的项目中引用React而不需要使用前端打包工具来打包，也可以通过CDN来引入React[3]。
[1]: https://doc.react-china.org/docs/add-react-to-an-existing-app.html
[2]: https://doc.react-china.org/docs/add-react-to-a-new-app.html
[3]: https://doc.react-china.org/docs/cdn-links.html
组件与模块
组件为页面中一个的区域，其包含了该组件实现所需要的全部资源。页面中每个组件相互独立，可以重复使用，自由组合。
模块化为将某功能分离出来进行实现。前端组件可以由实现功能的模块(如 JavaScript 模块-实现组件的行为功能等；CSS 模块-实现组件的样式功能等...)和所需的媒体资源构成。
为了使每个模块有独立的作用域和方便代码的复用，可以将实现功能的代码封装成函数并独立到一个单独的文件中，再通过 module.exports 将该模块的接口暴露出来，使其他模块可以通过 require 来使用这个该功能。
React 基于组件来管理资源。
JSX
JSX 为 JavaScript 的一种语法扩展，它类似于模板语言(但完全在 JavaScript 内部实现)。React 推荐 JSX 来描述用户界面(组件的UI部分)[4]。
因为 if 和 for 在 JavaScript 中不是表达式，因此不能将 if 和 for 置于 JSX 中，而应放置在外部以控制渲染。
[4]: https://doc.react-china.org/docs/introducing-jsx.html
组件渲染
在 React 中可以用 JavaScript函数 来定义一个组件也可以用 类(ES6 class) 来定义一个组件(组件名必须以大写字母开头)。
React 通过 ReactDOM.render() 方法渲染组件；React组件 可以嵌套其他 React组件 ，但其返回值只能有一个根元素(必要时用 <div> 等标签进行包裹)[5]。
[5]: https://doc.react-china.org/docs/components-and-props.html
Props
props 是向 React 组件中传递的只读的值(常量)。
class Student extends React.Component {
static defaultProps = {
stuName: 'Marke',
stuAge: '22'
};
render() {
return (
<div>
<h3> Name: {this.props.stuName} </h3>
<h3> Age: {this.props.stuAge} </h3>
</div>
);
}
}
ReactDOM.render(
<Student
stuName={'John'}
stuAge={'23'}
/>,
document.getElementById('root')
);
在组件内部使用 this.props 对象来获取传递过来的常量；也可以对 Props 设置默认值--通过一个 static 类型的对象 defaultProps 来设置默认的 值；即无传递对应参数时使用默认的值。
State
State 为 React组件 内部的一个可变的私有属性。可以通过改变组件的 State 来实现组件UI的重新渲染。
class StateDemo extends React.Component {
constructor(props) {
super(props);
this.state = {num: 0};
}
render() {
return (
<div>
<h2>The stateNum is {this.state.num}</h2>
<button onClick={() => this.setState(prevState => ({num: prevState.num + 1}))}>ADD ONE</button>
</div>
);
}
}
该组件实现在按钮点击之后其显示的数值加一。组件通过 <button> 的 onClick 事件来使用 setState 进行 state 的更新，使得组件进行重新的渲染。并且 State 只适用于定义于类的组件。
