摘要：在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時，應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件，添加新任務修改狀態值，每次修改以后，自動調用方法，再次渲染組件。可以通過直接安裝到項目中，使用或進行引用。

首先我們看一下我們完成后的最終形態：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的思路就講解完畢了。希望能幫助小伙伴。