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

今天折騰了半天,各類安裝問題,最終仍是裝上了:css

1.安裝npmnode

$ sudo apt install npm

2.升級npmreact

$ sudo npm install npm@latest -g

輸入npm -v,便可看到當前npm的版本號,說明安裝成功了。npm

3.安裝用於安裝nodejs的模塊n瀏覽器

$ sudo npm install -g n

4.n模塊安裝指定版本的nodejsbash

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

輸入命令node -v,可看node.js的安裝版本。服務器

下面就是跟着antd的官網作了,參考地址:https://ant.design/docs/react/practical-projects-cn,下面加了一個我的經驗。babel

1.安裝dev,此版本爲實戰項目版本antd

$ npm install dva-cli -g app

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

刷新瀏覽器,應該能看到如下效果:

說明大功告成。。。

相關文章
相關標籤/搜索