Windows下react环境的配置与项目的新建

在Windows下配置react需要进行如下几步：

1. nodejs的安装

下载并安装nodejs（为使用其包管理工具npm）
安装完成后在命令行输入如下指令：

node -v

npm -v

若安装成功，则显示其版本信息

2.配置npm淘宝镜像

在命令行输入如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，在命令行输入如下命令

cnpm -v

若安装成功，则显示其版本信息

3.新建React项目

• 新建项目文件夹，如名为 react_app， 在命令行下进入该文件夹
  输入如下命令初始化

cnpm init

然后根据提示输入相应的信息

• 安装必要组件

cnpm install --save react react-dom babelify babel-preset-react

cnpm install babel-preset-es2015 --save

4.webpack热加载配置

开始前，先在根目录下建立一个存放源代码的文件夹 src>js，并在其中新建入口文件 index.js，同时在根目录下新建 index.html文件

1）新建webpack.config.js
输入如下代码

//引用相关webpack包var webpack = require('webpack');var path = require('path');module.exports = {    //定义入口文件    context: __dirname + '/src',    entry: "./js/index.js",    module: {        loaders: [            //解析js文件            {                test: /\.js?$/,                exclude: /(node_modules)/,                loader: "babel-loader",                query: {                    presets: ['react', 'es2015'],                }            },            //css 的 loader            {                test: /\.css$/,                loader: 'style-loader!css-loader'            },        ]    },    output: {        path: __dirname,        filename: "bundle.js"    },    devServer:{        inline: true,        port: 8099    }};

2）安装webpack

• 全局安装webpack -g 表示全局安装

cnpm install -g webpack

• 然后是开其发的服务器

cnpm install -g webpack-dev-server

• 然后在目录文件夹下安装 去掉 -g

cnpm install webpack-dev-server --save

• 同理，在目录文件夹下安装webpack

cnpm install webpack --save

• 为使项目运行起来，还需要安装如下组件

cnpm install babel-loadercnpm install babel-core --savecnpm install style-loader --save-devcnpm install --save-dev css-loader

在打包上传时，可将node_modules文件夹删除
需要安装时，使用如下命令
cnpm install

附：
已配置 webpack.json

{  "name": "8-03",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "dependencies": {    "babel-core": "^6.26.0",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "babelify": "^8.0.0",    "react": "^16.1.1",    "react-dom": "^16.1.1",    "webpack": "^3.8.1",    "webpack-dev-server": "^2.9.4"  },  "devDependencies": {    "css-loader": "^0.28.7",    "style-loader": "^0.19.0"  }}