手把手教你全家桶之React(一)

時間 2019-11-11

原文原文鏈接

前言

最近項目用到react,其實前年我就開始接觸react，時光匆匆，一直沒有時間整理下來（太懶啦）！現在再次用到，稱工做間隙，對全家桶作一次總結，項目源碼地址。廢話很少說，上碼。javascript

建立一個文件目錄並初始化package.json

mkdir react-Buckets 
    npm init

填好相關信息如圖

安裝webpack

須要有全局安裝哦，否則一會用webpack編譯時會報錯的
關於裝依賴加入package.json時，加 --save-dev表示開發環境要用的依賴，若是加 -save表示生產環境依然要用的依賴。

npm install --save-dev webpack

手動添加webpack配置文件

touch webpack.dev.config.js

配置文件

var path=require('path');
    module.exports={
        // 入口文件指向src/index.js
        entry:path.join(__dirname,'src/index.js'),
        //打包後的文件到當前目錄下的dist文件夾，名爲bundle.js
        output:{
            path:path.join(__dirname,'./dist'),
            filename:'bundle.js'
        }
    };

mkdir src && cd src
    touch index.js

入口文件寫點內容

document.getElementById('app').innerHTML='This is my React!';

進行一個小測試

webpack --config webpack.dev.config.js

效果如圖
html

此時發現目錄下生成了 dist/bundle.js
咱們在dist目錄下新建 index.html

touch ./dist/index.html

編輯index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

在瀏覽器打開index.html

編譯優化：咱們每次編譯都要輸那麼長串的命令太難記，咱們在package.json中設置命令，簡化它：

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build":"webpack --config webpack.dev.config.js"
    },

運行的時候使用,此處要注意下webpack的版本，若是是4.0則會提示裝webpack-cli模塊

npm run build

安裝與配置babel

平時你們在項目中無論用的vue仍是react,應該大多都開始用ES6或ES7的語法了吧。想必都瞭解若是想讓瀏覽器能夠直接識別，基本都會選用babel插件進行編譯轉換。下面爲你們一一介紹：vue

babel-core 調用Babel的API進行轉碼使用
babel-loader 容許使用babel和webpack將文件轉化成JavaScript
babel-preset-es2015 將ES6解析成ES5
babel-preset-react 解析JSX語法
babel-preset-stage-0 解析ES7提案
那麼先統一安裝下

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

安裝好後，添加配置文件java

touch .babelrc

打開文件，對babel進行配置,注：此處stage-0是包含stage-1,stage-2,stage-3react

{
        "presets":[
            "es2015",
            "react",
            "stage-0"
        ],
        "plugins":[]
    }

在webpack配置中加入babel,修改webpack.dev.config.js
在配置babel-loader模塊時，將cacheDirectory=true是爲了緩存編譯結果，優化下次編譯的。

modle:{
        rules:[{
            test:/\.js$/,
            use:['babel-loader?cacheDirectory=true'],
            include:path.join(__dirname,'src')
        }]
    }

配置好了後，對babel進行測試，修改src/index.js

//使用ES6的箭頭函數
var babeltest=()=>
    console.log('This is Babel Test!');
babeltest();

安裝與配置react

安裝

npm install --save react react-dom

頁面中引入src/index.js

import React from 'react';
    import ReactDom from 'react-dom';
    ReactDom.render(
        <div>First React!</div>,
        document.getElementById('app')
    )

自定義一個組件,建好目錄，咱們把組件放入src/components中

cd src
    mkdir components && cd components
    mkdir Hello && cd Hello
    touch Hello.js

進入Hello.js

import React, {Component} from 'react';
export default class Hello extends Component{
    render(){
        return(
            <div>Hello React!</div>
        )
    }
}

引用Hello.js,進入src/index.js

import React from 'react';
    import ReactDom from 'react-dom';
    import Hello from './components/Hello/Hello';
    ReactDom.render(
        <Hello/>,
        document.getElementById('app');
    )

路由配置react-router

npm install --save react-router-dom
    cd src
    mkdir router && touch router/router.js

打開router.js,配置home和about頁面

import React from 'react';
    import {BrowserRoter as Router,Route,Swith,Link} from 'react-router-dom';
    import Home from '../pages/Home/Home';
    import Page1 from '../pages/About/About';

    const getRouter=()=>(
        <Router>
            <div>
                <ul>
                    <li><Link to="/">首頁</Link></li> 
                    <li><Link to="/about">About</Link></li> 
                </ul>
                <Switch>
                    <Route exact path="/" componen={Home} />
                    <Route path="/about" component={About}/>
                </Switch>
            </div>
        </Router>
    );
    export default getRouter;

cd src
mkdir pages && cd pages
mkdir Home && touch Home/Home.js
mkdet About && touch About/About.js

打開Home.js,定義內容

import React,{Component} from 'react';
    export default class Home extends Component{
        render(){
            return(
                <div>
                    <h1>歡迎來到個人網站</h1>
                    <p>這是一個首頁</p>
                </div>
            )
        }
}

打開About.js,定義內容

import React,{Component} from 'react';
    export default class About extends Component{
        render(){
            return(
                <div>
                    <h2>關於咱們</h2>
                    <p>自定義react全家桶</p>
                </div>
            )
        }
    }

在入口文件src/index.js，引入Router

import React from 'react';
    import ReactDom from 'react-dom';
    import getRouter from './router/router';
    ReactDom.render(
        getRouter(),
        document.getElementById('app')
    )

編譯下，效果如圖

npm run build

咱們發現頁面是出來了，可是點擊切換不了路由，緣由是由於咱們須要配置一個web服務器來指向index.html，在這裏咱們來配置一個webpack-dev-server。webpack

web服務器配置 webpack-dev-server

webpack-dev-server是咱們作先後端分離時，常會用到的依賴，它是一個小型的靜態文件服務器，能夠爲webpack打包後生成的文件提供web服務器功能。git

安裝,這個和webpack同樣，要有全局安裝才行。

npm install webpack-dev-server@2 --save-dev

修改配置文件webpack.dev.config.js

devServer:{
        //將服務器根目錄指向打包後的dist文件，默認是指向項目的根目錄
        contentBase:path.join(__dirname,'./dist');
    }

測試

webpack-dev-server --config webpack.dev.config.js

打開http://localhost:8080
github

8080是默認端口，可更改配置。一樣，咱們把編譯命令優化下：web

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.dev.config.js",
        "start": "webpack-dev-server --config webpack.dev.config.js --color --progress"
    },

小貼示：能夠試試打開瀏覽器後，去刪除dist/bundle.js哦，是否是頁面依然能夠打開呢，由於webpack-dev-server編譯後會緩存在內存中！

附webpack-dev-server 基本配置

color : 打印日誌爲彩色
progress : 日誌顯示進度
historyApiFallback : 值爲Boolean，設爲true時，做意404的請求路徑，會指向index.html
host : 默認爲loaclhost，能夠設爲IP地址，局域網內用其它設備IP訪問
port : 端口號，默認爲8080
proxy : 代理，好比後端交互的服務器地址爲localhost:9000,設置以下

proxy:{
        "/api":"htpp://localhost:9000"
    }

未完待續 ^_^

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。