diff --git a/.gitignore b/.gitignore
index 0935c60..59ce62e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1 @@
-/reactERP/web/node_modules/
\ No newline at end of file
+/reactERP/node_modules/
diff --git a/README.md b/README.md
index 9e58631..85891df 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,24 @@
# 认识 React
React 是 facebook 开源的一套框架，可总结为以下几个特点：
-- 基于 jsx 语法糖实现
+- 基于 JSX 语法糖实现
- JUST THE UI：在多层架构的设计模式中，React 并不算 MVC 的架构，它可理解为 MVC 的 V 层。
- VIRTUAL DOM：虚拟DOM，是轻量的 js 对象，只保留了原生 dom 的一些常用的属性和方法。
- DATA FLOW： React是单向响应的数据流。
# 技术点
- [JSX 语法](https://github.com/dk-lan/react/tree/master/jsx)
-- [组件](https://github.com/dk-lan/react/tree/master/component)
+- [组件定义](https://github.com/dk-lan/react/tree/master/component/src/define)
+- [组件渲染](https://github.com/dk-lan/react/tree/master/component/src/render)
+- [组件事件](https://github.com/dk-lan/react/tree/master/component/src/event)
+- [state](https://github.com/dk-lan/react/tree/master/component/src/state)
+- [样式绑定](https://github.com/dk-lan/react/tree/master/component/src/style)
+- [表单](https://github.com/dk-lan/react/tree/master/component/src/form)
- [组件通信](https://github.com/dk-lan/react/tree/master/component/src/communication)
- [生命周期](https://github.com/dk-lan/react/tree/master/component/src/lifecycle)
- [路由（3.0）](https://github.com/dk-lan/react/tree/master/router)
-- webpack + es6 环境搭建
-- Flux
- Redux
-- 项目应用
\ No newline at end of file
+ - [Redux 简介和简单实现](https://github.com/dk-lan/react/tree/master/redux)
+ - [Redux 跨组件通信之入门篇 —— combineReducers](https://github.com/dk-lan/react/tree/master/redux/combineReducers)
+ - [Redux 跨组件通信之进阶篇 —— Provider 和 connect](https://github.com/dk-lan/react/tree/master/redux/connetProvider)
+ - [Redux 跨组件通信之高级篇 —— 中间件](https://github.com/dk-lan/react/tree/master/redux/middleware)
+- [项目应用](https://dk-lan.github.io/react/reactERP/index.html#/login)
\ No newline at end of file
diff --git a/component/README.md b/component/README.md
deleted file mode 100644
index 65120fd..0000000
--- a/component/README.md
+++ /dev/null
@@ -1,277 +0,0 @@
-
-# 组件(Component)
-场景：在一个页面上需要显示一个数据列表(datagrid)，可以通过 `ReactDOM.Render()` 渲染出来，如果有 N 个页面需要数据列表呢，这个时候，我们就要把这个数据表列(datgrid)进行封装起来，这种封装起来的对象就叫组件。
-
-## 组件的定义
-- 语法 es5： `var ComponentName = React.createClass(options)` 。
-- 语法 es6： `class ComponentName extends React.Component{options}`。
-- 下面示例中，Component1 为组件名，组件名首字母必须为大写。
-- options 为一个对象，其中 render 是必须存在的，函数返回一个虚拟 DOM 节点。
-```javascript
-//es5
-var React = require('react');
-var Component1 = React.createClass({
- render: function(){
- return (
-
-
Tom
- Sam
-
- )
- }
-})
-
-//es6
-import React from 'react';
-class Component1 extends React.Component{
- render(){
- return (
-
-
Tom
- Sam
-
- )
- }
-}
-```
-
-## 组件的使用
-定义好的组件可以把组件名称当一个 html 标签进行调用。
-```javascript
-//es5
-var React = require('react');
-var ReactDOM = require('react-dom');
-ReactDOM.render(, document.getElementById('div1'));
-
-//es6
-import React from 'react';
-import ReactDOM from 'react-dom';
-ReactDOM.render(, document.getElementById('div1'));
-```
-[效果预览](https://dk-lan.github.io/react/component/src/define/define.html)
-
-## 属性(props)
-因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 React 的组件当中也是可以添加自定义的属性，而属性的获取则用 `this.props`
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-//定义
-class Component1 extends React.createClass{
- render(){
- return (
-
-
姓名：{this.props.name}
-
年龄：{this.props.age}
-
-
姓名：{this.props.name}
-
年龄：{this.props.age}
-
-
姓名：{this.props.name}
- 年龄：{this.props.age}
-
- )
- }
-}
-
-//使用
-ReactDOM.render(, document.getElementById('div1'));
-```
-### 属性的类型规则(propTypes)
-通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 `propTypes` 来设置。
-有定义迷你型规则的组件不需要设置默认属性 `getDefalutProps`。
-```javascript
-//es5
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Component1 = React.createClass({
- propTypes: {
- name: React.PropTypes.string.isRequired, //属性 name 的值必须为字符串且不能为空
- age: React.PropTypes.number.isRequired, //属性 age 的值必须为数字且不能为空
- subjects: React.PropTypes.array.isRequired //属性 name 的值必须为数组且不能为空
- },
- render: function(){
- return (
-
-
姓名：{this.props.name}
-
年龄：{this.props.age}
-
学科：
-
- {
- this.props.subjects.map(function(_item){
- return - {_item}
- })
- }
-
-
-
姓名：{this.props.name}
-
年龄：{this.props.age}
-
学科：
-
- {
- this.props.subjects.map(function(_item){
- return - {_item}
- })
- }
-
-
- {
- React.Children.map(this.props.children, function(childNode){
- return
{childNode}
- })
- }
-
- );
- }
-})
-
-ReactDOM.render(
-
- Tom
- Sam
- , document.getElementById('div1'));
-```
-[效果预览](https://dk-lan.github.io/react/component/src/props/props.html)
-
-## 事件和 ref
-事件可以直接写到 DOM 节点，然后通过 ref 来获取 DOM 节点
-```javascript
-var Component1 = React.createClass({
- focusHandler: function(){
- this.refs.name.focus();
- },
- render: function(){
- return (
-
-
-
-
- );
- }
-});
-ReactDOM.render(, document.getElementById('div1'));
-```
-[效果预览](https://dk-lan.github.io/react/component/src/event/event.html)
-
-## state
-state 可以理解成 props，不一样的在于 props 是只读的，而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树，在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新，从而提升性能。
-在使用 state 前要先初始化 `getInitialState`
-更改 state 一定要用 `setState`
-`getInitialState` 该方法在每次 render 时都会被调用一次。
-```javascript
-//es5
-var StateComponent = React.createClass({
- getInitialState: function(){
- return {
- text: ''
- }
- },
- change: function(event){
- this.setState({text: event.target.value});
- },
- render: function(){
- return (
-
- )
- }
-})
-
-//es6
-import React from 'react';
-import ReactDOM from 'react-dom';
-class Component1 extends React.createClass{
- state = {
- text: ''
- }
- change(event){
- this.setState({text: event.target.value});
- },
- render(){
- return (
-
- )
- }
-}
-```
-[效果预览](https://dk-lan.github.io/react/component/src/state/state.html)
\ No newline at end of file
diff --git a/component/src/define/README.md b/component/src/define/README.md
new file mode 100644
index 0000000..fa0fd3a
--- /dev/null
+++ b/component/src/define/README.md
@@ -0,0 +1,199 @@
+# 组件
+组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
+
+在单页面应用(SPA)中扮演着重要角色
+
+## 组件简单实现 —— 函数式组件
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+let Component1 = () => {
+ return React Component
+}
+
+ReactDOM.render(
+ ,
+ document.getElementById('app')
+)
+```
+
+## 类组件 —— ES5 语法
+```javascript
+var React = require('react');
+var ReactDOM = require('react-dom')
+
+var Component1 = React.createClass({
+ render: function(){
+ return (
+
+
Tom
+ Sam
+
+ )
+ }
+})
+
+ReactDOM.render(
+ ,
+ document.getElementById('app')
+)
+```
+
+## 类组件 —— ES6 语法
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class Component1 extends React.Component{
+ render(){
+ return (
+
+
Tom
+ Sam
+
+ )
+ }
+}
+
+ReactDOM.render(
+ ,
+ document.getElementById('app')
+)
+```
+[效果预览](https://dk-lan.github.io/react/component/src/define/define.html)
+
+#### 组件小结
+- 组件名首字母必须为大写
+- 函数返回一个虚拟 DOM 节点
+- 类组件必须要有 render 方法
+- render 必须返回一个虚拟 DOM 节点
+- 实际工作中，类组件是常用的方式
+
+## 组件属性(Props)
+因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 React 的组件当中也是可以添加自定义的属性，而属性的获取则用 `this.props`
+### 函数式组件
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+let Component1 = (props) => {
+ return name-{props.name}
+}
+
+ReactDOM.render(
+ ,
+ document.getElementById('app')
+)
+```
+### 类组件
+```javascript
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class Component1 extends React.Component{
+ render(){
+ return name-{this.props.name}
+ }
+}
+
+ReactDOM.render(
+ ,
+ document.getElementById('app')
+)
+```
+### 默认属性(DefaultProps)
+组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
+`getDefalutProps` 这个方法只会被调用一次。
+```javascript
+//es5
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Component1 = React.createClass({
+ getDefaultProps: function(){
+ return {
+ name: 'Tom',
+ age: 20
+ }
+ },
+ render: function(){
+ return (
+
+
姓名：{this.props.name}
+
年龄：{this.props.age}
+
+
姓名：{this.props.name}
+ 年龄：{this.props.age}
+
+ )
+ }
+}
+
+//或者
+Component1.defaultProps = {
+ name: "Sam",
+ age: 22
+}
+
+//使用
+ReactDOM.render(, document.getElementById('div1'));
+```
+
+### 属性的类型规则(propTypes)
+通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 `propTypes` 来设置。
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types'
+
+class Component1 extends React.Component{
+ render(){
+ return (
+
+
姓名：{this.props.name}
+
年龄：{this.props.age}
+
学科：
+
+ {
+ this.props.subjects.map(function(_item){
+ return - {_item}
+ })
+ }
+
+