tags: 2021鐵人賽 React

使用 Creat react app

對於React的初學者來說，create react app是最好的朋友，可以快速的建立好react的開發環境，因此這邊就使用一行code開啟專案旅程。

npx create-react-app investment-dashboard

切割 Components

根據上一篇的wireframe，因為排版非常簡單，就先設計三個components，如下圖：

開始寫程式拉

1.專案架構，src內設置components資料夾放子元件

2.在App主檔內import這些元件

App.js

import './App.css';
import Navbar from './components/Navbar/Navbar';
import Selector from './components/Selector/Selector';
import Charts from './components/Charts/Charts';

function App() {
  return (
    <div className="App">
      <Navbar />
      <Selector />
      <Charts />
    </div>
  );
}

export default App;

3.寫子元件，這邊會使用到react-bootstrap套件，是為了使用bootstrap的功能，另外子元件的CSS設定方式，則是採用CSS module的方式，因為我自己是比較喜歡把css檔跟jsx分開來寫，也要避免CSS檔之間用到相同命名的元素。

因為程式碼蠻多的，這邊僅舉較簡單的Selector部份呈現，其他則是放在GitHub。

Selector/Selector.js

import React from 'react';
import styles from './Selector.module.css';
import Form from 'react-bootstrap/Form';
import { Row, Col } from 'react-bootstrap';

const Selector = () => {
  return <Row className={styles.selector}>
    <Col sm={12} md={6} lg={4} className={styles.selectorItem}>
      <Form.Select aria-label="Default select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </Form.Select>
    </Col>
    <Col sm={12} md={6} lg={4}>
      <Form.Select aria-label="Default select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </Form.Select>
    </Col>
  </Row>
};

export default Selector;

Selector/Selector.module.css

.selector {
  margin: 1rem;
}

.selectorItem {
  margin-bottom: 0.5rem;
}

完成專案基礎排版

1. 手機畫面尺寸，設定為小於576px
   

2. 平板畫面尺寸，設定為576~992px
   

3. 電腦畫面尺寸，設定為大於992px
   

今天就先寫到這邊，接下來就要開始串接API把圖給畫出來拉！