---
tags: 專案
---
# [開新專案] 專案建置 React
## Create

npx create-react-app my-app
<!-- 建立在已存在專案 -->
npx create-react-app .

紀錄node版號

node -v > .nvmrc

yarn 
yarn dev

## 安裝[eslint](https://www.npmjs.com/package/eslint-plugin-react)

yarn add -D eslint-plugin-react

- [.eslintrc.js](https://hackmd.io/GuBkYcPWT1m56BiAPEuJsw)
- [React Eslint設定檔js](https://hackmd.io/Au9qwy4XQhi6ueKz5RCzZw)

overrides 規則套用在特定的檔案上

  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      // 各種規則...
    },
  ],

parserOptions

## lint-staged
- git commit時檢查

yarn add -D lint-staged

`package.json`

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix"
  ]
},

## editorconfig
`.editorconfig`
如果想要確保「不」套用「任何」較高層級 .editorconfig 檔案的設定到此程式碼基底組件，請在較低層級的 .editorconfig 檔案中新增 root=true 屬性：

root = true

- 基本設定

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

## jsconfig.json
- 設定alias設定可以autocomplete路徑

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./src/assets/*"]
    }
  }
}

## Alias設定
1. 改寫CRA config: react-app-rewired

yarn add -D react-app-rewired

1). 建立config-overrides.js
`config-overrides.js`

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

2). 改寫package.json中的scripts

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

3). customize-cra

yarn add -D customize-cra

2. Webpack Alias
`config-overrides.js`

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '.', dir)
}

const {
  override,
  addWebpackAlias,
} = require('customize-cra')

module.exports = override(
  addWebpackAlias({
    ['@']: path.resolve(__dirname, 'src'),
    ['@configs']: resolve('./src/configs'),
  }),
)

## Style-components

yarn add styled-components

## Router + 資料夾建構

## MUI: [material ui](https://www.npmjs.com/package/@mui/material)

yarn add @mui/material @emotion/react @emotion/styled

## VS Code Emmet 設定

"emmet.includeLanguages": {
    "vue": "pug",
    "javascript": "javascriptreact"
},

-----
# CRA
### 1. [PUG](https://www.npmjs.com/package/babel-plugin-transform-react-pug)

- [教學](https://medium.com/@jasperdyb/%E5%A6%82%E4%BD%95%E5%9C%A8react%E4%B8%AD%E4%BD%BF%E7%94%A8pug%E6%A8%A3%E6%9D%BF%E8%AA%9E%E8%A8%80-e757b4ca35fa)
- https://www.higithub.com/michaelmior/repo/babel-plugin-transform-react-pug

yarn add -D babel-plugin-transform-react-pug

- eslint

yarn add -D eslint-plugin-react-pug

`.eslintrc.js`

module.exports = {
  "plugins": [
      "react-pug"
  ],
  "extends": [
      "plugin:react-pug/all"
  ]
}

#### VScode pug Hightlight

vscode-react-pug"

- vs code extensions

JavaScript Atom Grammar

### 2. 改寫CRA config: react-app-rewired

yarn add -D react-app-rewired

1. 建立config-overrides.js
`config-overrides.js`

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

2. 改寫package.json中的scripts

"serve": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

4. customize-cra

yarn add -D customize-cra

- config-overrides.js設定

const {
  override,
  disableEsLint,
  addBabelPlugin,
} = require('customize-cra')

module.exports = override(
  disableEsLint(), //避開判定pug為未識別字元
  addBabelPlugin('transform-react-pug')
)

### 3. Webpack Alias
`config-overrides.js`

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, '.', dir);
}

const {
  override,
  disableEsLint,
  addBabelPlugin,
  addWebpackAlias,
} = require('customize-cra')

module.exports = override(
  disableEsLint(), //避開判定pug為未識別字元
  addBabelPlugin('transform-react-pug'),
  addWebpackAlias({
    ['@']: path.resolve(__dirname, 'src'),
    ['~']: resolve('./src/assets'),
  })
)

----
# Vite 方式

yarn create vite

yarn create @vitejs/app vite-react-app --template react

## vite.config.js
- alias

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})