文章大綱
使用vite 建立一個react 專案,通常會搭配哪些套件呢?
- vite + react
- mui (material ui)
- react-router-dom v6
- zustand 狀態管理
使用vite建立新專案
vite建立新專案時,所有選項都會在終端機的時候詢問,所以你的指令也不用包含專案名稱。
yarn create vite
Q:專案名稱叫什麼
Q:要使用什麼JS框架?
也就是說你其實也可以用vite來建立vue專案。
Q:js or ts
建立完成
加入mui
mui 就是基於 Material UI 的設計規範的 react UI 框架,可以參考官網
1. 安裝
這邊的安裝,是他直接給你他推薦的css解決方案,但如果你想用例如 styled-components 這種的,那這步驟你就只要先安裝@mui/material
就好,然後再自己安裝想用的套件。
yarn add @mui/material @emotion/react @emotion/styled
2. 加入字體
這步驟建議也是要加入的,因為要使用他們的components,英文的話會有好看的字體。
yarn add @fontsource/roboto
安裝完字體檔,就可以在main.js
中引入。
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
3. 安裝icon字體
mui也有自己的icon字體,而且超多~ 就不用到處找icon來使用了:D
yarn add @mui/icons-material
到目前為止mui該裝的東西都好了,這時候可以把隨便一個mui的component放上去看看有沒有效果。
import { Button } from "@mui/material";
function App() {
return <Button variant="contained">hello world</Button>;
}
export default App;
啟動專案來看看
yarn
yarn dev
這時候可以看到按鈕自動有顏色了,表示我們mui安裝成功。
但是這樣還不夠,因為通常我們網站主色不會是藍色,會有自己的企業色。
所以我們要設定主題來有系統的管理顏色,設定主題也可以方便我們切換亮/暗模式。
4. 設定主題
首先把main.js
裡面引入的index.css
移除。
src/
下創建一個theme.js
檔案
import { createTheme } from "@mui/material/styles";
// Create a theme instance.
const theme = createTheme({
palette: {
primary: {
main: "#b34766",
},
},
});
export default theme;
在這邊我先把主色primary改成紫色,接著把theme.js
引入App.jsx
import { Button } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme.js";
function App() {
return (
<ThemeProvider theme={theme}>
<Button variant="contained">Hello World</Button>
</ThemeProvider>
);
}
export default App;
可以看到按鈕我並沒有改任何寫法,只是在最外層引入theme,按鈕的顏色就自動變成我設定的紫色了。
也就是說,整個網站只要你使用的 mui component 有用到primary顏色的,就都會是紫色。
(這邊背景變成白色是因為我們剛剛把index.css
移除了)
還有一個問題就是通常我們會加上reset.css
來清除html預設自帶的css,這個mui 也有做好的component,放在theme
裡面就可以了。
import { Button } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme.js";
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Button variant="contained">Hello World</Button>
</ThemeProvider>
);
}
export default App;
react-router-dom v6
如果網頁有超過一頁的話,就要安裝router套件。
yarn add react-router-dom
在這之前我們要先有頁面,那就先創建兩個頁面吧!
創建檔案 src/views/Home.jsx
、src/views/About.jsx
import { Link } from "react-router-dom";
const Home = () => {
return (
<div>
Home
<br />
<Link to="/about">前往 About</Link>
</div>
);
};
export default Home;
const About = () => {
return <div>About</div>;
};
export default About;
src/
下創建router.jsx
import { createBrowserRouter } from "react-router-dom";
import Home from "./views/Home";
import About from "./views/About";
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
},
{
path: "/about",
element: <About />,
},
]);
export default router;
然後在App.jsx
把router.js
引入
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme.js";
import { RouterProvider } from "react-router-dom";
import router from "./router";
function App() {
return (
<ThemeProvider theme={theme(mode)}>
<CssBaseline />
<RouterProvider router={router} />
</ThemeProvider>
);
}
export default App;
這時候會出現首頁的畫面,並且有一個「前往 About」的連結,點下去之後如果有進入About頁面,就表示我們安裝成功囉!
(之後會補上如果要製作後台,並且有登入流程的router要怎麼設定)
zustand 狀態管理
現在大宗都還是使用 redux,但是 zustand 的下載量也有越來越多的趨勢,所以就來用用看,寫法也更簡潔。
安裝zustand
yarn add zustand
就做一個最簡單的點擊按鈕,數字加一來看看怎麼使用狀態。
src/stores/
下新增檔案useCountStore.js
import { create } from "zustand";
const useCountStore = create((set) => ({
count: 0,
increasePopulation: () => set((state) => ({ count: state.count + 1 })),
removeAllCount: () => set({ count: 0 }),
}));
export default useCountStore;
狀態和方法都是宣告在同一個create函式裡面。
接著改寫Home.jsx
把數字和按鈕加上去
import { Link } from "react-router-dom";
import { Button, Typography } from "@mui/material";
const Home = () => {
return (
<div>
Home
<br />
<Link to="/about">前往 About</Link>
<br />
<br />
<Typography variant="body1" gutterBottom>
count:0
</Typography>
<Button variant="contained">加一</Button>
</div>
);
};
export default Home;
在Home頁面引入zustand
import { Link } from "react-router-dom";
import { Button, Typography } from "@mui/material";
import useCountStore from "../stores/useCountStore";
const Home = () => {
const { count, increasePopulation } = useCountStore();
return (
<div>
Home
<br />
<Link to="/about">前往 About</Link>
<br />
<br />
<Typography variant="body1" gutterBottom>
count:{count}
</Typography>
<Button variant="contained" onClick={increasePopulation}>
加一
</Button>
</div>
);
};
export default Home;
設定別名 alias
vite也可以設定別名,原本我們引入檔案都是用相對路徑,例如:../../components/Header.jsx
這樣專案一大,我們前面的點點就要寫很多,當我們設定完別名,就可以寫成:@/components.jsx
/* eslint-disable no-undef */
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"),
},
},
});
要記得加入第一行那邊忽略global參數的錯誤喔! 不然你的 __dirname
可能會報錯。
延伸閱讀
專案製作完成,接下來就要部署到線上給客戶驗收囉!
參考其他文章:『使用 docker 部署 vite + react 靜態網站』
發表評論
想要加入討論嗎?請盡情發表您的想法!