[React 01] 環境建置

React 版本差異

React 發展歷史，這套是 2013 年 Facebook 自己內部使用完開源出來的一個 Library，那時版本還是 0.3.3，從 2016 年直接從 0.14.8 版本跳到 15 版，2020-10-20 推出 React17，16 和 17 沒有差太多。

state => UI
state changed => re-render

懂上面大概就懂 50% 的 React
在了解 React 環境建置要先有基礎知識: Webpack 和 Babel

為什麼需要 Webpack ?

因為在寫 React 時，需要用到 import，所以需要 Webpack 做 bundle

為什麼需要 Babel ?

不是所有人的瀏覽器都可以支援 ES6，所以就需要 Babel 幫忙打包成 ES5

Webpack 和 Babel 安裝過程就不詳敘，忘了再回頭看筆記吧，然後我應該有很高機率會回頭看自己筆記QQ

把 React 加進來

專案安裝好 Webpack 和 Babel 後，接下來就是裝 React 了

npm install react react-dom @babel/preset-react

babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

新增一個 App.js 檔案

import React, {Component} from 'react'

class App extends Component {
    render() {
        return (
            <h1>hihiTzu</h1>
        )
    }
}

export default App

import 一開始沒有放 {Component} 也沒關係
但要變成下面這樣寫

import React from 'react'

class App extends React.Component {
    render() {
        return (
            <h1>hihiTzu</h1>
        )
    }
}

export default App

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
// 執行時，會把 App render 到 id 叫 root 的這個 Dom 上面

index.html 裡面記得加

<div id='root'></div>

以及

<script src="./dist/bundle.js"></script>

這樣就結束可以順利跑起來了，這就是基礎的 React 環境建置

小小優化時間

如何防止檔案被 Cache 住

解法 : 檔名加入 hash，Webpack 會自動產生 hash，變成檔名的一部分

webpack.config.js 的 filename

filename: 'bundle.[hash].js'

出來變這樣 bundle.e9ee5632d1aec93df70b.js ，一旦改了檔案，都會產生不一樣的黨名，確保每次都是載入最新的檔案，但這樣就會碰到另一個問題了，index.html 不就要同時更新的 js 檔名嗎？

為了防止此問題，先安裝個 plugin: html-webpack-plugin，此 plugin 可以自動生成 html 的檔案

npm install html-webpack-plugin

修改 webpack.config.js，新增一條 plugin 規則

const path = require("path")
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: 'bundle.[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html'
        })
    ]

}

這樣原本的 index.html 裡面的引入 script 就可以刪掉了，因為他會依照 ./index.html 這個位置的 html 檔當作 template ，然後在 dist 資料夾會自動生成一個有最新 js 檔名的 html 的檔案，透過這種方式就不用每次自己改 js 檔名

每次更動檔案自動 build

這工具叫做 webpack-dev-server，讓檔案是 hot module reload

安裝

npm install --save-dev webpack-dev-server

更改 package.json，修改 script 的 start 指令

"start": "webpack-cli serve --mode development --open --hot",

huli 影片裡的"start": "webpack-dev-server --mode development --open --hot",不能用
解決 : https://github.com/webpack/webpack-dev-server/issues/2424

環境建置懶人包

上述那些建置太麻煩的話，React 有給懶人包

npx create-react-app my-app
cd my-app
npm start

這指令的背後跟前面做的事情是一樣的，但同時也多了我們不太需要功能，就是快速方便而已。