Skip to main content

[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

字體(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 reactnpm 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 }  ]}