跳至主要内容

[note] 使用 create-react-app 建立專案(react-cli)

啟動專案:

# 啟動專案
# npm install create-react-app
$ npx create-react-app my-app
$ npx create-react-app my-app-with-redux --template redux
$ npx create-react-app my-app-with-typescript --template typescript
$ cd my-app
$ npm start

安裝 react-router:

# 安裝 react-router
$ npm install --save react-router-dom

安裝 SASS:

# 安裝 SASS
$ npm install node-sass --save

Development

使用 https 啟動專案

package.json 中的指令改成即可:

{
"start": "HTTPS=true react-scripts start"
}

若是使用 webpack cli 啟動專案則可以使用:

$ webpack-dev-server --https

Building Your App

Importing a Component

keywords: alias

Absolute Imports

在專案的根目錄底下可以新增一支 jsconfig.json 的檔案:

// ./jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

⚠️ 如果使用的是 TypeScript,則把上面的設定加到 tsconfig.json 中即可。

如此就可以使用絕對路徑的方式來載入模組:

// 原本寫
// import Button from './components/Button';

// 設定後所有路徑都會以 /src 開始,因此可以改成
import Button from 'components/Button';

Adding TypeScript

Adding TypeScript @ create-react-app

$ npx create-react-app my-app --template typescript
$ cd my-app
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Advanced Configuration by Builtin ENV

Advanced Configuration @ create-react-app

create-react-app 提供許多可使用的 env 來調整 CRA 的預設行為,使用的方式是在根目錄建立一支 .env 的檔案,接著就可以使用這些變數。

例如:

#.env
BROWSER=none
PORT=1450

資訊

和客製化的 env 變數不同,這些又 CRA 內建提供的 env 變數不需要以 REACT_APP_ 作為前綴。

可以在官網的 Advanced Configuration 檢視完整的變數,其中常用到的包括:

VariableDefaultUsage
BROWSER在 App 啟動時以預設瀏覽器開啟設成 none 則不會在 App 啟動時以瀏覽器開啟,或者可以改成其他希望使用的 Browser,例如 chromefirefoxedge
PORT3000可以改成其他 dev web server 啟動時監聽的 port。
HTTPSfalse設成 true 時,則會改以 HTTPS 啟動 dev-server。
TSC_COMPILE_ON_ERRORfalse設成 true 時,則即使 TypeScript 有檢查到型別錯誤仍然會 compile,避免單純因 TS 的 error 而無法繼續開發。
ESLINT_NO_DEV_ERRORSfalse設成 true 時,則會將所有的 ESLint error 改成 warning 的提示,避免單純因 ESLint 的 error 而無法繼續開發。
BUILD_PATH/build打包好的檔案要放置在那個資料夾中
PUBLIC_URLroot 或 package.json 中設定的 homepage 欄位當使用 CDN 或無法正確參照到 assets 的路徑是使用。

字體(Fonts)

How to add fonts to create-react-app based projects? @ StackOverflow by Dan

直接在 CSS 中使用 @font-face 即可:

/* index.css */
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

Analyzing Bundle Size

可參考官方文件 Analyzing Bundle Size 的說明,使用 Source map explorer

npm install --save source-map-explorer

package.json 的 script 中加入:

"scripts": {
+ "analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",

ESLint

現在可以透過在 .env 中設定 EXTEND_ESLINT 變數來擴展基本 ESLint 的設定。

eslint-config-react-app

eslint-config-react-app @ npm

這是 create-react-app 預設使用的 eslint 設定:

// package.json
{
// ...
"eslintConfig": {
"extends": "react-app",
},
}

eslint-plugin-react

eslint-plugin-react @ npm | github

# for react
npm install eslint-plugin-react --save-dev

添加 eslint 的設定:

// package.json
{
"name": "react-hooks-sandbox",
// ...
"eslintConfig": {
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
},
// ...
}

eslint-plugin-react-hooks

# for react hooks
$ npm install eslint-plugin-react-hooks --save-dev

添加 eslint 的設定:

// package.json
{
"name": "react-hooks-sandbox",
// ...
"eslintConfig": {
"plugins": [
"react-hooks"
]
},
}

eslint-plugin-jsx-a11y

eslint-plugin-jsx-a11y @ npm

$ npm install eslint-plugin-jsx-a11y --save-dev

ESLint 設定:

// package.json
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"],
"plugins": ["jsx-a11y"]
}

eslint-config-airbnb

eslint-config-airbnb @ github

$ npx install-peerdeps --dev eslint-config-airbnb

eslint 設定:

// .eslintrc
{
"extends": ["airbnb"],
"rules": {
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"import/no-unresolved": [
2,
{
"ignore": ["^@?"]
}
],
"no-console": [
1,
{
"allow": ["log", "warn", "error"]
}
]
},
"env": {
"browser": true,
"node": true
}
}

Editor 設定

Setting Up Your Editor @ Create React App

由於 ESLint Visual Studio Code extension 目前預設還不支援 TypeScript,因此如果要在 ESLint extension 中可支援 TypeScript 的支援,可以在 VSCode 的 settings.json 中加上以下設定:

// ./vscode/setting.json
{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}