จาก blog เรื่อง Part 1 :: เริ่มต้นเรียนรู้ไปกับ React นั้น
มีคำถามต่าง ๆ เกิดขึ้นมาคือ
เมื่อเราทำการออกแบบ และ สร้าง Component ต่าง ๆ ขึ้นมาแล้ว
จะรู้ได้อย่างไรว่า
- สิ่งที่เราออกแบบมันดีพอ ?
- สิ่งที่เราออกแบบมันใช้งานง่ายหรือไม่ ?
- สิ่งที่เราอออกแบบมันทดสอบได้ง่ายหรือไม่ ?
- สิ่งที่เราออกแบบทำงานได้อย่างถูกต้องในกรณีต่าง ๆ หรือไม่ ?
- จะทดสอบและตรวจสอบการทำงานในแต่ละ component อย่างไร ?
วันนี้น้องในทีมได้แนะนำ Storybook
ซึ่งมันสามารถตอบโจทย์ต่าง ๆ ได้ดีพอสมควร
จึงทำการทดลอง และ สรุปการใช้งานไว้นิดหน่อย
เริ่มต้นด้วยการติดตั้ง Storybook
$npm i -g getstorybook
เพื่อความง่ายจึงทำการแปลง project จากตัวอย่างใน Part 1 :: Hello React
มาอยู่ในรูปแบบ project ที่สร้างด้วย Create React App
โดย code ตัวอย่างสำหรับ blog นี้อยู่ที่ Github::React with storybook
แล้วเริ่มใช้งาน Storybook ด้วยคำสั่ง
$getstorybook
ผลที่เกิดขึ้นคือ ทำการสร้างไฟล์ configuration ของ Storybook
ซึ่งอยู่ใน folder .storybook
จากนั้นทำการ run Storybook ด้วยคำสั่ง
$npm run storybook
สามารถเข้าใช้งานผ่าน browser ด้วย url=http://localhost:9001
แสดงดังรูป
แถมยังมี keyboard shortcut ให้ใช้งานอีกด้วย
จากนั้นจึงเริ่มสร้าง story ต่าง ๆ ใน Storybook
เพื่อใช้สร้าง story ของแต่ละ component นั่นเอง
โดยสามารถกำหนด path ของ story ต่าง ๆ ในไฟล์ .storybook/config.js
ในตัวอย่างจะเก็บไว้ใน folder /src/stories
ซึ่งสามารถเพิ่มได้เรื่อย ๆ นะ
ดังนี้
เมื่อจัดการเรียบร้อยก็ถึงเวลาสร้าง Story ของแต่ละ component กัน
เริ่มด้วยการสร้าง story สำหรับ Profile component
ซึ่งจะส่งข้อมูล Hello ผ่าน props เข้ามา
แสดงผลการทำงานดังรูป
จะเห็นได้ว่าเราสามารถส่งข้อมูล เปลี่ยน state ต่าง ๆ
จากนั้นดูว่า แต่ละ component ทำงานตรงตามที่เราต้องการหรือไม่ ?
แถมทำให้เรารู้ได้ทันทีว่า component ที่สร้างนั้นมันทดสอบได้ยากหรือไม่ ?
หรืออาจจะทำให้รู้ว่า เราออกแบบผิดได้อย่างรวดเร็ว
จากนั้นเขียน Story ของ component อื่น ๆ ด้วย ดังนี้
แสดงผลการทำงานดังรูป
สุดท้ายแล้วจากการรู้จัก Storybook เพียงเล็กน้อย
คิดว่ามันน่าจะช่วยทำให้การพัฒนาระบบด้วย React สนุกขึ้นอย่างมาก
แถมยังมีความสามารถอีกเยอะเลยเช่น Addon
ทำให้การใช้งานสนุกและสะดวกสบายมากขึ้น
ลองเข้าไปดูเพิ่มเติมได้ที่ Storybook documentation
ปล.
เทคนิดสำหรับการออกแบบ Component คือการมองจากภาพใหญ่ลงไปยังส่วนเล็ก ๆ
แต่สำหรับการสร้าง component จะสร้างจาก component ที่เล็กที่สุดออกมา
เนื่องจากมี dependency น้อยที่สุด และ สร้างได้ง่ายที่สุด
