iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1
Modern Web

React + GraphQL 全端練習筆記系列 第 6

仿Trello - 使用React Bootstrap

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。

要在React中使用Bootstrap套件,可以像一般安裝一樣,在index.html引入css跟scripts,然後在dom的class上代入關鍵字使用,不過另一個比較推薦的選擇是使用React Bootstrap,這個套件把Bootstrap components全部重製成React component的模式,讓人不另外載入script或jquery,用加載React component的方式就能使用。

不過React bootstrap就只有component功能而已,style的部分要另外從bootstrap載入。

建立看板部件

在開始使用前先把App架構整理一下,建立看板基礎的component。
把App.js裡的JSX清理到剩下根部件。

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

然後在src底下建一個components資料夾,之後建立的React components就放這。

在components資料夾底下建立KanBan.jsx

這裡有兩點筆記:

  1. 副檔名用.jsx或.js其實對編譯沒有差別,只是一般建議有用到JSX的話副檔名用.jsx,純javascript用.js。
  2. React component的字首必須是大寫,字首小寫會被判定成原生html標籤。

在KanBan裡寫入

// KanBan.jsx
import React from "react"; //要載入react,JSX才能被編譯

export default function KanBan() {
  return <div>Hello world!</div>;
}

這樣就做成一個最基本的 function component,然後到App.js裡掛載:

// App.js
import React from "react";
import KanBan from "./components/KanBan"; //載入component

function App() {
  return (
    <div className="App">
      <KanBan/> //把component掛到App底下
    </div>
  );
}

export default App;

http://localhost:3000/ 上就能看到 Hello world! 了。

安裝 React bootstrap

安裝套件指令:

npm install react-bootstrap bootstrap

雖然上一篇已經裝過bootstrap了,不過為展示完整的React bootstrap安裝方式這裡還是加進來。

使用 React bootstrap

React bootstrap 提供的就是一個個component,使用時就像一般加載component一樣。

這邊先直接使用Navbar範例:

//KanBan.jsx
import React from "react";
import {
 Navbar,
 Nav,
 NavDropdown,
 Form,
 FormControl,
 Button,
} from "react-bootstrap";//導入需要的component

export default function KanBan() {
 return (//以下整個是官網的NavBar範例
   <Navbar bg="light" expand="lg">
     <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="mr-auto">
         <Nav.Link href="#home">Home</Nav.Link>
         <Nav.Link href="#link">Link</Nav.Link>
         <NavDropdown title="Dropdown" id="basic-nav-dropdown">
           <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.2">
             Another action
           </NavDropdown.Item>
           <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
           <NavDropdown.Divider />
           <NavDropdown.Item href="#action/3.4">
             Separated link
           </NavDropdown.Item>
         </NavDropdown>
       </Nav>
       <Form inline>
         <FormControl type="text" placeholder="Search" className="mr-sm-2" />
         <Button variant="outline-success">Search</Button>
       </Form>
     </Navbar.Collapse>
   </Navbar>
 );
}

畫面:

以往用class定義的bootstrap component改為載入React component後寫在JSX中,而相關的事件像是展開collapse,也都已經寫在這些component裡了,不用載入另外的script。

一定要先導入需要的Component不然JSX可不認得這些tag。

另外像是排版用的container,row,col也都是component:

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

調整col寬度的方式是用代入props的方式做成:

<Container>
  <Row>
    <Col sm={8}>sm=8</Col>
    <Col sm={4}>sm=4</Col>
  </Row>
</Container>

這邊sm是視窗寬度的標籤,就像原生Bootstrap一樣有五個大小(xs, sm, md, lg, xl),所以可以在不同視窗寬度下指定不同的大小。

另外offset、order等一些屬性也是用props帶入,不過不是全部的屬性都有,像是置中還是要用class的方式代入:

<Container>
  <Row className="justify-content-center"> //水平置中
    ...
  </Row>
</Container>

這邊只列舉一些React Bootstrap與原生Bootstrap使用上不同的部分,
詳細還是要根據每個component參照範例使用。

題外話

從範例可以看到像是

 <Navbar.Collapse id="basic-navbar-nav">

這樣帶點的標籤,這是方便把一組Component打包成一個,import時只要寫一行的方法,簡單例子:

// Text.jsx

import React from "react";

//分別定義兩個Component
const Sub = () => {
  return <div>TestSub</div>;
};

const Main = () => {
  return <div>Test</div>;
};

Main.Sub = Sub; //定義子組件

export default Main;

// App.jsx

import React from "react";
import Main from "./components/Test";

function App() {
  return (
    <div className="App">
      <>
        <Main></Main>
        <Main.Sub></Main.Sub>//呼叫子組件
      </>
    </div>
  );
}

export default App;

畫面:

子組件不一定要寫在主組件中,也能在主組件import子組件後再定義

import React from "react";
import Sub from "./Sub.jsx"

const Main = () => {
  return <div>Test</div>;
};

Main.Sub = Sub;

export default Main;

References:


上一篇
仿Trello - 添加 Stylesheets
下一篇
仿Trello - 建立基礎 List 部件
系列文
React + GraphQL 全端練習筆記30

尚未有邦友留言

立即登入留言