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 (待續)
連結
Create React App
https://zh-hant.reactjs.org/docs/create-a-new-react-app.html
NPX
https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
React Most Wanted
https://www.react-most-wanted.com/