一：安装react
1:直接下载react源码包，把需要用到的js文件引入自己的页面即可。
2:BootCDN 的 React CDN 库：
在页面代码中导入即可：
<head> <meta charset="UTF-8" /> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head>
二：JSX
React 使用 JSX 来替代常规的 JavaScript。
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
React 推荐使用内联样式：即先定义一个样式变量，然后在指定元素样式时 style=styleVar即可。
注释：{/* 注释 */}
JSX允许在html标签之间插入数组，并且会自动遍历数组。
JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签：
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名：
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 组件，只需创建一个大写字母开头的本地变量：
var MyComponent = React.createClass({/*...*/});
ReactDOM.render(myElement, document.getElementById('example'));
三：组件
1）创建自定义组件
var HelloMessage = React.createClass({ render: function() { return <h1>Hello World！</h1>; } });
React.createClass 方法用于生成一个组件类 HelloMessage。
原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头。
2）使用组件
ReactDOM.render( <HelloMessage />, document.getElementById('example') );
<HelloMessage /> 创建组件类实例。
如果我们需要向组件传递参数，可以使用 this.props 对象：
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } });
在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
3）组件复合
var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> //Name是自定义的组件 <Link site={this.props.site} /> //Link是自定义的组件 </div> ); } });
四：状态
React 把组件看成是一个状态机。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不需要操作 DOM）。
每次修改以后，自动调用 this.render 方法，再次渲染组件。
五：参数
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
所以有些容器组件需要定义 state 来更新和修改数据， 而子组件只能通过 props 来传递数据。
你可以通过 getDefaultProps() 方法为组件 props 设置默认值：
getDefaultProps: function() {
return {
name: 'Runoob'
};
}
我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。
var WebSite = React.createClass({ getInitialState: function() {／／设置默认值 return { name: "菜鸟教程", site: "http://www.runoob.com" }; }, render: function() { return ( <div> <Name name={this.state.name} /> //创建子组件实例，把数据传进去 <Link site={this.state.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1>//使用props获取父组件传进来的参数 ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } });
Props 验证：
使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据（比如：类型不对）时，JavaScript 控制台会抛出警告，前端也不会产生输出。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
验证器有：
propTypes: {
// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
六：组件API
- 设置状态：setState：
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
- 替换状态：replaceState
- 设置属性：setProps
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
- 替换属性：replaceProps
- 强制更新：forceUpdate
- 获取DOM节点：findDOMNode
- 判断组件挂载状态：isMounted
可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
七：组件生命周期
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
-
componentWillMount 在渲染前调用,在客户端也在服务端。
-
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
-
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
-
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 -
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
-
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
-
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
八：异步通信
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据后，可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。