如何搭建一个React项目

1. 初始化项目 npm init
   得到package.json文件
2. 安装React
   • 在开发环境中使用，添加以下代码
     

• 在线上环境中使用，添加以下代码
  
• 下载到本地使用
  npm install --save [email protected] [email protected]
  OR
  npm install react react-dom --save

3. 前端 Javascript 打包工具
   npm install webpack-dev-server webpack --save-dev
   其中，webpack的全局安装
   npm install webpack -g
4. 解析 JSX 语法和 Es6 语法
   npm install --save-dev babelify
   OR
   npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-polyfill --save-dev
5. 前端工作流工具 Gulp
   npm install --save-dev gulp
   OR（如果暂时不使用less可以先不配置less）
   npm install gulpjs/gulp-cli -g
npm install gulpjs/gulp.git#4.0 --save-dev
npm install gulp-util del gulp-rename gulp-less gulp-connect [email protected] --save-dev
6. 添加loader将任意资源转化为 javascript 模块
   npm install xx-loader --save-dev
7. 创建gupfile.js文件，全局定义打包源文件和打包目标相关的配置
   (暂时用webpack-dev-server即可)

var gulp = require("gulp");
var gutil = require("gulp-util");
var src = {
     // html 文件
     html: "src/html/*.html",                          
     // vendor 目录和 bower_components
     vendor: ["vendor/**/*", "bower_components/**/*"], 
     // style 目录下所有 xx/index.less
     style: "src/style/*/index.less",                 
     // 图片等应用资源
     assets: "assets/**/*"                             
};
var dist = {
     root: "dist/",
     html: "dist/",
     style: "dist/style",
     vendor: "dist/vendor",
     assets: "dist/assets"
};
var bin = {
     root: "bin/",
     html: "bin/",
     style: "bin/style",
     vendor: "bin/vendor",
     assets: "bin/assets"
};

8. 创建webpack.config.js文件进行配置

var webpack = require('webpack')
var path = require("path")
module.exports = {
    //打包入口文件地址 String | Array | Object
    entry:{
        //在配置文件中配置loader，避免显示的调用 require 增加模块的耦合度
        index:['./src/js/index.js','./src/css/index.css'],
        //vendor实现业务代码和第三方代码的分离
        vendor:[
            'react',
            'react-dom'
        ]
    },
    //编译后js文件的输出地址，即html引用的文件
    //如果打包目标不止一个，可用Array[name].js表示filename
    output:{
        path:path.resolve(__dirname,'./dist/'), 
        filename:'index.js',
        //打包的目标目录相对于启动目录的路径
        publicPath:'/dist'
    },
    //添加babel loader配置
    //test : String, loader : String | Array
    module:{
        loaders:[{
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'babel-loader',
            query:{
                presets:['es2015', 'stage-0', 'react']
            }
        },
        //添加CSS Loader
        {
            test:/\.css$/,
            loader:"style-loader!css-loader"
        }]
    },
    //配置plugin，分割 vendor 代码和应用业务代码
    //html文件也要引用vendor.bundle.js
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({name:"vendor", filename:"vendor.bundle.js",Infinity}),
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        //热加载，不刷新浏览器的条件下应用最新的代码更新
        hot:true,
        //inline模式，打包完成后自动更新页面
        inline:true
    }
}

9. 启动 webpack-dev-server
   webpack-dev-server
   其中，--content-base ./表示当前目录是server的根目录
   功能：代码监控，自动调用webpack重新打包
   访问http://localhost:8080/webpack-dev-server/index.html
10. 或者更为简单粗暴直接的方式一键生成所需要的工程目录

• create-react-app全局命令安装
  npm install -g create-react-app
• 用create-react-app创建新项目
  create-react-app 项目名
• 进入工程目录启动工程
  npm start
• 安装组件参数的类型验证
  npm install --save prop-types
• 安装真正的官方版本的 Redux 和 React-redux
npm install redux react-redux --save

11. 划分项目架构

//用create-react-app创建的项目
|-----src（存放源文件）
|       |----components（存放dumb组件）
|       |----containers（存放smart组件）
|       |----reducers
|       |----app.js组件容器
|
|

//用 webpack 配置的项目
├── package.json                 
├── README.md                    
├── gulpfile.js                  // gulp 配置文件
├── webpack.config.js            // webpack 配置文件
├── doc                          // doc  目录：放置应用文档
├── test                         // test 目录：测试文件
├── dist                         // dist 目录：放置开发时候的临时打包文件
├── bin                          // bin  目录：放置 prodcution 打包文件
├── mocks                        // 数据 mock 相关  
├── src                          // 源文件目录
│   ├── html                     // html 目录 
│   │   ├── index.html
│   │   └── page2.html
│   ├── js                       // js 目录 
│   │   ├── common               // 所有页面的共享区域，可能包含共享组件，共享工具类
│   │   ├── home                 // home 页面 js 目录
│   │   │   ├── components
│   │   │   │   ├── App.js
│   │   │   ├── index.js         // 每个页面会有一个入口，统一为 index.js
│   │   ├── page2                // page2 页面 js 目录
│   │   │   ├── components
│   │   │   │   ├── App.js
│   │   │   └── index.js
│   └── style                    // style 目录
│       ├── common               // 公共样式区域
│       │   ├── varables.less    // 公共共享变量
│       │   ├── index.less       // 公共样式入口
│       ├── home                 // home 页面样式目录    
│       │   ├── components       // home 页面组件样式目录
│       │   │   ├── App.less 
│       │   ├── index.less       // home 页面样式入口
│       ├── page2                // page2 页面样式目录
│       │   ├── components       
│       │   │   ├── App.less
│       │   └── index.less       
├── vendor
│   └── bootstrap
└── └── jquery

12. 组件编写顺序如下：

• 引入依赖模块
• static 开头的类属性，如defaultProps，propTypes
• 构造函数，constructor()
• getter/setter
• 组件生命周期
• 以_开头的私有方法
• 事件监听方法，以handle开头
• 以render开头的方法，有时候 render()方法里面的内容会分开到不同函数里面进行，这些函数都以 render 开头
• render() 方法
• 作为模块导出该组件

13. 函数、属性命名的习惯
    组件的私有方法都用_开头，所有事件监听的方法都用 handle开头。把事件监听方法传给组件的时候，属性名用on开头
14. Flux架构
    View -> Action(Action Creator -> Action) -> Dispatcher -> Store -> Controller View -> View