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


Posted by KevinCodePlace on 2020-12-18

程式範例

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

今日學習關鍵字

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

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

今日順序

  1. 開新專案
  2. 路徑設定
  3. 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 來用用!
Ant Design
記得要先下載

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;

看看成果

那這就是今天的內容了,明天呢就會實際來做登入機制,讓我們可以真的在登入頁面做登入登出囉!

回顧學習點

  1. create-react-app 或自己設定新專案
  2. react-router-dom 做出導覽功能
  3. 引入 Ant Design,讓畫面不再單調

程式範例

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


#ant design #react-router-dom #create-react-app #前端 #後端 #電商網站







Related Posts

JavaScript 的變數

JavaScript 的變數

AI輔導室|拒絕再畫傻瓜雙框線

AI輔導室|拒絕再畫傻瓜雙框線

Git 版本控制指令 與 vim 編輯器

Git 版本控制指令 與 vim 編輯器


Comments