安裝 React 框架 Vite 與 TypeScript

首先，我們建立一個專案：stock-assistant，並用 Vite 安裝 React 和 TypeScript。這邊以 npm 為例：

$ npm create vite@latest stock-assistant -- --template react-ts

▼ 創建成功後，會跳出一個成功的畫面

▼ run 起來感受一下 Vite 飛起的速度吧 XD

安裝 React Router

▼ 我們需要安裝 React Router 來處理 Web 應用程式中的瀏覽器路由，這邊安裝的是 react-router-dom 套件，他已包含所有必要的功能，不需要再額外安裝 react-router

$ npm install react-router-dom

安裝 React 相關的 TS 型別定義

因為我有在用 TypeScript，因此我希望開發時可以獲得對應的型別定義，方便我查詢與使用，以下是我會安裝的幾個型別定義，你可以根據自己的需求選擇安裝與否：

• @types/react：這個是 React 的型別定義，包含 React Library與其相關 API 的型別，有打算安裝型別定義的朋友，這個是必裝。
• @types/react-dom：因為我會使用 ReactDOM Library，所以如果我希望渲染 React 元件在 DOM 上時，也能獲得型別檢查的話，那也是需要安裝的。
• @types/react-router-dom：這個是對應我安裝的 React Router 套件的型別定義
• @types/axios：我會使用 Axios 進行 HTTP request，所以我也會安裝這個套件，讓我使用 Axios 時能看到他的型別

▼ 可以想要安裝的套件寫成一行，方便安裝

$ npm install -D @types/react @types/react-dom @types/react-router-dom @types/axios

安裝 Tailwind CSS

▼ 首先安裝 Tailwind CSS、Post CSS 以及 autoprefixer 套件

$ npm install -D tailwindcss postcss autoprefixer --save-dev

如果你跟我一樣用 Vite 安裝 React，可能要額外安裝 postcss 以及 autoprefixer，才能讓 Tailwind CSS 在專案中正常運作。postcss 是編譯和轉換 CSS 的工具，需要用他來支援 Tailwind CSS 的編譯；而 autoprefixer 則確保 CSS 在不同瀏覽器都能正常顯示。

▼ 新增 postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

▼ 打開 tailwind.config.js (如果沒有可自行於根目錄新增)，我們要設定會使用 Tailwind CSS 的目錄與檔案路徑

/** @type {import('tailwindcss').Config} */
export default {
  mode: 'jit',
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

▼ 打開 src/index.css，裡面已有一些預設樣式，但我想要全面使用 Tailwind CSS，所以我會用以下語法覆蓋整份內容

@tailwind base;
@tailwind components;
@tailwind utilities;

▼ 開啟 App.tsx，在任一位置加入以下語法，如果 Tailwind CSS 有安裝成功，那就能看到帶有底線 + 粗體的文字樣式囉！

<div className="text-3xl font-bold underline">
  This is a div with Tailwind CSS styles applied.
</div>

安裝 MUI

我上一份 React 專案使用的是 ant.design Framework，這次想改用用看 MUI 的免費版，看看他跟付費版到底差在哪 XD。

▼ 安裝 MUI 和 emotion，emotion 是必要套件一定要裝喔

$ npm install @mui/material @emotion/react @emotion/styled

▼ 因為 roboto 真的好看，所以我有安裝 XD (我的部落格也是用 Roboto 喔)

$ npm install @fontsource/roboto

▼ 打開 main.tsx，匯入這些字形檔

import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'

▼ 最後安裝會用到的 icon 檔

$ npm install @mui/icons-material

▼ 來試著新增 MUI 元件囉

import { useState } from 'react'
import Fab from '@mui/material/Fab'
import AddIcon from '@mui/icons-material/Add'

function App() {

  return (
    <>
      <Fab color="primary" aria-label="add">
        <AddIcon />
      </Fab>
    </>
  )
}

export default App

如果畫面上有出現一個 + 的按鈕，表示安裝成功；沒有出現的話，請再檢查一次步驟或是留言給我 🙂

安裝 ESLint

▼ 用 init 初始化 ESLint 的設定檔

$ npm init @eslint/config

如果 App.tsx 有類似以下報錯：

'React' must be in scope when using JSXeslintreact/react-in-jsx-scope

可以在 ESLint 設定檔中把這個檢查規則給 off，因此 React v17 以上的版本，已經不需要再每個檔案前面 import React 了。

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

小結

我在開一個新專案前，會先粗略想好要用到什麼套件，然後在 coding 之前就先把所有環境安裝後，確保能運行才開始 coding，畢竟環境安裝是最麻煩的，常常會因為相容性的問題導致專案掛掉，因此如果不趁著記憶鮮明時把所有環境裝好，後面除錯就比較麻煩。

以上是我目前會用到的套件，未來如果有再新增，都會同步更新。

有任何問題也歡迎留言給我唷！

2

3

2

發生錯誤。