iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

用React刻自己的投資Dashboard系列 第 27

用React刻自己的投資Dashboard Day27 - 台股技術面刻板

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線圖囉。


上一篇
用React刻自己的投資Dashboard Day26 - 台股技術面功能規劃
下一篇
用React刻自己的投資Dashboard Day28 - 串接台股技術面API
系列文
用React刻自己的投資Dashboard30

尚未有邦友留言

立即登入留言