Create react from scratch - Lauviah0622/Lavi-Note GitHub Wiki

純手工建立真正用的上的 React 專案

需要做些什麼

使用 React 會遇到兩個問題：

  • JSX
  • ES6 語法
  • Bundle
  • 引入 Typescript
  • Dev 時 hot reload
  • ESlint

除此之外如果要弄成一個好用的 React 專案，應該還會需要做的有：

  • 可以引入 CSS

  • 可以引入圖片

  • SVG 引入成 component

  • 還有希望可以用 webpack 以外的方式來 bundle dev server。

資料夾結構

  • src：放 react 相關的東西
  • public 放一些

index.html

要選定給 react 做 render 的 element，也就是 id 為 root 的 div

再來是要把 JS 引入<script src="../dist/bundle.js"></script>

babel

要用的 babel 有

  • @babel/core：
  • @babel/cli：
  • @babel/preset-env：compile 成 es5 的語法
  • @babel/preset-react：[?]

babel preset 的使用方法蠻簡單，就建立一個 .babelrc ，然後把 preset 加進去就可以了

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

preset 是啥？

webpack

Webpack 需要以下的東西

  • webpack
  • webpack-cli
  • webpack-dev-server
  • style-loader
  • css-loader
  • babel-loader

webpack

  • module：定義說哪些不同的
    • rules：可以定義說哪些的內容享用哪些插件
  • resolve (?)
  • output：budle 好的東西要怎麼處理
    • public
    • publicPath：要放哪裡

很基本的環境建制

github

  1. 設定 webpack

    1. 設定入口點 entry 輸出位置 output

    2. 設定module

      1. 使用 babel-loader 來讓 babel compile

    3. 設定避免瀏覽器 cache

      1. 在 output 中加入 hash
      2. 運用 html-webpack-plugin 來導入入口點：自動幫你生成 index.html 的 html 入口點

    4. dev-server

  2. 設定 .babelrc
    1. 需要兩個 preset:
      1. @babel/preset-env 用來支援 es6 語法
      2. @babel/preset-react"] 支援 JSX 之類的東西
  3. npm 指令
    1. start ：webpack --mode development webpack 的開發模式，會 compile 出有很多註解的檔案，也可以用 dev-server webpack-dev-server --mode development --open --hot，比較方便，改東西後會自己 compile，但要下載 webpack-dev-server
    2. build production ：webpack --mode development webpack 的測試模式

HMR

目前看到的風向有點雜欸

  1. CRA 內建方式 利用 @pmmmwh/react-refresh-webpack-plugin 搭配 加上 webpack 內建的 HMR，

wenpack 內建的 HMR 和 react 基本上沒有關係

https://github.com/gaearon/react-hot-loader 原本大家都用這個，但 devtool v4 更新之後讓這個東西用不了了，然後 dan 就提出一個實現方法

https://github.com/facebook/react/issues/16604#issuecomment-528663101 Dan 哥的 Rough Guide，裡面有提到需要

  • "Hot module replacement" mechanism in the module system.
    • That is usually also provided by the bundler.
    • E.g. in webpack, module.hot API lets you do this.
  • React renderer 16.9.0+ (e.g. React DOM 16.9)
  • react-refresh/runtime entry point
  • react-refresh/babel Babel plugin

這個是 dan 哥的依照上面 的 Rough Guide 實現的東西，但這個只有 https://github.com/facebook/react/tree/0e100ed00fb52cfd107db1d1081ef18fe4b9167f/packages/react-refresh

這個 repo 算是有人把 dan 哥的東西還有其他東西全部弄起來，弄成 webpack 的 plugin https://github.com/pmmmwh/react-refresh-webpack-plugin 所以現在應該是要用這個

參考資料

https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658

Wenpack HMR https://zhuanlan.zhihu.com/p/30669007

⚠️ **GitHub.com Fallback** ⚠️