Story Book คือ ตัวรวม Component ไว้สำหรับให้ Designer ตรวจสอบ Component เราว่าทำออกมาได้เหมือนตามที่ Designer ต้องการไหมโดยจะแยกเป็นชิ้นๆ แล้วรวมไว้ที่เดียว Designer สามารถกดดู Component ทีละตัวได้ หรือ ประโยชน์อีกอย่างทาง Dev อาจจะเอาไว้ดูว่าตอนนี้ Project เรามี Component อะไรบ้าง เพื่อป้องกันการทำ Component หน้าตาเหมือนกันซ้ำออกมา

เริ่มแรกติดตั้งตัว  Stoybook ก่อน

หลังจากนั้นเข้าไปที่โปรเจค React ที่เราต้องการทำ Storybook แล้วพิมพ์คำสั่ง

เซฟมันเพิ่มเข้า Package.json หน่อย

หลังจากรันคำสั่งข้างบนแล้วให้เปิดไฟล์ Package.json แล้วเพิ่ม -c .storybook เข้าไปให้เหมือน Code ด้านล่าง

หลังจากทำตามตัวอย่างทั้งหมดจะมี Folder   .storybook ขึ้นมาให้เปิดไฟล์ .storybook/config.js เพื่อให้ตัว Storybook  รู้ว่าต้องไปโหลดไฟล์รวม Component ที่ไหน

หลังจากนั้นไปที่ Folder  ที่  root แล้วเข้า stories/index.js เพื่อ Import ตัว Component เข้าหนังสือของเรา

อธิบายส่วนที่ Hilight

ในส่วน Import กระบวนท่าเดิมเวลาเราจะใช้ Component อะไรต้อง Import  เข้ามาก่อนเสมอหากไม่เข้าใจขอให้ไปอ่าน React Basic ก่อน

ส่วนช่วง var playerinfo  ส่วนนี้เป็นการประกาศตัวแปรสำหรับ Component Results เนื่องจาก Component ที่เราเขียนต้องมีการรับตัวแปรจาก Props แต่เราเอามาแค่ชิ้นเดียวไม่มีตัว Parent ที่ส่งตัวแปรมาให้เราก็เลยจัดการโดยประกาศตัวแปรจำลองเพื่อใช้แทน Props ซะเลย

ส่วนต่อไปส่วนของ storiesOf แล้วใส่ค่า Container เป็นการกำหนด  Categories ของ Component หรือเปรียบเทียบกับหนังสือก็คือ Chapter  เป็นตอนใหญ่แล้วข้างในก็ใส่ตอนย่อยๆลงไป ซึ่งในที่นี่ก็คือการใช้คำสั่ง .add  แล้วก็ใส่ชื่อตอน + component ลงไป ก็จะได้หน้าตาตามตัวอย่างถ้าผ่าน React Basic มาแล้วก็จะเข้าใจเลยว่าทำงานยังไงเพราะตัว Component ที่ยกตัวอย่างมาเอามาจาก React basic ครับผม

screen-shot-2016-11-27-at-3-31-39-am

ถ้าใส่ตัวดัก Event เหมือน Code Sample (Code ที่ไม่ได้ Hilight) ก็จะสามารถดัก Event ใน Action Logger ได้ด้วยตามรูปด้านล่างครับผม

screen-shot-2016-11-27-at-3-31-59-am

 

 

Ref   https://getstorybook.io/