webpack+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 (
            
  
  
  

 

  
  //類名使用className 
 
    
     
       
       
     點擊按鈕能夠看到進度條的變化  

 
        )
    }
}
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((
    
  
  
  

 
  
  //路由容器 
 
  
    //一級路由，路徑爲"/"時，加載「Sider」組件 
   
     //默認路由，加載「Sider」和「myIntroduce」組件 
    
      //二級路由 
     
       //二級路由 
      
        //二級路由 
       
         //二級路由 
        
          //二級路由 
         
        
       
      
     
    
   

 
), document.getElementById('app'));複製代碼

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

ES6語法

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

antd的使用

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

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

import { Progress, Button } from 'antd';    //引入antd
const ButtonGroup = Button.Group;   //按鈕組
......
 //使用進度條組件，percent是組件提供的配置項  
    
      
      
    ......複製代碼

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

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

總結

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

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