摘要：在装载组件之前调用会组件的构造函数。当实现子类的构造函数时，应该在任何其他语句之前调用设置初始状态绑定键盘回车事件，添加新任务修改状态值，每次修改以后，自动调用方法，再次渲染组件。可以通过直接安装到项目中，使用或进行引用。

首先我们看一下我们完成后的最终形态：TodoMvc：

学习必要条件：略懂node.js，略懂ES6，然后你的电脑必须安装有较新版本node，没有的同学赶紧安装。
好了，废话不多说，直接开始。

第一部分源码：todoMvc-1step

Webpack 是当下最热门的前端资源模块化管理和打包工具。详细见官网

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。但通常我们会将 Webpack 以及相关依赖以这种方式安装，如下：

# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev
# 安装react.js依赖（i是install的简写，-S是--save的简写）
$ npm i react react-dom -S

剩余的依赖组件参照我源码中的package.json的依赖添加就好。最终，我们得到的package.json应该如下图：确保红框中的内容一样即可。

现在我们已经安装好了依赖，下面我们需要先把项目的目录建好：

.
├── node_modules  #  npm install 安装的东西都跑着里面来了
├── src  
    ├── components
        ├── app.js  # react组件
    ├── styles
        ├── main.styl  # stylus文件（类似于sass）
    ├── entry.js  #  入口js文件
├── index.html  # 入口页面
├── package.json  #  项目描述文件（内有相关依赖）
└── webpack.config.js # webpack配置文件

然后我们在webpack.config.js中添加配置：

module.exports = {
  entry: [
    "./src/entry.js"
  ],
  output: {
    path: "./out/",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /.js[x]?$/, loader: "babel-loader?presets[]=es2015&presets[]=react", include: /src/},
      { test: /.css$/, loader: "style!css"},
      { test: /.styl$/, loader: "style-loader!css-loader!stylus-loader"},
      { test: /.(png|jpg)$/, loader: "url?limit=8192"}
    ]
  }
}

配置文件将我们的入口文件entry.js打包输出到 ./out/bundle.js，我们直接在页面index.html中引入bundle.js就好了。

不懂得话可以参考webpack的文档：webpack-usage 和 webpack-loader。关于/src目录下的文件内容可以直接到源码中查看。然后就可以小试牛刀啦，在终端中输入：

    $ webpack

然后我们看到我们的目录下多了个./out/bundle.js文件，然后我们在浏览器打开目录下的index.html文件可以看到内容并alert("success")那么恭喜你，第一步圆满完成！

todoMvc-2step源码
todoMvc-2step演示
上一章主要说了下react+webpack的环境搭建，这一章主要讲一下如何双向绑定。对vue和angular略有了解的都知道，这两个框架都是支持双向绑定的，而react是单向绑定的，知乎有一篇关于单向绑定和双向绑定可以拓展一下：单向数据绑定和双向数据绑定的优缺点，适合什么场景。下面分析如何具体实现：
进入我们的app.js文件，在之前我们搭建环境的时候已经安装了react相关的依赖以及babel编译工具，所以我们可以直接在这里使用ES6、JSX语法。

import React from "react"
import ReactDOM from "react-dom"

其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能。

先介绍react三个比较重要的知识点：
1.ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。举个例子：

ReactDOM.render(
        
Hello, world!
,
        document.getElementById("example")
);

上面代码将一个 h1 标题，插入 example 节点。
2.JSX 语法
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，上面的

Hello, world!

//es5写法
var HelloMessage = React.createClass({
    render: function() {
      return 
Hello React
;
  }
});
//es6写法
Class HelloMessage extends React.Component {
  render() {
    return 
Hello, React;
  }
}

当然，这里的HelloMessage我们也可以当做HTML标签用ReactDOM.render()渲染出来。

app.js:

class App extends React.Component { //定义组件，继承父类
  constructor() {//constructor 是和 class 一起用来创建和初始化对象的特殊方法。
    super()//在装载组件(mounting)之前调用会React组件的构造函数。当实现React.Component子类的构造函数时，应该在任何其他语句之前调用super(props)
    this.state = {//设置初始状态
      todos: []
    }
  }
  // 绑定键盘回车事件，添加新任务
  handlerKeyUp(e) {
    if(e.keyCode == 13) {
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = "";
      this.state.todos.push(newTodoItem)
      this.setState({todos: this.state.todos});  //修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
    }
  }
  render(){
    return (
      

        
        

          {this.state.todos.map((todo,index) => {{
            return (
                
{todo.text}
//Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
            )
          }})}
        
      
    )
  }
}
ReactDOM.render(,document.getElementById("app"))

运行

$ webpack

然后打开index.html，如果可以在input输入，按下回车可以在下方生成list

那么恭喜你，双向绑定功能完成！

todoMvc-3step源码
todoMvc-3step演示
上一章主要介绍了下React如何进行双向绑定以及如何生成一个组件，我们第三步的目标就是需要把之前做的内容抽象出更细的组件，这样便于解耦，各个组件各司其职，互不干扰。
先看下抽象后src/components下的目录

先看下我们的app.js修改过后的内容：

import React from "react"
import ReactDOM from "react-dom"
import TodoHeader from "./TodoHeader"  // 引入TodoHeader组件
import TodoMain from "./TodoMain"  // 引入TodoMain组件

class App extends React.Component { // 定义组件，继承父类
  constructor() {
    super()
    this.state = {
      todos: []
    }
  }
  addTodo(item) { // 新增了添加todo事项的方法
    this.state.todos.push(item)
    this.setState({todos: this.state.todos});  //设置状态
  }
  render(){
    return (
      

        // 将原内容写在组件中并引入进行渲染
        // 把addTodo方法传递到TodoHeader组件中，bind(this)是为了把该React实例绑定到this上
        
        // 把 state.todos 传入到TodoMain 中
        
      
    )
  }
}

ReactDOM.render(,document.getElementById("app"))

TodoHeader:

import React from "react"

class TodoHeader extends React.Component {
  // 绑定键盘回车事件，添加新任务
  handlerKeyUp(e) {
    if(e.keyCode == 13) { // enter键的 keyCode 为13
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = "";
      this.props.addTodo(newTodoItem) // 通过 this.props 来调用父组件传递过来的addTodo方法
    }
  }
  render(){
    return (
        

          
        
    )
  }
}
export default TodoHeader // 将TodoHeader导出，否则父组件无法导入

TodoMain修改后内容:

import React from "react"
import TodoItem from "./TodoItem"

class TodoMain extends React.Component {
  render(){
    if(this.props.todos.length == 0) {
      return (
        
恭喜您，目前没有待办任务
      )
    } else {
      return (
        

          {
            this.props.todos.map((todo,index) => {
              //{...this.props} 用来传递TodoMain的todos属性和delete、change方法。
              return 
            })
          }
        
      )
    }
  }
}
export default TodoMain

TodoItem：

import React from "react"

class TodoItem extends React.Component {
  render() {
    let className = this.props.isDone?"task-done":""
    return (
      

        
          
          {this.props.text}
        
      
    )
  }
}

export default TodoItem

这一步时webpack先编译,然后打开index.html，如果页面像下图这样的odoMvc-3step演示，那就说明成功了。

做到这里应该对react组件组件化的有个大概的了解了。新手们基本可以对着源码按照这种思路继续做下去。以完善【删除】、【清除已完成】、【未完成数量】等功能了，由于代码类似，故不做赘述了，不太清楚的地方可以参考源码。

todoMvc-4step源码
todoMvc-4step演示

这一章主要以【删除】键为例讲一下如何使用以 React 封装了一套 Ant Design 的组件库：

推荐使用 npm 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
可以通过 npm 直接安装到项目中，使用 import 或 require 进行引用。

    
$ npm install antd --save

可以通过以下的写法来按需加载组件。

import Button from "antd/lib/button";
import "antd/lib/button/style"; // 或者 antd/lib/button/style/css 加载 css 文件

但我推荐使用更简便的写法：
首先需要安装babel-plugin-import 依赖

$ npm install babel-plugin-import --save-dev

然后在我们的根目录下新建.babelrc：

{
  "plugins": [["import", {"libraryName": "antd", "style": "css"}]] //import js and css modularly
}

这时我们需要什么UI组件，即可如下这么写以达到按需加载js和css：

import { Button } from "antd";

由于Antd组件已经油React封装好了，用法和原生html标签没差：

删除

剩余的样式我们就可以对着antd components的demo来开发。

todoMvc-5step源码
todoMvc-5step演示

这一章主要将上一章已经成型的TodoMvc增加【注册】、【登陆】、【数据储存】的功能，这里我们把数据保存到leancloud。

你需要去 https://leancloud.cn 创建一个账户。
创建成功后，你需要验证你的邮箱，否则无法创建应用。

如下图操作：

创建成功后就放在那里，因为接下来我们要按照 LeanCloud 的「JavaScript SDK 文档」来开发登录、注册功能。

登陆和注册的页面同样也以组件的形式多带带抽离出来，样式如图：

组件Login.js代码如下：

import React from "react"
import { Form, Icon, Input, Button } from "antd";

const FormItem = Form.Item;

const Login = Form.create()(React.createClass({
  handleSubmit(e) {  // 提交操作
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.loginOrSignUp(values)
      }
    });
  },
  render() {
    const { getFieldDecorator } = this.props.form;
    let text = this.props.value == 1 ?"注册":"登陆" // 判断“登陆”或者注册功能
    return (
        
 // antdUI的表单
          
            {getFieldDecorator("userName", {
              rules: [{ required: true, message: "Please input your username!" }],
            })(
                } placeholder="Username" />
            )}
          
          
            {getFieldDecorator("password", {
              rules: [{ required: true, message: "Please input your Password!" }], // 必须填写项
            })(
                } type="password" placeholder="Password" />
            )}
          
          
            
              {text}
            
          
        
    );
  },
}));
export default Login

在app.js中做判断，如果已登录，则显示ToDo应用界面，否则显示登陆界面：

render(){
  if (!this.state.currentUser){ // 判断是否已经登录
    const RadioGroup = Radio.Group;
    return (
        

          
React-Todos
          
            注册
            登入
          
          
        
    )
  } else {
    let info = {
      isAllChecked: this.state.isAllChecked,
      todoCount: this.state.todos.length || 0,
      todoDoneCount: (this.state.todos && this.state.todos.filter((todo) => todo.isDone)).length || 0
    }
    return (
        

          
          
          
        
    )
  }
}

1.安装 LeanCloud SDK
https://leancloud.cn/docs/sdk_setup-js.html

$ npm install leancloud-storage --save

2.初始化
https://leancloud.cn/docs/sdk_setup-js.html#初始化
app.js:

import AV from "leancloud-storage"

const appId = "XXXXXXXXXXXXXXXXXXXXXX" //这里的appId就是刚才我们创建的应用的Id，每个人都不一样
const appKey = "XXXXXXXXXXXXXXXXXXX";

AV.init({ appId, appKey });

3.写入注册登陆的方法
我们先要通读一下 LeanCloud 关于注册的文档，然后按照里面的demo去做修改。
app.js:

//登陆或者注册
loginOrSignUp(values){
  //判断是登陆还是注册
  if (this.state.value === 1){
    let user = new AV.User();
    user.setUsername(values.userName);
    user.setPassword(values.password);
    user.signUp().then((loginedUser) => {
      this.state.currentUser = this.getCurrentUser()
      this.setState({currentUser: this.state.currentUser})
    }, function (error) {
      alert("注册失败")
    })
  } else if (this.state.value === 2){
    console.log("执行登陆")
    AV.User.logIn(values.userName, values.password).then((loginedUser) => {
      this.state.currentUser = this.getCurrentUser()
      this.setState({currentUser: this.state.currentUser})
      this.fetchTodos()
    }, function (error) {
      alert("登陆失败")
    });
  }
}

下面还需要去做【登出】、【保存Todo】等功能。这里我就不贴出来代码了，可以直接去github上面去看我的app.js源码。
至此，我们React+Webpack+Antd 的一个TodoMVC的思路就讲解完毕了。希望能帮助小伙伴。