在新公司實習，面試的java開發，結果讓先搞一波react（群裡有個ios開發讓寫js的，已經懵逼的無以復加了，哈哈哈哈）。。所以只能硬著頭皮學了，學了兩天，感覺中文資料不是很多，而且大多數資料要麼一點都不適合初學者，要麼就已經過時了。感覺很苦惱，下午強行寫了一個demo，總結一下分享給大家。

先看看要做成什麼樣子：

介面不好看我知道。。。

環境搭建

本文使用 dva + antd 做開發，別問我為什麼，公司要用。。

1.安裝nodejs。

• 開啟這篇文章的應該都已經裝好了，我就不多說了。

2.安裝dva-cli

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" }]
],

5.定義路由，使用 dva-cli 建立。

• dva g route List

在routes目錄下自動建立了List.js 和 List.css，並且在router.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.完成，測試

介面不是很美觀，但是基本功能已經有了。程式碼雖然不夠優雅，但是通過寫這個demo 讓我對 react 的理解更深了一些。

文章是流水賬的形式，只是把程式碼貼了出來，沒有詳細的講解，因為我自己也是初學者，怕講錯了。。。如果需要講解的話，請給我留言，我再補上，最近一直忙著學習，所以碼字的時間就少了。

程式碼可以到github上取。新建的賬號，以前的太亂了。。如果對你有幫助，可以點一波star~