[Day1] iThome 铁人赛，I'm back!!!!!!!!!!

一样是不免俗的前言

这次是第二次参加，
去年还懵懂无知(?)的情况下就被队友推坑来参加铁人赛，
去年我们是五人团，
可惜今年只剩我一人参加了XD
(PS1. 我并没有跟去年的队友告知说我今年有参加的这件事XD"
但也许过几天他们就会发现了也说不定XD)
(PS2. 今年其实大家都比较忙，
但我不会说我是因为刚追完奥运就看到铁人赛的文宣被吸引报名的XD
(为了不占版面，我把文宣图移到本文章最下方XD)
这也是我不敢跟团员说我有偷偷报名的原因XD)

今年的 30 天系列文准备要写什麽呢？

去年的最後一篇文章有提到我那时候正好在接触 Next.js，
是以 React 为基底的套件，
後续刚好有机会参与前端的撰写(?)工作，
但是前期我实在吃足了苦头，
去年的文章有提到我是写纯 HTML/CSS (跟 Javascript) 起家(?)的，
所以不要说 React，在那之前 Bootstrap 我也没怎麽碰过，
Reactstrap 是把 Bootstrap 的语法用 React 的语法包装起来。
但当下对我来说这些都算是刚接触的新东西、新知识，
所以当时我几乎是 Bootstrap, React, Reactstrap 傻傻分不清楚orz

我记得我一开始连 Bootstrap 的 mb-4, p-2 这种语法都看不懂，
更不要说 Bootstrap 很重要的 Grid 概念，
Container, Row, Col 根本不知道是什麽要怎麽用XD

(PS. 在 Bootstrap 的世界 Grid 是用 class 的方式写成这样：

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
  </div>
</div>

可参考→ 网格系统 (Grid system)
我相信以上的写法是跟我当初一样只写过纯 HTML/CSS 比较看得懂的样子XD)

Reactstrap 把以上的语法包装成这样：

<Container>
  <Row>
    <Col>.col</Col>
  </Row>
</Container>

可参考→ Layout Components (Container, Row, Col)

但是光是这样为什麽我会吃足苦头，
因为带我进门的前辈在我以上观念都还没建立起来时，
就直接叫我学这个写法：

<Row>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col md="4">.col-md-4</Col>
</Row>

md 是什麽啦XD 这是什麽根本看不懂XD
这就跟叫刚学日语的人，而且是刚学会五十音的情况下，
就叫他学动词变化是一样的心情XD

所以我想要透过这 30 天的文章把我去年刚接触 Next.js, React, Bootstrap, Reactstrap 这段历程记录下来，
然後最後再把学习这些东西的顺序厘清出来，
除了是复习之外，
也希望让之後跟我遇到一样问题的人不会跟我一样雾煞煞XD
(feat. 以写铁人赛之名，行表前辈之实 XDDDDDDDDDD)

後记

其实会挑今天开赛是有特别的原因哦，
因为今天是我前公司离职满三周年的日子!!!!!!!!
(feat. 跟现在夥伴们认识满两周年的日子XD)
(feat. 知世就是力量的知世生日XD)

为了庆祝 9/3 这麽意义非凡的日子，
所以我决定今年挑 9/3 开赛XD
今年没有参加团体组，
其实我超怕我中途弃赛XD
请参加铁人赛的各位战友们、夥伴们多多指教(及鞭策小的)XD

传说中吸引我报名的文宣图

去年完赛已经拿下第一面奖牌了，今年我要再拿下一面奖牌!!!!!!!!!!!!!!
Fighting!!!!!!!!!!!!!!!!!

(PS. 抱歉小戴的贴图借我用一下XD 但怕有打广告嫌疑这边就不放上贴图连结，
有兴趣的大家可以自行搜寻XD)