- 初始化項(xiàng)目
npm init
得到package.json文件
- 安裝React
- 在開發(fā)環(huán)境中使用，添加以下代碼
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-beta3/react.js"></script>
- 在線上環(huán)境中使用悟狱，添加以下代碼
<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
- 前端 Javascript 打包工具
npm install webpack-dev-server webpack --save-dev
其中怎抛，webpack的全局安裝
npm install webpack -g
- 解析 JSX 語(yǔ)法和 Es6 語(yǔ)法
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（如果暫時(shí)不使用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
- 添加loader將任意資源轉(zhuǎn)化為 javascript 模塊
npm install xx-loader --save-dev
- 創(chuàng)建gupfile.js文件，全局定義打包源文件和打包目標(biāo)相關(guān)的配置
(暫時(shí)用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",
// 圖片等應(yīng)用資源
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"
};
- 創(chuàng)建webpack.config.js文件進(jìn)行配置
var webpack = require('webpack')
var path = require("path")
module.exports = {
//打包入口文件地址 String | Array | Object
entry:{
//在配置文件中配置loader芽淡，避免顯示的調(diào)用 require 增加模塊的耦合度
index:['./src/js/index.js','./src/css/index.css'],
//vendor實(shí)現(xiàn)業(yè)務(wù)代碼和第三方代碼的分離
vendor:[
'react',
'react-dom'
]
},
//編譯后js文件的輸出地址马绝，即html引用的文件
//如果打包目標(biāo)不止一個(gè)，可用Array[name].js表示filename
output:{
path:path.resolve(__dirname,'./dist/'),
filename:'index.js',
//打包的目標(biāo)目錄相對(duì)于啟動(dòng)目錄的路徑
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 代碼和應(yīng)用業(yè)務(wù)代碼
//html文件也要引用vendor.bundle.js
plugins: [
new webpack.optimize.CommonsChunkPlugin({name:"vendor", filename:"vendor.bundle.js",Infinity}),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
//熱加載富稻，不刷新瀏覽器的條件下應(yīng)用最新的代碼更新
hot:true,
//inline模式掷邦，打包完成后自動(dòng)更新頁(yè)面
inline:true
}
}
- 啟動(dòng) webpack-dev-server
webpack-dev-server
其中，--content-base ./表示當(dāng)前目錄是server的根目錄
功能：代碼監(jiān)控椭赋，自動(dòng)調(diào)用webpack重新打包
訪問http://localhost:8080/webpack-dev-server/index.html
- 或者更為簡(jiǎn)單粗暴直接的方式一鍵生成所需要的工程目錄
-
create-react-app全局命令安裝
npm install -g create-react-app
- 用
create-react-app創(chuàng)建新項(xiàng)目
create-react-app 項(xiàng)目名
- 進(jìn)入工程目錄啟動(dòng)工程
npm start
- 安裝組件參數(shù)的類型驗(yàn)證
npm install --save prop-types
- 安裝真正的官方版本的
Redux 和 React-redux
npm install redux react-redux --save
- 劃分項(xiàng)目架構(gòu)
//用create-react-app創(chuàng)建的項(xiàng)目
|-----src（存放源文件）
| |----components（存放dumb組件）
| |----containers（存放smart組件）
| |----reducers
| |----app.js組件容器
|
|
//用 webpack 配置的項(xiàng)目
├── package.json
├── README.md
├── gulpfile.js // gulp 配置文件
├── webpack.config.js // webpack 配置文件
├── doc // doc 目錄：放置應(yīng)用文檔
├── test // test 目錄：測(cè)試文件
├── dist // dist 目錄：放置開發(fā)時(shí)候的臨時(shí)打包文件
├── bin // bin 目錄：放置 prodcution 打包文件
├── mocks // 數(shù)據(jù) mock 相關(guān)
├── src // 源文件目錄
│ ├── html // html 目錄
│ │ ├── index.html
│ │ └── page2.html
│ ├── js // js 目錄
│ │ ├── common // 所有頁(yè)面的共享區(qū)域抚岗，可能包含共享組件，共享工具類
│ │ ├── home // home 頁(yè)面 js 目錄
│ │ │ ├── components
│ │ │ │ ├── App.js
│ │ │ ├── index.js // 每個(gè)頁(yè)面會(huì)有一個(gè)入口哪怔，統(tǒng)一為 index.js
│ │ ├── page2 // page2 頁(yè)面 js 目錄
│ │ │ ├── components
│ │ │ │ ├── App.js
│ │ │ └── index.js
│ └── style // style 目錄
│ ├── common // 公共樣式區(qū)域
│ │ ├── varables.less // 公共共享變量
│ │ ├── index.less // 公共樣式入口
│ ├── home // home 頁(yè)面樣式目錄
│ │ ├── components // home 頁(yè)面組件樣式目錄
│ │ │ ├── App.less
│ │ ├── index.less // home 頁(yè)面樣式入口
│ ├── page2 // page2 頁(yè)面樣式目錄
│ │ ├── components
│ │ │ ├── App.less
│ │ └── index.less
├── vendor
│ └── bootstrap
└── └── jquery
- 組件編寫順序如下：
- 引入依賴模塊
-
static 開頭的類屬性宣蔚，如defaultProps，propTypes
- 構(gòu)造函數(shù)认境，
constructor()
getter/setter- 組件生命周期
- 以
_開頭的私有方法
- 事件監(jiān)聽方法胚委，以
handle開頭
- 以
render開頭的方法，有時(shí)候 render()方法里面的內(nèi)容會(huì)分開到不同函數(shù)里面進(jìn)行叉信，這些函數(shù)都以 render 開頭
-
render() 方法
- 作為模塊導(dǎo)出該組件
- 函數(shù)亩冬、屬性命名的習(xí)慣
組件的私有方法都用_開頭，所有事件監(jiān)聽的方法都用 handle開頭硼身。把事件監(jiān)聽方法傳給組件的時(shí)候硅急，屬性名用on開頭
- Flux架構(gòu)
View -> Action(Action Creator -> Action) -> Dispatcher -> Store -> Controller View -> View
