从今天起到结赛都会是实战演练的环节了！

接下来的日子真枪实弹、弹无虚发，带大家从理论走向实践，把一些基本的元件实作出来吧！

这篇章会怎麽实作？

老样子我的风格是不会直接开始上 Code ，贴心如我当然是要来先带大家理解一下整个实作流程啦！

那主要就是以下四大步骤，分别会对应到的是 Interface/TS、HTML、CSS、JS/React！

1. 根据需求跟设计稿来实作 Interface
   • 元件的 API 该怎麽开、使用元件的开发者能怎麽用，以 React 来说就是 元件有哪些 Props
   • 这个阶段也会多多去参考其他 UI 元件库开了哪些 API 以及如何命名的。
2. 实作架构 — 组织元件会用到的 HTML Element
3. 排版与美化元件 — 撰写 Tailwind CSS（许多样式也会跟 Props 有依赖性，像是 Color ）
4. 元件的各种状态与自身的互动逻辑 — JS 跟 React （ onClick 和 Portal 之类的 ）

这边如同四大天王总是会有五个人的定律，这里其实也是有第五点（或是说第零点），那就是 Day 29 会介绍到的单元测试，之所以有可能是第零点的原因是走 TDD（测试驱动开发）的流程，但我并之前没走过 TDD 的流程，而详细做测试的几种方法我都会在 Day 29 跟大家好好说明清楚，并补上一些小 Demo ！

在知道怎麽去实作一个元件後，这篇章介绍的重点会放在 Interface 和 JS / React 的处理上，HTML 和 CSS 因为通常挺直觉的，因此有遇到特殊情况的时候才会提，如果好奇的话可以再去看 Github Source Code，而测试就更不用说，并不是这系列的重点，而且逐篇介绍也会有点冗长，就先集中到 Day 29 再说吧！

前言讲完了，那就事不宜迟开始吧！

Button

想先看 Code 或是 Demo 的由此去

Github Repo： ithelp-ui-demo

Live Demo：Button

Interface / API

一样先介绍一下它的介面会包含什麽：

在往後实作 Interface 都有一个重要的概念：

先继承原生 HTMLElement 的 Props 再来扩充需要的 Props！

到这边可能会有人问 Hover 的 onMouseEnter 和 onMouseLeave 的情况怎麽处理？

这时候就可以来观念厘清一下了，现在前端开发已经将元件根据功能切得挺细的，因此作为一个 UI 元件的 Button 功能就要很纯粹，他该做的事情就是被点击然後触发对应的行为。

至於提供 Hover 显示资讯这个功能的 UI 元件是 Tooltip，若是有更多客制化的需求可能比较适合手刻客制化，而不是去无限扩张 Button 这个 UI 元件，导致最後元件复杂到难以使用。

但当然，这是我参考的 Ant 、 Material 和个人开发经验的想法 ，实际上如果系统有很频繁地需要让 Button 在 hover 时多做点事的话，那放进去也是没有问题的，重点还是团队协作者或是让要使用 Button 的开发者能有一个共识。

元件实作

在 Button 的元件实作这边，可以看到主要都是在把 Props 转换成可以使用的 Tailwind Utility Class，主要是使用在 Typography 有讲到的键值对比对 和 简易的三元判断来实作。

比较值得看的就是在 prefix Icon 、 suffix Icon 和 loading 的处理了。

至此就完成 Button 的实作啦！

完整的程序码我有放在 Github Repo： ithelp-ui-demo

一样有做一个 Storybook Live Demo（待补） ，可以让大家玩玩看不同的 Props 变化：

另外也展示了一下其他的情境：

Button 讲完後顺便大放送把 IconButton 和 ButtonGroup 的实作讲一下！

IconButton

顾名思义就是把 Button 封装成可以单一 Icon 的形式。

Usage

<IconButton variant="outlined" size="small">
  <Icon icon={PlusIcon} />
</IconButton>

ButtonGroup

在 ButtonGroup 就没有 IconButton 这麽单纯了，但基本上也只是在把原本的 ButtonProps 整合在一统一给到其下的子 Button 们。

而新增的 Props 主要就 attached、spacing 和 orientation 三个：

介面实作

元件实作

这边比较需要注意的是用到 React.cloneElement 的概念，这个 API 是 React 让我们能复制传进来的 Children 用的。

会需要的原因是要统一管理子 Button 们，因此是把 Props 统一後再 Clone 时再赋予一次，这样的话不管使用者在 ButtonGroup 底下给了 Button 哪些重复的属性，都能够被 ButtonGroup 这边洗掉而以 ButtonGroup 给的值来呈现。

小结

第一篇的元件实作完成！可能一次塞得有点多东西希望读者们不会消化不良，也可以先存着等到之後要实作 Button 时在来看，程序码的部份就不讲太多细节，主要会以补充的方式来跟大家说实作过程中需要注意的点，若还是有不懂或是写错的地方就再麻烦各位读着们帮忙抓错了！