[Day30] 终於来到了这一天 ～ 第二次铁人赛完赛心得 && 梳理学习顺序

各位观众！！！我脱出了！！！！！！
羡慕忌妒恨吧(# (好啦没有，更多大大是 9/30 就完赛了XD)
能够撑到这天首先我要感谢我的亲友们....(咳咳，离题了)
其实这个系列文的产出应该要感谢鞭(ㄊㄨˊ)策(ㄉㄨˊ)我的前辈才对XD

今年铁人赛开赛前，
其实去年的队友们有在问说今年要不要报名，
但队友们纷纷表示今年比较忙先 PASS，
而我自己心里默默想要报名，
但真的驱动我报名的那根稻草(?)如同 Day1 文章说的，
那个「iThome 铁人赛 - IT 人的奥运会」文宣吸引来的XD

本来还想说去年队友会不会发现我今年偷偷报名的事，
但看来大家真的都很忙，
直到完赛这天还是没人发现XD
(等我 po 出这篇文章後自己去跟队友自首好了哈哈哈)

但今年真的有点忙，
其实中途也有几次想过真的想放弃，
加上今年我一个人单打独斗，
没有不发文会导致团灭的压力，
所以能够撑完这 30 天真的完全靠意志力XD
不过这 30 天文章对我来说是有收获的，
并不纯粹只是花时间写文章而已，
从中我也学到了一些我之前不知道的知识，
甚至我前几天写前端时还打开我文章起来参考呢XD

落落长前言(?)讲完了，
来做个系列文的 summary 吧！

今年这个系列文的标题是：
Re: 从 Next.js 开始的 React 生活

为什麽会下这个标题，
原因如同这个系列文的介绍所说，
大约去年铁人赛快结束时，
前辈跟我介绍 Next.js 要我开始研究，
告诉我 Next.js 是采用 React 的框架，
嗯然後，我前面文章也有提到，
在这之前我根本没学过 React，
连最基本的 JSX 语法，Bootstrap、Reactstrap 我都没学过啊啊啊啊啊~~~~~

所以我一开始连这样 Grid 的语法都看不懂~~~

<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>

更不要说是这样的 JSX 语法，

{status === 'initial' && (
        <>
          ... (略)
        </>
      )}

React 的 useState, useEffect 就更不用提了，
那对去年的我来说根本是无字天书XD

翻了一下去年 10 月的记录，我还曾经丢给前辈这样的讯息呢XD

我觉得 我 React React.js Bootstrap Reactstrap 傻傻分不清楚orz 上网找资料 有这些字眼的都看orz

就是因为什麽都还不会，所以连找资料都不知道从何找起的无助感XD

我的学习历程是以 Next.js 开始的，
然後才开始学 Bootstrap, Reactstrap, React XDDDDDDD

但我在这个系列文有重新理过我觉得对新手比较友善的学习过程：
Bootstrap → Reactstrap → React → Next.js

下面让我们一起回顾一下这个系列文的轨迹吧！

Phase 1 - 了解前端框架的好处

[Day2] 论前端框架的好处及重要性～从自己刻到学习共通语言（上篇）
[Day3] 论前端框架的好处及重要性～从自己刻到学习共通语言（下篇）

就我事後回顾的角度来说，
我觉得先让学习前端框架的新手知道使用前端框架的好处及重要性不是坏事，
因为我还记得我去年刚接触的时候还想说，
「CSS 我自己刻就好了啊，何必要学这些呢？」
後来发现我错了XD

Phase 2 - 学习 Bootstrap

[Day4] 学 Bootstrap 是为了走更长远的路 ～ 基本篇
[Day5] 学 Bootstrap 是为了走更长远的路 ～ Flex 篇
[Day6] 学 Bootstrap 是为了走更长远的路 ～ Grid 篇 (1)
[Day7] 学 Bootstrap 是为了走更长远的路 ～ Grid 篇 (2)
[Day8] 学 Bootstrap 是为了走更长远的路 ～ 下一站 ‧ Reactstrap

当然要直接跳过 Bootstrap 直接学 Reactstrap 不是问题，
但是除了 Grid 以外，Bootstrap 本身还是有提供很多语法可供使用，
所以还是得学，(不过如同我 Day8 文章说的，把 Bootstrap 当字典查就好XD)
既然还是得学，那不如学完再去学 Reactstrap 会比较好上手XD

Phase 3 - 学习 Reactstrap (+碰一点 React)

[Day9] Reactstrap = Bootstrap in React，你看离 React 越来越近了吧
[Day10] 学 Reactstrap 就离 React 更近了 ～ Grid 篇‧最终回（应该是？
[Day11] 排版的小孩子才做选择 ～ Grid 跟 Flex 我全都要！
[Day12] 学 Reactstrap 就离 React 更近了 ～ Component 的引入&使用
[Day13] 学 Reactstrap 就离 React 更近了 ～ Navbar ‧ 初识篇
[Day14] 学 Reactstrap 就离 React 不远了 ～ 用 Navbar 认识 useState
[Day15] 学 Reactstrap 就离 React 不远了 ～ 用 Tooltips 熟悉 useState
[Day16] 学 Reactstrap 就离 React 不远了 ～ 用 Tooltips 认识 useEffect
[Day17] 学 Reactstrap 就离 React 不远了 ～ 用 Spinners 搭配复习 Flex, useState, useEffect 三个愿望一次满足！

其实这也不只是在学 Reactstrap，因为 Reactstrap 是 将 Bootstrap 用 React 的语法包装起来，
所以用 Reactstrap 藉机碰一点 React 的东西，像是 useState, useEffect，
是很不错的学习方式。
其实我去年刚开始学的时候，
在我什麽都还不会的情况下就看到了 Reactstrap 的 <Navbar> component 语法：

<Navbar light expand="md">
        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/alerts/">关於我</NavLink>
            </NavItem>
            ... (略)
          </Nav>
        </Collapse>
      </Navbar>

我看到这些想说这是什麽XDDDDD
举凡 expand="md",<NavbarToggler>, <Collapse>.....
这些对我来说都是第一次看到的语法，
完全看不懂XD
(其实与其说是不懂，应该是说我连对这样的语法 sense 都没有orz)

所以我前面才要先用 Bootstrap 里的 Grid 来衔接切入 Reactstrap，
再拿一些比较简单的 component (Table, Badges, Tooltips) 来做切入，
才不会消化不良XD

Phase 4 - 从头打 React 基础

[Day18] 跟我一起从头学 React 吧！Let's start learning React from Codecademy! ～ Intro to JSX 篇
[Day19] 在 Codecademy 学 React ～ 恍然大悟！原来那些好用的语法都是来自 JSX
[Day20] 在 Codecademy 学 React ～ 如何宣告 Component 及使用 Component 的好处
[Day21] 在 Codecademy 学 React ～ What's this? This is "this"! 之 this.props 篇
[Day22] 在 Codecademy 学 React ～ 原来 useState 就是 this.state + this.setState 啊！
[Day23] 在 Codecademy 学 React ～ Component Lifecycle 生命周期我不懂你QQ
[Day24] 在 Codecademy 学 React ～ 终於来到 Hook 的世界 ‧ useState 篇 (1)
[Day25] 在 Codecademy 学 React ～ 终於来到 Hook 的世界 ‧ useState 篇 (2)
[Day26] 在 Codecademy 学 React ～ 你知道用 useState 就能完成简单小游戏吗？大家一起来玩终极密码吧！
[Day27] 在 Codecademy 学 React ～ 用 useEffect 为游戏加上计时功能吧！

这一段其实对我来说算有点意外XD
因为我也是在中途才突然发现 Codecademy 有 React 教学！
然後学了才发现原来 React 有三种写法，
我之前只会有 Hook 的那一种XD
难怪之前网路上很多范例的语法我看不懂orz
而且 Codecademy 超佛心，
前面先科普 JSX 语法，
(在学到这边之前有的写法我还误以为是 React 专属语法呢XD)
再循序渐进的把 React 慢慢教给你，
经过这边的洗礼後，
虽然不敢说完全懂了，
但至少看到像 this.props, this.state... 那种语法我不会再逃避了XD

Phase 5 - 快快乐乐用 Next.js

[Day28] 又回到最初的起点 ～ Next.js
[Day29] 倒数第二天～集大成！Next.js + React + Bootstrap + Reactstrap 十八般武艺（？）样样来，勇敢的上吧！

有了前面的基础再回来看 Next.js 根本就是「桌顶拈柑」！
(注：「桌顶拈柑」是台语谚语，用手指头拈取桌上的橘子，比喻事情极其容易。)
当然 Next.js 本身还有一些提供一些好用的语法，
像是 useRouter 可以拿来做网址参数的 query ......等等，
但我太晚让 Next.js 登场了，
所以来不及讲到XD
有兴趣的可以看之前大大在铁人赛写的 Next.js 系列文XD

回顾系列文，
觉得标题下得真好XD

Re: 从 Next.js 开始的 React 生活

我自己从 Next.js 开始了 React 的学习之路，
但我又 Re: 一次从头开始再慢慢走到 Next.js。

今年这个系列文虽然没有参加团体赛，
虽然浏览次数没有比去年多，
但是今年的参赛我自己觉得比去年还满意呢！

文章差不多来到尾声，
明年会不会参赛我真的不知道，
但哪那麽巧，
每次铁人赛都刚好在学新东西，
也许明年的铁人赛会写 Chakra UI 的学习文也说不定呢XD
(不要乱挖坑给自己跳啊!!!!!!!!!!)

那麽大家再会啦~~~~~
还在坑里的大大们加油~~~~~~
我出运啦XDDDDDD

最後再次贺 Re: 从 Next.js 开始的 React 生活 系列文完结洒花！！！
☆,::‧(￣▽￣)/‧:‧°☆
☆,::‧(￣▽￣)/‧:‧°☆
☆,::‧(￣▽￣)/‧:‧°☆

(当然要跟标题梗致敬一下XD)

Ado Lin @2021.10.02