Storybook และการทำ Component Specification

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้เราจะพูดถึงการเขียน Component Specification (Component Specs) ผ่าน Storybook กัน มาเรียนรู้กันว่า Component specs คืออะไร สามารถเขียนมันออกมาได้ยังไงบ้าง และ Storybook อำนวยความสะดวกต่อนักพัฒนาและ Designer ยังไงบ้าง มาเล่าสู่กันฟังผ่านหัวข้อนี้กันครับ

โดยหัวข้อนี้เราจะพูดถึง
1. พื้นฐาน Component specs ว่าประกอบด้วยอะไรบ้าง
2. แนะนำ Storybook และการลง Storybook เข้า Project (ผ่าน React)
3. รู้จักองค์ประกอบของ Storybook และ การทำ Testing บน Storybook
4. มาลองทำ Storybook ผ่าน 3 Components: Modal, Carousel, Register
5. เพิ่มเติมเรื่อง Mock Service Worker สำหรับใช้ร่วมกับการทำ Testing ต่อ API ใน Storybook

หัวข้อ
00:00 แนะนำหัวข้อ
01:48 การทำ Component specs คืออะไร ?
05:19 แนะนำ Storybook
07:25 เริ่มต้น project และลง Storybook
09:59 ทำความรู้จักหน้าตาของ Storybook ในแต่ละส่วน
21:20 แนะนำ Interaction Test ใน Storybook (การทำ Test)
26:24 เราจะทำอะไรใน Session นี้บ้าง / ลง Tailwind
28:08 ลง Tailwind ใน Storybook
30:45 1. Modal Component - แนะนำ Component
35:22 1. Modal Component - เขียน Storybook
42:26 2. Carousel Component - แนะนำ Component
45:39 2. Carousel Component - เขียน Storybook
48:54 3. Register Component - แนะนำ Component
51:31 3. Register Component - case ที่จะเขียน Interaction test
52:29 แนะนำ MSW (Mock Service Worker)
54:32 3. Register Component - เขียน Storybook
1:00:36 สรุปหัวข้อทั้งหมด (และกล่าวถึง Member เล็กๆน้อยๆ)

สามารถอ่าน Blog เพิ่มเติมได้ที่
https://mikelopster.dev/posts/react-s...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

แปะพิกัดของที่ผมใช้
https://shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
https://shope.ee/6fI75UuLEM osmo pocket 3
https://shope.ee/4VDcVixCW9 ไมค์ shure
https://shope.ee/6pbXI6d5xG กล้องวงจรปิด

Enjoy ครับ 😘