webpack+react+antd單頁面應用例項

luckykun發表於2019-03-02
WebReact

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

對React還沒有了解的同學可以看看我之前的一篇文章，可以快速簡單的認識一下React。React入門最好的例項－TodoList

自己從開始接觸react一竅不通，到慢慢的似懂非懂，通過各種途徑學習也有一陣了。學習過程中還會接觸到很多新的東西，比如ES6、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就能看到如下圖的效果了。

    webpack+react+antd單頁面應用例項

  • 在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一下啦！謝謝～

學習的過程枯燥艱辛，但是取得的成果卻令人興奮。所以我們還是要不忘初心，不忘學習！

相關文章