快速開始一個 React Web App (1) 安裝 React Most Wanted

Jun 30, 2021

React 是目前眾多的前端框架中，廣泛被使用的一個選項。接下來分享如何以 React Most Wanted 快速建立一個自己的 Web App。

React Most Wanted 是什麼？

這是一個將 React 常用工具集合的 CRA 套件，在安裝它的時候可以有以下 3 種選擇：

Base shell
基本的框架，包含 Layout, PWA Web Shell, React Router DOM, React Intl

$ npx create-react-app my-app --template base

Material UI shell
繼承 Base Shell，加入 Material UI 以及相關的 Provider

$ npx create-react-app my-app --template material-ui

React Most Wanted shell (推薦)
繼承 Material UI Shell，加入 Firebase (Function, Storage, Realtime Database, Messaging)

$ npx create-react-app my-app --template rmw

這次我們將使用 React Most Wanted shell 來建立一個 Web App。它對於專案的起始有非常大的幫助。

一步步安裝…

安裝的流程會是這樣：首先先安裝 React Most Wanted (RMW)。以 RMW 為基礎下，接著安裝 CRACO 去調整 react-scripts 的設定。最後就可以直接啟動一個 Web App。

在這之前….

首先，需要確認你的電腦有安裝 Node.js (版本須要 >= 10.16)，以及 VS Code
確認有安裝後，我們開始往下一步

使用 NPX 安裝 RMW

$  npx create-react-app react-quick-started --template rmw

npx: installed 67 in 3.231s

Creating a new React app in /home/dubi/workspace/react-quick-started.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-rmw...

# 中間省略...

Done in 5.98s.

Success! Created react-quick-started at /home/dubi/workspace/react-quick-started
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-quick-started
  yarn start

Happy hacking!

安裝 CRACO

CRACO 全稱為 Create React App Configuration Override。它可以幫助我們在不彈出(eject) react-scripts 內封裝的設定下，去覆寫一些我們可能需要的設定，例如：Webpack, Babel, Jest … 等等。

$ yarn add @craco/craco

安裝 craco-alias

craco-alias 可以利用 VS Code 上的 JavaScript IntelliSense 去取代 Webpack 中的解析別名(resolve alias) 。如此一來，只需要設定一份 JSON 檔案，就能夠套用到編輯器，以及 react-scripts 下的環境。

$ yarn add -D craco-alias

設定 CRACO Config

CRACO Config 需要自行在專案根目錄中，新增一個名稱為 craco.config.json 的檔案。接著設定以下內容。 options 部份可以是 jsconfig , tsconfig 或 options 。這裡我們用 jsconfig 。

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig",
        baseUrl: "./src"
      }
    }
  ]
}

設定 jsconfig.json

jsconfig.json 設定檔預設會在專案根目錄。打開它後，加入下方的 4 – 7 列的設定。這個設定可以幫助我們在載入套件的時候，可以用比較短的別名去寫，讓程式碼看起來更不會有負擔。

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "components/*": [ "./src/components" ],
      "containers/*": [ "./src/containers" ]
    }
  },
  "include": [
    "src",
    "../../src/containers/MarkdownPage"
  ]
}

設定 CRACO 到 NPM Script

在 package.json 中，找到以下這段設定。我們要把它修改成 CRACO 去啟動它。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

將 react-scripts 改成 craco

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

啟動 React

$ yarn start

Starting the development server...

ESLint 訊息

如果看到以下訊息，不用慌張。代表這份程式仍有些部份是需要「整理」的。按照它提示的檔案與行數，逐一將有問題的部份調整。

Compiled with warnings.

src/pages/Demo/Posts/Post.js
  Line 21:10:  'changed' is assigned a value but never used                                                            no-unused-vars
  Line 22:10:  'initialized' is assigned a value but never used                                                        no-unused-vars
  Line 25:10:  'isPublished' is assigned a value but never used                                                        no-unused-vars
  Line 36:13:  's' is assigned a value but never used                                                                  no-unused-vars
  Line 37:13:  'e' is assigned a value but never used                                                                  no-unused-vars
  Line 48:6:   React Hook useEffect has a missing dependency: 'uid'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 110:9:  'onDefferedStateChange' is assigned a value but never used                                              no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

什麼是 no-unused-vars 警告？
https://eslint.org/docs/rules/no-unused-vars

完成！

在當你執行 yarn start 同時，瀏覽器自動跳出到你的 App 了！

快速開始一個 React Web App (2) Provider 與 Context (待續)

連結

Dubi 日常