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 },
+     ],
+   },
+ });

刷新瀏覽器，應該能看到以下效果：

說明大功告成。。。