- 初始化项目
npm init
得到package.json文件
- 安装React
- 前端 Javascript 打包工具
npm install webpack-dev-server webpack --save-dev
其中，webpack的全局安装
npm install webpack -g
- 解析 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
- 前端工作流工具 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
- 添加loader将任意资源转化为 javascript 模块
npm install xx-loader --save-dev
- 创建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"
};
- 创建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
}
}
- 启动 webpack-dev-server
webpack-dev-server
其中，--content-base ./表示当前目录是server的根目录
功能：代码监控，自动调用webpack重新打包
访问http://localhost:8080/webpack-dev-server/index.html
- 或者更为简单粗暴直接的方式一键生成所需要的工程目录
-
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
- 划分项目架构
//用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
- 组件编写顺序如下：
- 引入依赖模块
-
static 开头的类属性，如defaultProps，propTypes
- 构造函数，
constructor()
getter/setter- 组件生命周期
- 以
_开头的私有方法
- 事件监听方法，以
handle开头
- 以
render开头的方法，有时候 render()方法里面的内容会分开到不同函数里面进行，这些函数都以 render 开头
-
render() 方法
- 作为模块导出该组件
- 函数、属性命名的习惯
组件的私有方法都用_开头，所有事件监听的方法都用 handle开头。把事件监听方法传给组件的时候，属性名用on开头
- Flux架构
View -> Action(Action Creator -> Action) -> Dispatcher -> Store -> Controller View -> View
