跳至主要内容

[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，例如 chrome、firefox、edge。
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 }
  ]
}