$ cnpm install -g create-react-app 安装环境

 $ create-react-app my-app 创建一个项目，并命名

 $ cd my-app/ 进入项目

 $ npm start 启动项目

 jsx js+xml(标签语法，类似于html)

 jsx javascript的拓展语言，完全是javascrip内部实现的

 jsx 只能又一个父标签

 jsx 可以使用{表达式}

 JSX 代码的外面扩上一个小括号

 jsx 添加样式 使用className

 子组件 使用this.props.事件名（参数）

 父组件 <子组件 事件名＝｛处理函数｝>

 父组件的处理函数中的参数 就是子组件传递过来的数据

在使用 子组件上自定义一个事件 <ComA :on-show={xxx}/>

子组件中 使用 $emit('on-show',值)

 引入 prop-types

 父组件

 声明 childContextTypes 进行数据验证

 声明 getChildContext 提供数据和方法 供下级组件使用

 子组件

 声明contextTypes 进行数据验证

 在事件中 使用this.context.方法名（上级组件 childContextTypes中声明的方法 ）

cnpm install events

引入events

、创建 event.js文件

import { EventEmitter } from 'events';

export default new EventEmitter();

导出 emitter对象

A 组件接受数据 使用emitter.addListener（‘changeMessage’） 注册一个事件

B 组件发送数据 使用emitter.emit('changeMessage', '数据');

、发送数据的组件

引入emitter对象

使用 emitter.emit('changeMessage', 'message'); 通过changeMessage 发送一个数据message

、在接收数据的组件中

引入emitter对象

注册接受函数 使用 emitter.addListener('changeMessage',function(message){ message参数就是传递过来的数据})

在组件中获得 使用组件时候在组件中以任何形式(标签元素)传递过来的数据 和slot 很相似

 受控组件 input中的value值通过state值获取，onChange事件改变state中的value值，input中的value值又从state中获取

 非受控 非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOM。

 引入 react-router-dom 路由核心组件

 引入 react-loadable 路由懒加载方式

 HashRouter 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。

 BrowserRouter 是使用 React Router 的应用推荐的 history。

 它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。

 exact的值为bool型，为true时表示严格匹配，为false时为正常匹配。

 路由懒加载 可用于项目优化 会把项目分包 非路由懒加载打包后就一个资源包。加载很慢

 路由懒加载 会按照路由模块进行分包 所以浏览器在加载这些 小资源包的时候会更快。

 <Route path='/path/:name' component={Path}/>

 <link to="/path/2">xxx</Link>

 编程式导航 this.props.history.push({pathname:"/path/" + name});

 读取参数用:this.props.match.params.name

 this.props.history.goBack() 等同于 this.props.history.go(－)相当于浏览器自带的后退 不写参数 默认后退1级

 this.props.history.go() 前进/后退（负数） 相当于浏览器的 前进／后退按钮 参数代表前进／后退几级 go()刷新

 this.props.history.goForward() 等同于 this.props.history.go()

 this.props.history.location.pathname 代表当前路由地址

 嵌套（子）路由

 父路由组件中，在定义一个路由规则

cnpm install redux

cnpm install react-redux

什么是redux 数据状态管理：
就是说我们项目中有很多组件需要共享数据，这时候可以使用redux

搭建 ：
我一般都会创建3个文件夹。

action 里面我会定义 方法。这个方法用来触发reducers里面的处理逻辑。

因为方法里面 会返回两个字段，一个type 用来表示一个字符串， 还有一个data，就是调用actioni 面的方法时传递的参数

reducer 定义store里面的数据和处理逻辑。

处理逻辑通常使用 switch case 来选择对应的action传递过来的type 类型进行处理

store 里面会导出 reducer 封装好的数据

使用数据：

在 index.js 里面使用 provider 这个组件，将根组件和我们引入的store 联系起来。这样根组件中的所有组件都可以使用redux

在具体的某个组件中，引入 connect 方法，该方法用来将 mapStateToProps mapDispatchToProps 和当前组件关联起来

mapStateToProps 用来引入数据(store) mapDispatchToProps 用来引入 action里面的方法

使用this.props.store的名称 来获取redux里面的数据

使用 this.props.actios的名称 来获取action里面的方法

语法 document.cookie = 'key=value;exprese='过期时间.toGMTString();'

escape(value) js 编码 unescape() 解码

什么是cookie

它类似于本地存储。

不过存的值比较小 4kb左右,

而且他可以设置过期时间。

接口请求是可以被携带到服务器，

使用场景，7天免登录