从无到有构建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