[Day9] Reactstrap = Bootstrap in React，你看离 React 越来越近了吧

前言

昨天的文章带到 Reactstrap 的 Grid 写法，
不过当然不只有 <Container> <Row> <Col> 这样的写法罗！
今天就来把 Reactstrap Grid 做个更详细的介绍~~~
这边再 recap 一下~
Reactstrap = Bootstrap in React

Reactstrap - React Bootstrap 4 components

本日正文

用 Reactstrap 写 Grid

还记得之前在 Bootstrap 我们提到的 Grid + breakpoint 的写法吗？

<div class="row">
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">4</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">5</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">6</div>
</div>

用 Reactstrap Grid 可以这样改写：

<Container>
  <Row>
    <Col xs="6" md="3" lg="2" className="bg-info border py-2">1</Col>
    <Col xs="6" md="3" lg="2" className="bg-info border py-2">2</Col>
    <Col xs="6" md="3" lg="2" className="bg-info border py-2">3</Col>
    <Col xs="6" md="3" lg="2" className="bg-info border py-2">4</Col>
    <Col xs="6" md="3" lg="2" className="bg-info border py-2">5</Col>
    <Col xs="6" md="3" lg="2" className="bg-info border py-2">6</Col>
  </Row>
</Container>

有 Bootstrap Grid 的基础，
这边就不难理解，
也就是说：
比 xs 大的时候要占 6 个格子的宽度；(PS. xs 是最小的装置断点)
比 md 大的时候要占 3 个格子的宽度；
比 lg 大的时候要占 2 个格子的宽度。

这边顺道介绍一下，
CodeSandbox 本身有提供各装置浏览的模式，(跟 Chrome 的工具满像的)
点选右上角的「Toggle Responsive Preview」，
即可进到各装置的浏览模式，
也有选单可轻松切换这时候要 Desktop, Mobile 等。

所以我们就可以用这个来即时检查看看我们写的语法有没有达成我们要的效果~

拿这个例子来说，
一开始我先切成 Mobile，
一栏 6 个格子的宽度， 一列有两栏。

再来先切成 Desktop，
一栏 2 个格子的宽度，6 栏全部被摆在同一列。

而这边要特别说明一下，
CodeSandbox 一开始设置的 Tablet 解析度是 1024x765，
会直接踩进 lg 的范围里，
这边 CodeSandbox 也有提供编辑，
我将 Tablet 解析度改成跟 iPad 一致的 768x1024，
就会落到 md 的范围内了，

这时候我再把选项切换到 Tablet，
就会是落到 md 的范围，一栏 3 个格子的宽度，一列有 4 栏。

先前有提到，一开始我连 Bootstrap Grid 的概念都没有，
所以我看到 md="3", lg="2" 这种语法根本看不懂是什麽意思XD
现在你看我们先知道了 Bootstrap Grid，
再转换成 Reactstrap 写法後，根本就是无痛升级XD

Grid 还有一个地方没讲到，
等明天文章继续好了XD
(不然一次讲光我怕之後文章没东西可写orz)

附上本日 CodeSandbox → Day9 - Reactstrap

同场加映：如何在 CodeSandbox 写 Reactstrap(React)？

这边示范一下我怎麽在 CodeSandbox 写 Reactstrap(React)，
一开始进到 CodeSandbox 的页面是这样：

「New Sanbox」→ 「React」

然後会有很多 Project template 供你选择，
例如 Vue, Angular......
然後 Reactstrap 的基底是 React，
所以要写 Reactstrap 的话这边要选 React。

import Reactstrap, Bootstrap

开立一个 React template 的 project 後，
你可以看到左边的档案结构下在 src 里有三个档案：
App.js
index.js
styles.css

有兴趣的可以点开 index.js 看一下，
除了一些基本语法，会发现里面主要是引了 "./App" 的 component，
因此我们要改只要改 App.js 就好，
index.js 就把它当不会改变的基本架构。

但到这边你会发现就算拿了 Reactstrap, Bootstrap 的语法贴过去，
也会出现这样的 error：

Container is not defined
看起来它不认得 Container 是什麽。

因为你还没 import Reactstrap，
所以要在最前面加上这句：

import { Container, Row, Col } from "reactstrap";

但它依然出现 error：

其实这就跟我们在 local 端写 React 或 Bootstrap 的程序一样，
要先安装套件，
而这边我们要告诉它，它所使用的套件有哪些，
因此我们要在左边 Dependencies 的地方加入 reactstrap, bootstrap：

到这边还差一步，
你发现似乎有一些用到 Bootstrap class 的语法不 work，

其实这就跟我们在 CodePen 写 Bootstrap 一样，
因为我们有写到 Bootstrap 的 class 语法，
所以在最前面的地方要引入 Bootstrap 的 CSS (CDN)：

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

这样就大功告成~~~~~

对了，这边要特别提醒一下，
在 Bootstrap 的 class 设定是写成这样 class="..."，
但是在 Reactstrap 的 class 是写成 className="..."，
这边要特别注意！

(所以之後到 Bootstrap 查语法来用时，也要记得将 class 改成 className 哦~)
(我到现在有时还是会忘了改orz)

後记

现在才刚迈入第二周，
可是我怎麽有种最後一周的感觉orz
(到底能不能撑完 30 天啊~~~~~~~)