05月02, 2018

React学习之旅 (08) -- 高阶组件 & webpack配置环境

高阶组件 (HOC)Higher Order Component

其实就是一个函数,函数的参数接收了一个组件,返回一个新的组件。

webpack 配置栗子:

  1. 准备基本的目录结构

    src目录,里面先建立一个index.js文件、

    public目录,里面建立一个index.html文件、

    一个webpack.config.js文件、

    使用 nom init -y 命令生成一个package.json

  2. 下载相关安装包

    babel-core

    babel-loader

    babel-preset-env

    babel-preset-stage-0

    react

    react-dom

    babel-preset-react

    预设一定要配置:1.参数 2. .babelrc(建议)

babelrc文件内容如下:

{
    "presets": [
        'env', 'stage-0', 'react'
    ]
}
  1. webpack相关

    html-webpack-plugin

    webpack-dev-server

    webpack

    webpack-cli

webpack.config.js 文件内容如下:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        entry: './src/index.js'
    },
    output: {
        path: __dirname + '/dist',
        filename:  'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    },

    devServer: {
        contentBase: __dirname + '/dist',
        host: 'localhost',
        port: 8080,
        open: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: './public/index.html'
        })
    ]
}

脚手架: npm i create-react-app -g

用 create-react-app 创建项目

本文链接:http://www.laijianlou.top/post/react-08.html

-- EOF --

Comments