React SPA学习（一）
一、配置项目工程
- 初始化工程
mkdir RSPA cd RSPA npm init
- 配置package.json中的dependencies、devDependencies
在package.json里面dependencies依赖包的版本号前面的符号有两种，一种是~，一种是^：
1.~的意思是匹配最近的小版本 比如~1.0.2将会匹配所有的1.0.x版本，但不匹配1.1.0
2.^的意思是最近的一个大版本 比如1.0.2 将会匹配 所有 1.x.x, 但不包括2.x.x
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.5.10",
"react": "^15.5.0",
"react-dom": "^15.5.0",
"react-redux": "^5.0.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.22.0",
"jsx-loader": "~0.13.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
} - 执行npm install，下载依赖库（项目根目录会生成node_modules文件夹，依赖库放入其中）
--1.npm install 会根据package.json中配置的dependencies、devDependencies中配置的依赖包进行下载（区别：前者是项目正常运行所需要的依赖；后者是开发时项目所需的依赖项） --2.当需要添加新依赖时，安装在dependencies执行： npm install packagename --save --2.安装在devDependencies中执行： npm install packagename --save-dev
- 配置webpack.config.js文件
// 推荐学习阮一峰老师webpack教程 // gitHub地址：https://github.com/ruanyf/webpack-demos // webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'src');
const ENTRY_FILE = path.resolve(SRC_PATH, 'index');
const BUILD_PATH = path.resolve(ROOT_PATH, 'public/dist');
module.exports = {
entry: {
bundle: ENTRY_FILE
},
output: {
publicPath: '/public/dist/',
path: BUILD_PATH,
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /^node_modules$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}
]
},
plugins: [
new webpack.DefinePlugin({
__DEV__: JSON.stringify(process.env.NODE_ENV)
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
} - 配置package.json中的scripts值
"scripts": {
"dev": "webpack-dev-server --devtool eval --process --colors",
"hot": "webpack-dev-server --hot --inline --progress --colors",
"dist": "webpack --config webpack.config.js --progress --colors --watch -p"
} - 创建存放项目各资源文件夹
RSPA |--node_modules |--public |--dist |--index.html |--src |--component |--app.js
|--style |--index.js |--package.json |--webpack.config.js - 构建webpack.config.js中配置的入口文件index.js及发布的index.html
// index.js
import React from 'react' import { render } from 'react-dom' import App from './component/app' render( <App />, document.querySelector('#wrapper') );<!-- index.html -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>RSPA</title> </head> <body> <div id="wrapper"></div>
<!-- 此处/public/dist与webpack.config.js中output字段的publicPath属性配置有关 --> <script type="text/javascript" src="/public/dist/bundle.js"></script> </body> </html>
二、开始项目
- 通过react-router构建项目导航
- 开发基本组件
- 通过redux进行状态管理
- 通过fetch模块对动态数据进行请求
三、编译项目
- npm run dev 开发者模式运行，执行package.json中script字段dev属性后面的命令，修改文件后刷新页面可看最新效果
- npm run hot 热部署模式，修改文件后，会自动重新编译，并显示最新效果
- npm run dist 发布模式，运行后会在webpack.config.js中output字段属性path配置的路径下，生成编译后的js文件
※注意※，如果因手法原因导致8080端口被占用，如何快速kill掉占用的应用：
--windows下输入以下命令，最后的数值就是PID号 netstat -ano | findstr "8080" --Linux下输入 netstat -anp | grep 8080 ---------------------------------------------- --然后window下可以用任务管理器-->详细信息查找此PID对应的程序并右键结束任务 --Linux下直接kill -9 PIDNUM结束此占用的进程
四、对项目进行详细需求设计，绘制流程图，细分任务完成节点，完成项目记录
此项目的gitHub地址为：https://github.com/wangbo7753/RSPA
感兴趣的reactor可以参考下
