1.基本语法
1.1快速搭建
Cnpm i -g create-react-app
Create-react-app my-app
Cd my-app
Npm start
1.1.1registerServiceWorker.js
在快速开发react环境中，registerServiceWorker.js作用：
在生产环境中为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度
1.1.2JSX
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化,类似于html,
需要一个div包裹起来
自定义属性data-前缀
React jsx可以独立于一个文件，通过<script src=””>引入
注：chrome可能不支持本地跨域请求，注意在快捷方式下，属性--目标--空格--加上 --allow-file-access-from-files
1.1.3Jsx语法规则
表达式：{1+1}，不能用if else，可使用三目运算符
样式：var mystyle={},<h1 style={mystyle}></h1>
注释：标签内{//}，标签外//
1.1.4React组件
声明：注首字母大写
//es5创建方式var component=React.createClass({})
//es6创建方式class Component extends React.Component{}
Var Hello=React.createClass({
Render:function(){
//若是多个组件，则用括号括起来，注意只有一个顶层组件
Return <h1>hello world</h1>
}
});
调用，直接用标签样式,且只能包含一个顶层标签
ReactDOM.render(
<Hello />,
Document.get ElementById(‘’)
)
1.2组件生命周期
1.2.1Mounting:插入真实DOM
constructor()：super(props)子类组件调用super才能引用this获取父类属性和方法，实现继承
componentWillMount()：在渲染前调用,在客户端也在服务端
render()：
componentDidMount()：第一次渲染后调用，只在客户端。可以在这个方法中调用setInterval,setTimeout,或者发送AJAX请求操作，防止异步阻塞
1.2.2Updating:
componentWillReceiveProps():已加载组件收到新的参数时调用,初始化render时不会被调用
shouldComponentUpdate():在组件接收到新的props或者state时被调用。
componentWillUpdate()在组件接收到新的props或者state但还没有render时被调用
render()
componentDidUpdate():在组件完成更新后立即调用
1.2.3Unmounting:
componentWillUnmount():在组件从 DOM 中移除的时候立刻被调用
1.3router
父组件向子组件传值：子组件通过this.props.value获取
子组件向父组件传值：子组件通过props调用父组件中控制state的函数，意思就是在父组件中定义控制state的函数，向子组件传属性，而这个属性就是函数，所以在子组件调用props.函数就好了:回调
1.3.1设置默认页面（路由）：<IndexRoute/>
在没有使用默认路由时，this.props.children为undefined，当然我们有两种解决：
方案一：{this.props.children||”xixixi”}
方案二：<IndexRoute component={Home}/>
1.3.2History
可以监听地址栏的变化，将url转化为location对象，然后router使用它匹配到路由，最终显示正确的组件：其中包括三个：browserHistory荐）/hashHistory/createMemoryHistory
browserHistory：
import { browserHistory } from 'react-router'
<Router history={browserHistory }></Router>
1.3.3IndexLink
在路由中，由于根组件路由为/,所以子组件在激活时，父组件一直处于激活状态，我们想要让他在点击时，才处于激活，那么就使用<IndexLink>
1.3.4Redirect,IndexRedirect
用于路由跳转：＜Redirect from="messages/:id" to="/messages/:id" />
从messages/:id---->/messages/:id
IndexRedirect用于访问根组件时，重新定向到某个组件
1.3.5高亮显示
高亮：activeClassName=”active”
缺点：父组件下的子组件高亮时，父组件也会高亮
解决：
方法一：
<Link to="/" activeClassName="active" onlyActiveOnIndex={true}>
Home
</Link>
方法二：
<IndexLink activeClassName="active"></IndexLink>
