React 相关

React在线编译

React与webpack基础版

初始化命令及安装

npm init -y //初始化项目，快速构建package.json文件

配置package.json脚本命令及要安装的包

  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

"Dependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
}，
"devDependencies": {
  "eslint": "^5.16.0",
  "babel-eslint": "^10.0.1",
  "eslint-config-airbnb": "^17.1.0",
  "eslint-config-airbnb-base": "^13.1.0",
  "eslint-loader": "^2.1.2",
  "eslint-plugin-import": "^2.17.3",
  "eslint-plugin-jsx-a11y": "^6.2.1", 
  "eslint-plugin-react": "^7.13.0"
}

编译器配置文件.babelrc

{
    "presets": [
        [
            "@babel/preset-env"
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

.eslintrc.js配置

module.exports = {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "env": {
        "browser": true,
        "node": true
    },
    "rules": {
        "indent": ["error", 4]
    }
};

配置webpack文件 webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ]，
    devServer: {
        contentBase: require('path').join(__dirname, "dist"),
        compress: true,
        port: 8088,
        host: "localhost",
    }
};

./src/index.js文件

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

ReactDOM.render(
    
这里是一个简单的示例页面
,
    document.getElementById('root')
);

./src/index.html文件

Redux

redux是用于前端数据管理的包，避免因项目过大前端数据无法管理的问题，同时通过单项数据流管理前端的数据状态。
用户通过界面组件 触发ActionCreator，携带Store中的旧State与Action 流向Reducer,Reducer返回新的state，并更新界面。