一、react环境配置及安装

1、NodeJs安装

nodejs官网下载安装，检查安装成功的命令 node -v， npm -v

2、使用NPM配置React开发环境

1）npm项目初始化：

 npm init

2）项目依赖包安装：

npm install --save react react-dom babelify babel-preset-reac
npm install --save babel-preset-es2015

3、webpack热加载配置

1）全局安装

npm install -g webpack
npm install -g webpack-dev-server

2）当前项目安装

npm install webpack --save
npm install webpack-dev-server --save

3）初始化配置
根目录下创建文件 webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: __dirname + '/src',
    entry: './js/index.js',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }]
    },
    output: {
        path: __dirname + '/',
        filename: 'bundle.js'       
    }
}

4）打包

webpack   or   webpack --watch

5）项目热加载

方法一：

webpack-dev-server --content-base-src --hot

方法二：package.json文件内添加

"scripts": {
     "start": "webpack-dev-server --inline --content-base ."
  }

运行

webpack-dev-server

确保打包后的文件（如‘bundle.js’）在根目录下。即：你的index.html也就是你的项目入口的html文件里面引用这个bundle.js文件需要直接引用根目录下面的。

4、Chrome React插件

React Developer Tools

5、课程学习思维导图

思维导图.jpg