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