如何搭建一个React项目

  1. 初始化项目 npm init
    得到package.json文件
  2. 安装React
    • 在开发环境中使用,添加以下代码
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.js"></script>
  • 在线上环境中使用,添加以下代码
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.min.js"></script>
  • 下载到本地使用
    npm install --save react@0.14-beta3 react-dom@0.14.0-beta3
    OR
    npm install react react-dom --save
  1. 前端 Javascript 打包工具
    npm install webpack-dev-server webpack --save-dev
    其中,webpack的全局安装
    npm install webpack -g
  2. 解析 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
  3. 前端工作流工具 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 connect-rest@1.9.5 --save-dev
  4. 添加loader将任意资源转化为 javascript 模块
    npm install xx-loader --save-dev
  5. 创建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"
};
  1. 创建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
    }
}
  1. 启动 webpack-dev-server
    webpack-dev-server
    其中,--content-base ./表示当前目录是server的根目录
    功能:代码监控,自动调用webpack重新打包
    访问http://localhost:8080/webpack-dev-server/index.html
  2. 或者更为简单粗暴直接的方式一键生成所需要的工程目录
  • create-react-app全局命令安装
    npm install -g create-react-app
  • create-react-app创建新项目
    create-react-app 项目名
  • 进入工程目录启动工程
    npm start
  • 安装组件参数的类型验证
    npm install --save prop-types
  • 安装真正的官方版本的 ReduxReact-redux
    npm install redux react-redux --save
  1. 划分项目架构
//用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
  1. 组件编写顺序如下:
  • 引入依赖模块
  • static 开头的类属性,如defaultProps,propTypes
  • 构造函数,constructor()
  • getter/setter
  • 组件生命周期
  • _开头的私有方法
  • 事件监听方法,以handle开头
  • render开头的方法,有时候 render()方法里面的内容会分开到不同函数里面进行,这些函数都以 render 开头
  • render() 方法
  • 作为模块导出该组件
  1. 函数、属性命名的习惯
    组件的私有方法都用_开头,所有事件监听的方法都用 handle开头。把事件监听方法传给组件的时候,属性名用on开头
  2. Flux架构
    View -> Action(Action Creator -> Action) -> Dispatcher -> Store -> Controller View -> View
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容