从无到有构建react项目

基础：了解npm（包管理工具）、webpack（打包工具）

1.创建一个空项目文件

图1

2.npm init,生成package.json 文件（package.json中记录了项目用到的依赖包）

图2

在命令行键入npm init 默认一直回车，或输入自定义信息

图3 package.json

3.根据自己代码习惯建立项目内子文件夹

图4 基本目录结构

index.html 为入口html，index.js 为入口js

图5 index.html

index.html中只有一个指明id的div，用作待插入节点

4.下载相关依赖

react-dom、react、react-router(react相关)、babel-loader、babel-core、babel-preset-es2015、babel-preset-react（babel将jsx语法转换成es5）、webpack、webpack-dev-server、html-webpack-plugin（webpack相关）

图6 npm install 相关依赖

图7 package自动记录依赖

5.配置webpack.config.js

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry:'./app/index.jsx',
    output:{
        path: __dirname + "/build",
        filename:"bundle.js"
    },
    resolve:{
        extensions:['.js','.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options:{
                	presets:["react","es2015"]
                }
            }
        ]
    },
    plugins:[
        //html模板插件
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:__dirname+"/app/index.html"
        }),
        //热加载插件
        new webpack.HotModuleReplacementPlugin()

    ],
    devServer:{
        historyApiFallback:true,
        inline:true,
        hot:true
    }
}

6.更新入口文件 index.js

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
    
    
    

     
     dddd
    
    
,
    document.getElementById("root")
)

7.运行项目，对package.json 中的scripts属性进行配置

图8 配置node简写命令

 "start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
    "build": "rd/s/q build && set NODE_ENV=production && webpack --config ./webpack.config.js --progress --colors"

8.在根目录命令行输入相关命令，运行demo。npm run start 启动本地服务

图9 启动本地服务

在浏览器打开 http://localhost:8080

图10

npm run build 打包

图11

这次打包报错，是因为 根目录下没有build文件夹，删除失败，还记得package.json 中scripts对象里的build 键值 首先要删除一个build文件。所以解决方法是我们现在根目录下新建一个build空文件夹。

再次运行 npm run build

图12

打包成功，发现我们项目目录下的build文件夹多了bundle.js 和 index.html

图13

至此，一个简单的react项目就创建成功了，从建立到运行如上所示，之后我们就可以在app中继续编写业务代码了。bravo