React網頁上添加一些Material UI

今天要繼續建立第一個React專案這篇繼續實做下去，創建一個網頁專案以後，就可以開始去使用一些 UI 套件，這有效提升在快速開發的工作上面。

而這次要使用的叫做 Material UI，我想在網路上搜尋可能會看到非常多的人分享，所以資源也算是相當的多，如果你覺得操作上面很麻煩，也可以參考 Bootstrap，我想這也是非常容易上手的。

安裝Material UI套件

今天使用的是 Windows11 的系統，如果是 MacOS 的話或許更為簡單。

透過終端機打開 React 專案資料夾，然後輸入下方的指令即可。

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

# 如果你需要使用 Material IU 提供的 icon 也可以安裝
npm install @mui/icons-material

最近有一個小小專案想要來實作一下也順便把過程記錄下來。

這個網頁用途個人目標管理系統，主要是方面查看和紀錄自己所定義的目標有沒有完成。

設計你的網頁架構

這一部分你就需要先為你的網頁版面上做一下簡單設計，今天我希望在網頁上有一個 NavBar，如果之後有分不同的網頁畫面的話，可以直接在上面做一個連結來使用。

另外我希望在畫面上要有幾個按鈕，會包括新增，刪除和修改。

如果是繼續建立第一個React專案這篇文章的實作，此時，我們的專案是一片空白頁面，包括你從瀏覽器打開的 localhost:3000 (已經沒有 React 的 log 囉)。

目前專案的結構：

./src
│  index.css
│  index.js
└─ page

# index.js
import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 


const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(
    <React.StrictMode> 
    </React.StrictMode> 
);

建立page和components資料夾

./src
│  index.css
│  index.js
│
└─page
    ├─home
    │  │  index.js
    │  │
    │  └─components
    │      └─appbar
    │              index.js
    │
    └─person

• home index.js

// home - indes.js
import React from "react";
import ButtonAppBar from "./components/appbar";


const Home = () => {
    return (
        <div>
            <ButtonAppBar />
        </div>
    );
};

export default Home;

• appbar index.js

// appbar index.js
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

這時候你就可以從瀏覽器上面看到第一個 App bar 囉。

依照這樣的目錄結構可以為我們往後專案變大以後更好的管理和查找。

在畫面中加入一個 Container

用途是將主畫面的內容都放在藍色框框中，可讓畫面上新增的原件都塞在這個 Container 當中。

寫法非常簡單，只需要在 home index.js 上面 import 這一個 container 即可。

// home - indes.js
import React from "react";
import ButtonAppBar from "./components/appbar";
import { Container } from "@mui/system"; // add here

const Home = () => {
    return (
        <div>
            <Container> // add here
                <ButtonAppBar />
            </Container> // add here
        </div>
    );
};

export default Home;

這邊要注意，我們導入進來的原件，你是需要將它給包起來，這樣壞面才會渲染這個元件。

看起來就會長得像這樣，它會鎖住邊寬讓畫面只能呈現在這個區域中。

以上你就已經完成將 Material UI 上面所提供的元件給成功加入到你的 React 專案裡面，你也可以開始嘗試看看各種元件的加入，並設計自己想要的樣子。