ubantu 14.04中安装npm+node.js+react antd

今天折腾了半天，各种安装问题，最终还是装上了：

1.安装npm

$ sudo apt install npm

2.升级npm

$ sudo npm install npm@latest -g

输入npm -v，即可看到当前npm的版本号，说明安装成功了。

3.安装用于安装nodejs的模块n

$ sudo npm install -g n

4.n模块安装指定版本的nodejs

//安装官方最新版本
$ sudo n latest
//安装官方稳定版本
$ sudo n stable
//安装官方最新LTS版本
$ sudo n lts

输入命令node -v，可看node.js的安装版本。

下面就是跟着antd的官网做了，参考地址：https://ant.design/docs/react/practical-projects-cn，下面加了一个个人经验。

1.安装dev，此版本为实战项目版本

$ npm install dva-cli -g

$ dva -v

0.7.0

大概会等几分钟。。。

2.创建新应用

$ dva new dva-quickstart

此时可home目录下看到这个文件，也需要等几分钟。。。

然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器：

$ cd dva-quickstart
$ npm start

几秒钟后，你会看到以下输出：

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

在浏览器里打开 http://localhost:8000 ，你会看到 dva 的欢迎界面。

3.使用antd

在这里可能会遇到一些问题

首先安装babel-plugin-import

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

 

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

{
  "entry": "src/index.js",
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime",
        ["import", { "libraryName": "antd", "style": "css" }]
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime"
      ]
    }
  }
}

注意：.roadhogrc这个文件在你创建的dva-quickstart中，有些同学可能看不见，因为这是个隐藏文件，显示隐藏文件即可。

4.定义路由

在 routes文件夹中新建Products.js，内容如下：

import React from 'react';

const Products = (props) => (
  <h2>List of Products</h2>
);

export default Products;

添加路由信息到路由表，编辑 router.js :

+ import Products from './routes/Products';
...
+ <Route path="/products" component={Products} />

然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2> 标签。

5.编写组件

新建 components/ProductList.js 文件：

import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button } from 'antd';

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

ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

export default ProductList;

6.定义model

完成 UI 后，现在开始处理数据和逻辑。

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

新建 model models/products.js ：

import dva from 'dva';

export default {
  namespace: 'products',
  state: [],
  reducers: {
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

在index.js（在dva-quickstart文件夹下）中载入：

3. Model

app.model(require('./models/products'));

6.链接model和 component

重新编辑 routes/Products.js，替换为以下内容：

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

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

// export default Products;
export default connect(({ products }) => ({
  products,
}))(Products);

最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：

- const app = dva();
+ const app = dva({
+   initialState: {
+     products: [
+       { name: 'dva', id: 1 },
+       { name: 'antd', id: 2 },
+     ],
+   },
+ });

刷新浏览器，应该能看到以下效果：

说明大功告成。。。