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可以参考下