摘要：如果你不想这样每次改完代码都要手动编译，而且自己启动，那么就要用到这个玩意。

通过配置webpack-dev-server启动一个webserver，自动编译，自动刷新浏览器的功能，我们开启React基础速过

接上一篇：构建React开发环境

使用webpack-dev-server

按照上篇文章构建好React开发环境后，我们发现每次写完代码还需要手动编译，并且需要自己启动一个webserver才可以在浏览器预览效果。

如果你不想这样每次改完代码都要手动编译，而且自己启动webserver，那么就要用到webpack-dev-server这个玩意。

注意，这玩意就是开发时用用的，不要用于生产环境！

这玩意还有一个好处，是在改完代码后，自动刷新浏览器，下面动手加上这货吧

使用yarn安装webpack-dev-server 到开发依赖中

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"}
        ]
    },
    // 过滤
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000
    }
};

module.exports = config;

在package.json中添加一个scripts

"dev": "webpack-dev-server"

启动webpack-dev-server

yarn run dev

之后就可以自动编译并启动一个webserver，用浏览器访问http://localhost:9000

React的元素

React的元素必须要有一个根元素包裹起来，如：

"use strict";

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

let me = 
编程故事

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

元素里面可以包含js的表达式，表达式使用大括号{}包起来

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传递

父组件给子组件传递数据，是通过给子组件上定义属性，在子组件中通过this.props获取

传递多个属性：

"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")
);

也可以传递一个对象给子组件的属性，在子组件也要通过对象的方式去获取

"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.mi360.cn"
};

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

还可以使用ES2015中的解构赋值

"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.mi360.cn"
};

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

React的事件

在组件中定义事件处理方法，在组件的render()方法中定义事件监听

"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.mi360.cn"
};

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

还可以使用箭头函数直接在事件监听中处理

"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.mi360.cn"
};

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

父组件传递数组给子组件遍历

"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.mi360.cn"
},{
    name: "246哈",
    sologen: "开心很简单",
    url: "https://www.246ha.com"
}];

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

原文链接：https://www.mi360.cn/articles...