PJCHENder 未整理筆記

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

2019-08-05

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

@(React)[React, React CLI]

啟動專案:

1
2
3
4
5
# 啟動專案
# npm install create-react-app
$ npx create-react-app my-app
$ cd my-app
$ npm start

安裝 react-router:

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

安裝 SASS:

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

Development

使用 https 啟動專案

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

1
2
3
{
"start": "HTTPS=true react-scripts start"
}

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

1
$ webpack-dev-server --https

Building Your App

Importing a Component

keywords: alias

Absolute Imports

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

1
2
3
4
5
6
7
// ./jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

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

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

1
2
3
4
5
// 原本寫
// import Button from './components/Button';

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

Adding TypeScript

Adding TypeScript @ create-react-app

1
2
3
$ 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 即可:

1
2
3
4
5
/* 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

1
npm install --save source-map-explorer

package.json 的 script 中加入:

1
2
3
"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 設定:

1
2
3
4
5
6
7
// package.json
{
// ...
"eslintConfig": {
"extends": "react-app",
},
}

eslint-plugin-react

eslint-plugin-react @ npm | github

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

添加 eslint 的設定:

1
2
3
4
5
6
7
8
9
10
11
12
// package.json
{
"name": "react-hooks-sandbox",
// ...
"eslintConfig": {
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
},
// ...
}

eslint-plugin-react-hooks

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

添加 eslint 的設定:

1
2
3
4
5
6
7
8
9
10
// package.json
{
"name": "react-hooks-sandbox",
// ...
"eslintConfig": {
"plugins": [
"react-hooks"
]
},
}

eslint-plugin-jsx-a11y

eslint-plugin-jsx-a11y @ npm

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

ESLint 設定:

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

eslint-config-airbnb

eslint-config-airbnb @ github

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

eslint 設定:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// .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 中加上以下設定:

1
2
3
4
5
6
7
8
9
// ./vscode/setting.json
{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}

掃描二維條碼,分享此文章