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 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 }
]
}
Last updated on