【react实战·菜鸟版】1. 用dva + antd 写一个todolist

在新公司实习，面试的java开发，结果让先搞一波react（群里有个ios开发让写js的，已经懵逼的无以复加了，哈哈哈哈）。。所以只能硬着头皮学了，学了两天，感觉中文资料不是很多，而且大多数资料要么一点都不适合初学者，要么就已经过时了。感觉很苦恼，下午强行写了一个demo，总结一下分享给大家。

先看看要做成什么样子：

界面不好看我知道。。。

环境搭建

本文使用 dva + antd 做开发，别问我为什么，公司要用。。

1.安装nodejs。

打开这篇文章的应该都已经装好了，我就不多说了。

2.安装dva-cli

npm install dva-cli -g

dva ： https://github.com/dvajs/dva

3.创建新应用

dva new todo-list

应该会自动执行npm start的，如果没有就自己执行一下。之后启动项目，访问 http://localhost:8000，看到dva欢迎页面，证明创建成功

4.使用 antd

通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的

npm install antd babel-plugin-import --save

编辑 .roadhogrc，使 babel-plugin-import 插件生效。

"extraBabelPlugins": [
    "transform-runtime",
    ["import", { "libraryName": "antd", "style": "css" }]
],

antd: https://ant.design

5.定义路由，使用 dva-cli 创建。

dva g route List

在routes目录下自动创建了List.js 和 List.css，并且在router.js中添加了路由信息。

访问http://localhost:8000/#/List 可以看到List.js自动生成的模板。

编辑List.js：

import React from 'react';
import { connect } from 'dva';
import List from '../components/List';
import Add from '../components/Add';

const Lists = ({ dispatch, lists, inputs }) => {
  function handleDelete(id) {
    dispatch({
      type: 'lists/delete',
      payload: id,
    });
  }
  function handleAdd() {
    dispatch({
      type: 'lists/add',
      payload: inputs.input,
    });
  }

  function handelChange(e) {
    dispatch({
      type: 'inputs/change',
      payload: e.target.value
    })
  }
  return (
    <div>
      <Add onAdd={handleAdd} onChange={handelChange} input={inputs.input}/>
      <br/>
      <hr/>
      <h2>List of Products</h2>
      <br/>
      <List onDelete={handleDelete} lists={lists} />
    </div>
  );
};

// export default Lists;
export default connect(({ inputs, lists }) => ({
  inputs, lists,
}))(Lists);

我们使用了两个模板：List和Add，我们来创建一下。

6.创建模板

在component下新建 Add.js 和 List.js。

Add.js:

/**
 * Created by chengfan on 2017/5/24.
 */
import React from 'react'
import PropTypes from 'prop-types';
import { Input, Icon, Button } from 'antd'


const Add = ({ onAdd, onChange, input }) => {
  return (
    <div>
      <Input
        placeholder="Enter your userName"
        prefix={<Icon type="user" />}
        value={input}
        onChange={onChange}
      />
      <Button type="primary" onClick={ onAdd }>添加</Button>
    </div>
  )
};

Add.propTypes = {
  onAdd: PropTypes.func.isRequired,
  input: PropTypes.string.isRequired,
};

export default Add;

List.js

/**
 * Created by chengfan on 2017/5/23.
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';

const List = ({ onDelete, lists }) => {
  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
    },
    {
      title: 'Name',
      dataIndex: 'name',
    }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={lists}
      columns={columns}
      pagination = {{ pageSize: 6}}
    />
  );
};

List.propTypes = {
  onDelete: PropTypes.func.isRequired,
  lists: PropTypes.array.isRequired,
};

export default List;

接下来创建相应的model

7.创建model，使用 dva-cli 创建

dva g model List
dva g model Add

使用 cli 创建的 model 会自动在 index.js 里绑定

models/list.js:

export default {
  namespace: 'lists',
  state: [],
  reducers: {
    add(state, { payload: name }){
      let id = state.reduce( (previous,current) => previous.id > current.id ? previous : current).id;
      id++;
      return [...state, { name, id}];
    },
    delete(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

models/add.js

export default {
  namespace: 'inputs',
  state: {
    input: 'name',
  },
  reducers: {
    change(state, { payload: name }){
      return  {input: name}
    },
  },
};

8.在index.js里放一些初始数据

index.js

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva({
  initialState: {
    lists: [
      { name: 'dva', id: 1 },
      { name: 'antd', id: 2 },
    ]
  },
});

app.model(require('./models/list'));
app.model(require('./models/add'));

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example'));

// 4. Router
app.router(require('./router'));

// 5. Start
app.start('#root');

9.完成，测试

启动项目，访问http://localhost:8000/#/list，可以看到一开始展示的效果

界面不是很美观，但是基本功能已经有了。代码虽然不够优雅，但是通过写这个demo 让我对 react 的理解更深了一些。

文章是流水账的形式，只是把代码贴了出来，没有详细的讲解，因为我自己也是初学者，怕讲错了。。。如果需要讲解的话，请给我留言，我再补上，最近一直忙着学习，所以码字的时间就少了。

代码可以到github上取。新建的账号，以前的太乱了。。如果对你有帮助，可以点一波star~

github:
https://github.com/CFshuming/react-demo-gather/tree/master/higher-demo/dva-antd/todo-list