[Day-2]從電商網站學導覽列表

程式範例

[Day-2]從電商網站學導覽列表 @CodeSandbox

今日學習關鍵字

create-react-app / react-router-dom / Ant design

今天主要從零開始打造一個 React APP，並且做出能夠點擊導覽列就成功使用分頁的功能。所以有三大重點

今日順序

開新專案
路徑設定
Ant design 找好看的 icon

事不宜遲，那就開始

第一步：開新專案

打開終端機輸入以下指令

npx create-react-app mern-ecommerce //最後面這個是專案名稱，可以自訂

就會在對應位置出現一個資料夾，而裡面就會有我們開發所需要的資料。（延伸閱讀：如何不使用 create-react-app 自己打造應用程式）

第二步：路徑設定

主要這裡會使用的是 react-router-dom，首先先到 terminal 安裝

npm install react-router-dom

而 react-rourter-dom 的基本用法如下

//首先引入需要的三個功能
import {BrowserRouter, Switch, Route} from 'react-router-dom';

 <BrowserRouter>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
     </Switch>
  </BrowserRouter>,

當今天感應到網址列的不同，就會跑到對應的 component。
而在導覽列上，就需要透過 <Link>，讓我們可以點擊到登入的時候，可以跳到 /login，並且看到 Login 這個 component 的內容

簡單來看導覽列 Header 的程式碼

const Header = () => {
  return (
      <div>
        <button>
        <Link to="/">Home</Link>
        </button>
        <button>
        <Link to="/login">Login</Link>
        </login>
        ...
      </div>
  );
};

export default Header;

那這樣網址列導覽就大功告成拉！

給自己的延伸小挑戰：用 react-router-dom 新版本 v6 做到一樣的事情
主要是 Switch 變成 Routes

import {BrowserRouter, Routes, Route} from 'react-router-dom';

 <BrowserRouter>
    <Routes>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
     </Routes>
  </BrowserRouter>,

第三步：Ant design

我們總是不希望網站太多呆版，於是我們到 Ant Design 找些好看的 icon 來用用！

記得要先下載

npm install antd @ant-design/icons

主要是 Header 的導覽列我們希望有個圖示，用法主要是可以到 Ant Design 上面看看導覽列的樣式，找到喜歡的就 import { Menu } from "antd"; 並且找到喜歡的 icon 之後，就把 icon 的名字也 import 近來，用法像是 import { UserOutlined } from "@ant-design/icons";，那都改完之後就可以看到脫胎換骨的導覽列拉，最後要注意如果要使用 Ant Design 一定要加上import "antd/dist/antd.css"; ，那我們就來看看實際的 code吧！
（這裡有偷偷使用 state 去紀錄點擊到哪個頁面，讓我們可以停在頁面的時候顏色反灰）

import React, { useState } from "react";
import { Menu } from "antd";
import {
  AppstoreOutlined,
  SettingOutlined,
  UserOutlined,
  UserAddOutlined
} from "@ant-design/icons";
import { Link } from "react-router-dom";

const { SubMenu, Item } = Menu;

const Header = () => {
  const [current, setCurrent] = useState("home");

  const handleClick = (e) => {
    setCurrent(e.key);
  };

  return (
    <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
      <Item key="home" icon={<AppstoreOutlined />}>
        <Link to="/">Home</Link>
      </Item>

      <Item key="register" icon={<UserAddOutlined />} className="float-right">
        <Link to="/register">Register</Link>
      </Item>

      <Item key="login" icon={<UserOutlined />} className="float-right">
        <Link to="/login">Login</Link>
      </Item>

      <SubMenu icon={<SettingOutlined />} title="Username">
        <Item key="setting:1">Option 1</Item>
        <Item key="setting:2">Option 2</Item>
      </SubMenu>
    </Menu>
  );
};

export default Header;