tags: 2021鐵人賽 React

一般來說刻板前應該會需要畫個wireframe會比較清楚一些，不過時間有限，就在紙上畫一畫就先開始寫code吧，先達成功能目的，之後再來修版型，下面就開始寫囉。

新增台股技術面Component

首先在components資料夾內新增TaiwanStockTA資料夾，相對路徑為src\components\TaiwanStockTA，結構如下：

簡單的將台股技術面這一頁分解成兩塊，分別是標題列(Title)及K線圖頁面(KBarChart)，另外也將歷史資料製作成dummyData.json作為call api之前測試資料圖像化使用。

修改導覽列及選單列表

因為多了一個頁面，因此在導覽列及手機版面的選單列表也要同時新增路徑，讓使用者可以進到這個頁面。

• 修改導覽列
  src\components\Navbar\Navbar.js

import React, { useState } from 'react';
import styles from './Navbar.module.css';
import Navbar from 'react-bootstrap/Navbar';
import svgIcon from './navbaricon.svg';
import Nav from 'react-bootstrap/Nav';
import Burger from '../../UI/Burger/Burger';
import Menu from '../../UI/Menu/Menu';

const Topbar = (props) => {
  const [open, setOpen] = useState(false);

  return (
    <Navbar className={styles.navbar}>
      <Navbar.Brand className={styles.title} href="/">
        <img
          alt=""
          src={svgIcon}
          width="30"
          height="30"
          className="d-inline-block align-top"
        />{' '}Invsetment Dashboard
      </Navbar.Brand>
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="me-auto" activeKey={props.path}>
          <Nav.Link href="/" className={styles.link}><p>首頁</p></Nav.Link>
          <Nav.Link href="/macroeconomics" className={styles.link}><p>總體經濟</p></Nav.Link>
          <Nav.Link href="/taiwanstockta" className={styles.link}><p>台股技術面</p></Nav.Link>
        </Nav>
      </Navbar.Collapse>
      <Burger open={open} setOpen={setOpen} />
      <Menu open={open} setOpen={setOpen} />
    </Navbar>
  );
};

export default Topbar;

• 修改選單列表
  src\UI\Menu\Menu.js

import React from 'react';
import { bool } from 'prop-types';
import { StyledMenu } from './Menu.styled';

const Menu = ({ open }) => {
  return (
    <StyledMenu open={open}>
      <a href="/">
        首頁
      </a>
      <a href="/macroeconomics">
        總體經濟
      </a>
      <a href="/taiwanstockta">
        台股技術面
      </a>
    </StyledMenu>
  )
}

Menu.propTypes = {
  open: bool.isRequired,
}

export default Menu;

修改路由檔

要透過相對路徑要對應到正確的頁面，就需要透過路由檔的設定，因此修改App-route.js這個檔。

src\App-route.js

import Home from "./components/Home/index";
import Macroeconomics from "./components/Macroeconomics/index";
import TaiwanStockTA from './components/TaiwanStockTA/index';

//
const routes = [
  {
    key: "route-home",
    name: "home",
    path: "/",
    withHeader: true,
    withFooter: true,
    public: true, // 若在維護開發中請設定 false
    authority: null,
    component: Home,
  },
  {
    key: "route-macroeconomics",
    name: "macroeconomics",
    path: "/macroeconomics",
    withHeader: true,
    withFooter: true,
    public: true, // 若在維護開發中請設定 false
    authority: null,
    component: Macroeconomics,
  },
  {
    key: "route-taiwanstockta",
    name: "taiwanstockta",
    path: "/taiwanstockta",
    withHeader: true,
    withFooter: true,
    public: true, // 若在維護開發中請設定 false
    authority: null,
    component: TaiwanStockTA,
  }
];

export default routes;

刻板完成

新增了component，加上超連結，路徑檔也寫好之後，基本上頁面就可以運作囉，來試試看吧！

• 手機版頁面
  

• 電腦版頁面

小結

這篇先用歷史資料測試看看版面是否能正常運作，下一篇就會來接上API，讓使用者輸入股票代碼，按下送出之後就可以看到對應的K線圖囉。