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

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

第一部分源码：todoMvc-1step

webpack的配置

1. 介绍：

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

2. 安装：

$ 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应该如下图：确保红框中的内容一样即可。

3. 配置

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

.
├── 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就好了。

<script src="./out/bundle.js"></script>

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

$ webpack

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

React如何双向绑定

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

1. 引入react核心内容

import React from 'react'
import ReactDOM from 'react-dom'

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

2. 生成组件

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

ReactDOM.render(
        <h1>Hello,world!</h1>,document.getElementById('example')
);

上面代码将一个 h1 标题，插入 example 节点。
2.JSX 语法
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX 的语法，它允许 HTML 与 JavaScript 的混写，上面的<h1>Hello,world!</h1>，就是使用了jsx语法。
3.组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。举个

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!