react-antd螞蟻金服組件實例

React框架已經火了好長一段時間了，再不學就out了！

對React尚未了解的同窗能夠看看我以前的一篇文章，能夠快速簡單的認識一下React。React入門最好的實例－TodoList

本身從開始接觸react一竅不通，到慢慢的似懂非懂，經過各類途徑學習也有一陣了。學習過程當中還會接觸到不少新的東西，好比ES六、 webpack，過程艱辛誰人懂，見坑填坑慢慢來。今天把學習過程過濾了一下，只說項目實際須要用的東西，總結了一套能看到的東西，分享給你們，但願能讓 讀者少踩一些坑！

本文看點

• 實際項目效果：最終你只須要在本地啓一個服務，就能看到運行效果。
• webpack的配置：項目實戰中經常使用的插件和配置方法。
• React用法：React在MVC（模型Model－視圖View－控制器Controller）層面上主要扮演了視圖的做用。咱們能夠學習它在項目中到底該如何使用。
• React-router配置：單頁面應用（SPA）離不開路由，咱們能夠學習在項目中React-router如何配置。
• ES6語法：咱們會用到一些在項目中常見的ES6語法。
• antd的使用：螞蟻金服出的一款基於React的框架，咱們能夠學習如何去使用。

項目效果

項目代碼已經上傳至github，項目代碼github地址。你們把代碼下載下來以後，跟隨如下步驟便可在本地看到效果。

• 首先安裝node環境。

• 全局安裝webpack

  npm install webpack -g 

• 安裝項目依賴

  npm install

• 開發模式，啓動本地服務

  npm run dev

  至這一步成功後，在瀏覽器輸入localhost:8888就能看到以下圖的效果了。

• 在build文件夾下打包

  npm run build

webpack配置

基於React的項目配合webpack來打包管理最合適不過了。可是不學不知道，一學嚇一跳，webpack的學習TM複雜了，各類報錯，各類坑，就是webpack讓我在學習的過程當中一度想要放棄。然而過來人告訴你，堅持就是勝利！

學會怎麼配置webpack，是獨立管理項目的第一步。每一個用webpack管理的項目都有一個webpack.config.js文件，先來看看這個項目的webpack.config.js文件：

'use strict'; var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css單獨打包 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = { devtool: 'eval-source-map', entry: { main: './src/entry.js', //惟一入口文件 vendor: ['react'] //這裏是依賴的庫文件配置，和CommonsChunkPlugin配合使用能夠單獨打包 }, output: { path: './build', //打包後的文件存放的地方 filename: 'main.js', //打包後輸出文件的文件名 publicPath: 'http://localhost:8888/build/' //啓動本地服務後的根目錄 }, module: { loaders: [ { test: /\.js$/, loader: "jsx!babel", include: /src/}, { test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!postcss")}, { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "css!postcss!sass")}, { test: /\.(png|jpg|gif)$/, loader: 'url?limit=819200'} ] }, babel: { presets: ['es2015', 'stage-0', 'react'], plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]] }, postcss: [ require('autoprefixer') //調用autoprefixer插件,css3自動補全 ], devServer: { // contentBase: './src/views' //本地服務器所加載的頁面所在的目錄 port: 8888, colors: true, //終端中輸出結果爲彩色 historyApiFallback: true, //不跳轉 inline: true //實時刷新 }, plugins: [ new ExtractTextPlugin('main.css'), new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }) ] }

一個完整項目的基本webpack配置就是這些了，重要的配置項已經在上述代碼中做了註釋。另外，也能夠深刻學習，推薦看看這篇文章。webpack詳細指南

React用法

React自己真的很是簡單。你能夠把一個頁面分爲不少個組件的組成，而React就是開發這些組件的。因此React其實就是view層，說白了就是html，只不過每一個組件是經過js建立的，每一個組件還有本身的狀態和本身的方法。

React Component（一個組件）提供一個render方法以及其餘可選的生命週期函數、組件相關的事件或方法定義。經常使用API就如下幾個：

• constructor：構造函數

  class component extends React.Component { constructor(props) { super(props); this.state = { color: props.initialColor }; } }

• render：組件返回的dom內容（必須）

• componentWillMount：在render以前自動調用，你能夠在這個方法裏面調用setState改變狀態，而且不會致使額外調用一次render

• componentDidMount：在render以後自動調用，從這裏開始能夠經過this.getDOMNode()獲取到組件的DOM節點

• componentWillUpdate: 組件收到新的state，更新view以前自動調用

• componentDidUpdate: 組件收到新的state，更新view完成以後自動調用

而後回到咱們這個項目實例，拿代碼中的進度條組件（src-components-progress.js）代碼做爲展現：

import React from 'react'; //引入react import { Progress, Button } from 'antd'; //引入antd const ButtonGroup = Button.Group; class myProgress extends React.Component { constructor(props) { super(props) this.state = { //初始化組件的狀態 percent: 0 } } increase() { //自定義函數 let percent = this.state.percent + 10; if (percent > 100) { percent = 100; } this.setState({ percent }); //設置組件的狀態 } decline() { //自定義函數 let percent = this.state.percent - 10; if (percent < 0) { percent = 0; } this.setState({ percent }); } render() { return ( <div className="progress-wrap"> //類名使用className <Progress percent={this.state.percent} />  <Progress type="circle" percent={this.state.percent} /> <ButtonGroup> <Button type="ghost" onClick={this.decline.bind(this)} icon="minus" /> <Button type="ghost" onClick={this.increase.bind(this)} icon="plus" /> </ButtonGroup> <span>點擊按鈕能夠看到進度條的變化</span> </div> ) } } export default myProgress; //導出這個組件（ES6語法）

代碼我已經給出了註釋，不作贅述。

React-router配置

獨立的前端應用離不開路由配置，就像angular框架也有本身的路由同樣。在React項目中使用路由，須要依賴React-Router模塊。咱們直接來看看此項目中的路由配置：

import ReactDom from 'react-dom'; import { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from 'react-router'; ReactDom.render(( <Router history={hashHistory}> //路由容器 <Route path="/" component={Sider}> //一級路由，路徑爲"/"時，加載「Sider」組件 <IndexRoute component={myIntroduce} /> //默認路由，加載「Sider」和「myIntroduce」組件  <Route path="myIntroduce" component={myIntroduce} /> //二級路由 <Route path="myTable" component={myTable} /> //二級路由  <Route path="myForm" component={myForm} /> //二級路由 <Route path="myProgress" component={myProgress} /> //二級路由 <Route path="myCarousel" component={myCarousel} /> //二級路由 </Route> </Router> ), document.getElementById('app'));

React的路由配置其實很簡單，就是把路徑和定義好的組件一一對應起來就行了。上述代碼結合實際運行效果，一看就明白。

ES6語法

我以前寫過一篇關於ES6常見語法的文章，總結ES6經常使用的新特性。
。
另外，上述貼出的代碼中已經出現過不少的ES6語法。ES6的學習就是見多學多的過程，多使用，多總結，天然就會了。

antd的使用

引入安裝antd插件

antd是螞蟻金服推出的一款很棒的react  ui庫。

官方網站：https://ant.design/docs/react/introduce-cn

首先要有react環境

安裝：npm install antd --save

使用：import { 組件名稱 } from 'antd'（好比import { Switch } from 'antd'）

還要引用其樣式：import 'antd/dist/antd.css'

可是這樣直接引用樣式會有一些沒必要要的組件也被引入進來 須要配置webpack進行按需加載

安裝babel-plugin-import

npm install babel-plugin-import --save-dev

配置webpack：

{ 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: "babel-loader", 
                query:
                  {
                    presets:['es2015','react'],
                    plugins: [
                        ["import", {libraryName: "antd", style: "css"}] //按需加載
                    ]
                  },
            },

放在module rules下面

上述配置完畢

直接使用組件

<Switch defaultChecked={false} />

 

antd能夠理解爲是一個基於react的ui組件庫。引入這個庫以後，咱們就能夠直接使用不少現成的組件，好比按鈕、圖標、表單、菜單、導航等等。去antd官網發現更多牛逼的組件。

好比上面已經貼過的進度條組件：

import { Progress, Button } from 'antd'; //引入antd const ButtonGroup = Button.Group; //按鈕組 ...... <Progress percent={this.state.percent} /> //使用進度條組件，percent是組件提供的配置項 <Progress type="circle" percent={this.state.percent} /> <ButtonGroup> <Button type="ghost" onClick={this.decline.bind(this)} icon="minus" />  <Button type="ghost" onClick={this.increase.bind(this)} icon="plus" /> </ButtonGroup> ......

另外，因爲antd組件比較多，因此庫文件比較大，因此咱們在開發的時候能夠按需引入對應的庫。webpack配置須要用到babel-plugin-import模塊。

babel: { presets: ['es2015', 'stage-0', 'react'], plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: 'css' }]] }

總結

上面的項目我已放到了Github上。基於react+antd的項目實例，喜歡的看管麻煩star一下啦！謝謝～

學習的過程枯燥艱辛，可是取得的成果卻使人興奮。因此咱們仍是要不忘初心，不忘學習！