[Day12] 学 Reactstrap 就离 React 更近了 ～ Component 的引入&使用

前言

本来今天文章就打算介绍很常使用的 Navbar，
但发现这样难度又一下子跳上去了，
(因为会牵扯到 useState)
所以今天还是再介绍 Component，
顺便也让大家感受一下接触到一个新的 Component 怎麽引入及使用，
这样之後自己要找 Component 来使用也不会是太大的问题罗~

本日正文

Component - Table

今天要介绍的 Component 是 Table，
之所以挑这个也是因为它的语法跟原本我们写 HTML 的 <table> 很像，
用它来学如何使用 Reactstrap 的 Component 应该是最适合不过了~

使用 Table 的起手式很简单，
一开始记得引入 Table 的 component，
import { Table } from "reactstrap";
再来就跟原本 HTML 写 <table> 差不多的语法将 <thead>, <tbody> 填入即可，
像这样：

<Table>
     <thead>
       <tr>
         <th>学生姓名</th>
         <th>英文成绩</th>
         <th>数学成绩</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>A君</td>
         <td>88</td>
         <td>77</td>
       </tr>
       <tr>
         <td>B君</td>
         <td>99</td>
         <td>66</td>
       </tr>
       <tr>
         <td>C君</td>
         <td>60</td>
         <td>98</td>
       </tr>
     </tbody>
   </Table>

也许这样你会说，
那我用原本 HTML <table> 的写法不就好了，
何必要用 Reactstrap 的 Table component？

其实 Reactstrap 的 Table component 有提供一些属性，
可以让你很方便的弄出表格的样式，
例如 现在我在 Table 加上 striped，
马上就变成我们常见的黑白相间表格，让人易於阅读。

<Table striped>
... (略)
</Table>

又或者现在我又加上 bordered，
每一栏就被加上了框线。

<Table striped bordered>
... (略)
</Table>

又或者现在我想要的表格不要有任何线条，
那就将 bordered 改成 borderless，
像这样：

<Table striped borderless>
... (略)
</Table>

甚至我想要让表格 hover 到那一行才变色，
这也是加上一个属性 hover 就可以办到，
像这样：

<Table border hover>
... (略)
</Table>

这些样式的修改都可以透过加减属性很轻易的办到，
不用再像以往可能要在 CSS 写好几行设定才能做到。

然後 Table 还有一个 responsive 的属性，
这边我把 Table 装在一个比较小的 <div> 大家可能比较看得出差异。
我故意设了一个宽度 50% 的 <div>，
(w-50 也是 Bootstrap 有提供的 class 设定，有兴趣的可以参考这个 → Sizing)
把 Table 放在里面：

<div className="w-50 border">
      <Table border hover>
          <thead>
            <tr>
              <th>学生姓名</th>
              <th>英文成绩</th>
              <th>数学成绩</th>
            </tr>
          </thead>
          <tbody>
            ...(略)
          </tbody>
        </Table>
    </div>

然後我故意将画面宽度缩到很小，
你会发现表格挤到变形：

但如果现在我在 Table 加了responsive 的属性，
Table 在被挤到无法完整呈现的宽度时，
就会出现可供滚动的网页卷轴 (scrollbar)，
像这样：

这意思是它会根据容器宽度去做去相应的 responsive 行为。

Component - Badges

然後今天如果只讲一个 Table 好像太少XD
再介绍一个不会用到 useState 的 component - Badges，
顾名思义就是标签，
常用在标记项目的数量，
例如现在我们想要把这个阳春的项目列表上的数字改成比较漂亮的颜色标记该怎麽做？

这边我们先把阳春的列表用 <ul> <li> 长出来，
像这样：

<div className="mt-4 px-4">
    <ul className="list-unstyled">
      <li>台北市(26)</li>
      <li>新北市(1)</li>
      <li>基隆市(10)</li>
      <li>桃园市(29)</li>
      <li>新竹市(12)</li>
    </ul>
</div>

(PS. list-unstyled 也是 Bootstrap 提供的 class 设定，
<ul> default 会有项目符号的圆点，
用 list-unstyled 就可以移除项目符号，
有兴趣可参考这里 → Lists-Unstyled )

然後我们要记得把 Badge import 进去：
import { Table, Badge } from "reactstrap";

接着就是把数字的地方改成 Badge，像这样：

<li>
    台北市
    <Badge className="bg-primary" color="primary">
      26
    </Badge>
</li>

(PS. 不知道为什麽我在 CodeSandbox 上写 Badge 的 color 属性没有作用，所以加了 className="bg-primary" 让它显示出来)

然後再把其他行的数字也改成 <Badge>，
像这样：

<ul className="list-unstyled">
          ... (略)
  <li>
    桃园市
    <Badge className="bg-primary" color="primary">
      29
    </Badge>
  </li>
  <li>
    新竹市
    <Badge className="bg-primary" color="primary">
      12
    </Badge>
  </li>
</ul>

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

今天示范了两个 Component - Table, Badge 如何使用，
一方面是想让大家知道如何在 Reactstrap 里引入 Component 使用以外，
另外一方面是想让大家感受到直接使用 Component 的好处，
直接用别人已经写好的 Component 很方便，
再来就是之後别人要维护 code 也比较简单~
(还有一点就是，符合 "语意" 吧XD
当然数字的颜色标记你说我用 <div> 加上 bg-xxx 的 class 不就可以达成了，
但如果你用 <Badge> 就可以让人一眼明白这边是标签的作用。)

从明天开始要进入更进阶的 Component 使用了~
也是我之前刚接触时觉得有很多疑惑的地方，
那就明天见啦~~~~~

附上今日 CodeSandbox：Day12 - Reactstrap (Table, Badge)

後记

结果这几篇文的走向好像有点偏向 Reactstrap 教学文了(?
也可以算啦，只是我不会把 Reactstrap 全部走过一次就是了XD
明天应该就会介绍 Navbar，
这个 Component 就会用到 useState，
算是 React 重要的概念之一，
你看我没有偏离轴心，继续往 React 的航道迈进！