用React刻自己的投资Dashboard Day3 - React专案初始架构

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把图给画出来拉！