摘要：如果你不想這樣每次改完代碼都要手動(dòng)編譯，而且自己?jiǎn)?dòng)，那么就要用到這個(gè)玩意。

通過(guò)配置webpack-dev-server啟動(dòng)一個(gè)webserver，自動(dòng)編譯，自動(dòng)刷新瀏覽器的功能，我們開(kāi)啟React基礎(chǔ)速過(guò)

接上一篇：構(gòu)建React開(kāi)發(fā)環(huán)境

使用webpack-dev-server

按照上篇文章構(gòu)建好React開(kāi)發(fā)環(huán)境后，我們發(fā)現(xiàn)每次寫(xiě)完代碼還需要手動(dòng)編譯，并且需要自己?jiǎn)?dòng)一個(gè)webserver才可以在瀏覽器預(yù)覽效果。

如果你不想這樣每次改完代碼都要手動(dòng)編譯，而且自己?jiǎn)?dòng)webserver，那么就要用到webpack-dev-server這個(gè)玩意。

注意，這玩意就是開(kāi)發(fā)時(shí)用用的，不要用于生產(chǎn)環(huán)境！

這玩意還有一個(gè)好處，是在改完代碼后，自動(dòng)刷新瀏覽器，下面動(dòng)手加上這貨吧

使用yarn安裝webpack-dev-server 到開(kāi)發(fā)依賴(lài)中

yarn add -D webpack-dev-server

添加webpack配置，配置devServer

vi webpack.config.js

"use strict";

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
    mode: "development",
    entry: {
        app: "./src/js/index"
    },
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "build")
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/pages/index.html"
        })
    ],
    module: {
        rules: [
            { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // 過(guò)濾
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000
    }
};

module.exports = config;

在package.json中添加一個(gè)scripts

"dev": "webpack-dev-server"

啟動(dòng)webpack-dev-server

yarn run dev

之后就可以自動(dòng)編譯并啟動(dòng)一個(gè)webserver，用瀏覽器訪(fǎng)問(wèn)http://localhost:9000

React的元素

React的元素必須要有一個(gè)根元素包裹起來(lái)，如：

"use strict";

import React from "react";
import ReactDOM from "react-dom";

let me = 
編程故事

ReactDOM.render(
    me,        // 使用元素
    document.getElementById("root")
);

元素里面可以包含js的表達(dá)式，表達(dá)式使用大括號(hào){}包起來(lái)

let me = 
編程故事{alert("編程故事")}

React的組件

React的組件使用ES2015中的Class方式定義

"use strict";

import React from "react";
import ReactDOM from "react-dom";

// 組件可以外部定義然后在使用的地方在引入
class Me extends React.Component {
    render() {
        return 
dongjun{(function(){alert("編程故事")})()}
    }
}

ReactDOM.render(
    ,
    document.getElementById("root")
);

React組件的props傳遞

父組件給子組件傳遞數(shù)據(jù)，是通過(guò)給子組件上定義屬性，在子組件中通過(guò)this.props獲取

傳遞多個(gè)屬性：

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class Me extends React.Component {
    render() {
        return 
{this.props.site} - {this.props.sologen} - {this.props.url}
    }
}

ReactDOM.render(
    ,
    document.getElementById("root")
);

也可以傳遞一個(gè)對(duì)象給子組件的屬性，在子組件也要通過(guò)對(duì)象的方式去獲取

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class Me extends React.Component {
    render() {
        return 
{this.props.site.name} - {this.props.site.sologen} - {this.props.site.url}
    }
}

const map = {
    name: "編程故事",
    sologen: "我的故事,也許也是你的故事",
    url: "https://www.mi#"
};

ReactDOM.render(
    ,
    document.getElementById("root")
);

還可以使用ES2015中的解構(gòu)賦值

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class Me extends React.Component {
    render() {
        return 
{this.props.name} - {this.props.sologen} - {this.props.url}
    }
}

const map = {
    name: "編程故事",
    sologen: "我的故事,也許也是你的故事",
    url: "https://www.mi#"
};

ReactDOM.render(
    ,
    document.getElementById("root")
);

React的事件

在組件中定義事件處理方法，在組件的render()方法中定義事件監(jiān)聽(tīng)

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class Me extends React.Component {

    showMe() {
        alert("編程故事");
    }

    render() {
        return 

            
{this.props.name} - {this.props.sologen} - {this.props.url}
            
        
    }
}

const map = {
    name: "編程故事",
    sologen: "我的故事,也許也是你的故事",
    url: "https://www.mi#"
};

ReactDOM.render(
    ,
    document.getElementById("root")
);

還可以使用箭頭函數(shù)直接在事件監(jiān)聽(tīng)中處理

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class Me extends React.Component {

    showMe() {
        alert("編程故事");
    }

    render() {
        return 

            
{this.props.name} - {this.props.sologen} - {this.props.url}
             {
                alert("編程故事")
            }} type="button" value="按鈕"/>
        
    }
}

const map = {
    name: "編程故事",
    sologen: "我的故事,也許也是你的故事",
    url: "https://www.mi#"
};

ReactDOM.render(
    ,
    document.getElementById("root")
);

父組件傳遞數(shù)組給子組件遍歷

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class Me extends React.Component {
    
    render() {
        return 

            {this.props.data.map((item) => {
                return 
 {
                    alert(item.name)
                }
                }>{item.name} - {item.sologen} - {item.url}
            })}
        
    }
}

const map = [{
    name: "編程故事",
    sologen: "我的故事,也許也是你的故事",
    url: "https://www.mi#"
},{
    name: "246哈",
    sologen: "開(kāi)心很簡(jiǎn)單",
    url: "https://www.246ha.com"
}];

ReactDOM.render(
    ,
    document.getElementById("root")
);

原文鏈接：https://www.mi#/articles...