Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

20230812 更新

以下內容是使用 React + Vite 建立網站時,安裝的套件步驟。
但我現在已經改為使用 React + Next.js,只需要一行指令 npx create-next-app@latest 就能把全部套件裝好。

如果你也想用 React + Vite,可以參考下面的文章。如果是 Next.js ,只有「安裝 MUI」可以參考,其他請忽略

安裝 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 CSSPost 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
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments