React SPA学习（一）

时间 2019-11-18

标签 react spa 学习栏目 React 繁體版

原文原文链接

1、配置项目工程javascript

初始化工程
```
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>

2、开始项目css

经过react-router构建项目导航
开发基本组件
经过redux进行状态管理
经过fetch模块对动态数据进行请求

3、编译项目html

npm run dev 开发者模式运行，执行package.json中script字段dev属性后面的命令，修改文件后刷新页面可看最新效果
npm run hot 热部署模式，修改文件后，会自动从新编译，并显示最新效果
npm run dist 发布模式，运行后会在webpack.config.js中output字段属性path配置的路径下，生成编译后的js文件

　　※注意※，若是因手法缘由致使8080端口被占用，如何快速kill掉占用的应用：java

--windows下输入如下命令，最后的数值就是PID号
netstat -ano | findstr "8080"
--Linux下输入
netstat -anp | grep 8080
----------------------------------------------
--而后window下能够用任务管理器-->详细信息查找此PID对应的程序并右键结束任务
--Linux下直接kill -9 PIDNUM结束此占用的进程

4、对项目进行详细需求设计，绘制流程图，细分任务完成节点，完成项目记录node

此项目的gitHub地址为：https://github.com/wangbo7753/RSPAreact

感兴趣的reactor能够参考下webpack