React Storybook を触ってみる

2016/12/19 React LT 忘年会のLT資料です。

Transcript

1. React StorybookΛ ৮ͬͯΈΔ 2016.12.19 React LT ๨೥ձ
2. ࢁ㟒ɹਅޗ
 גࣜձࣾνʔϜεϐϦοτ
 (2016೥2݄ʙ) zaki___yama
 Blog: http://dackdive.hateblo.jp/ લ৬Ͱ͸αʔόʔαΠυ։ൃ͕த৺
 Reactྺ = JavaScriptྺɿ໿8ϲ݄ ࣗݾ঺հ
3. React ࠷ۙͷ೰Έ
4. ςετ
5. • ಋೖɾֶशίετ • πʔϧͷൺֱͱબఆ • ࢖༻͢ΔπʔϧͷAPIΛ֮͑ͨΓ • UI ·ΘΓ͸มԽ͕ܹ͍͠ • ͔ͤͬ͘ॻ͍ͨςετ͕ෛ࠴ʹͳΔՄೳੑ React ςετͷ೰Έ
6. • ԿΛςετ͢Δʁͱ͍͏໰୊ • React ίϯϙʔωϯτʹରͯ͠ςετ͢Δͷ͸ɺ
 ʮਖ਼͍͠ Html ͕ੜ੒͞Ε͍ͯΔ͜ͱʯʁ • ͲΕ͚ͩςετΛॻ͍ͯ΋ɺ࠷ऴతͳݟͨ໨͸ ਓͷ໨Ͱ֬ೝ͠ͳ͍ͱ͍͚ͳ͍ React ςετͷ೰Έ
7. • ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ʹͳ͍ͬͯΔ͜ͱ • ίϯϙʔωϯτ͕ظ଴௨Γಈ࡞͢Δ͜ͱ • ༩͑ΒΕͨ props Λݩʹద੾ͳඳըΛߦ͏ • ϘλϯΫϦοΫͳͲͷΞΫγϣϯʹରͯ͠Πϕϯτ ϋϯυϥ͕ద੾ʹݺ͹ΕΔ • ͦͷͱ͖ʹظ଴ͨ͠ύϥϝʔλ͕౉͖͍ͬͯͯΔ ࠷௿ݶɺ֬ೝ͍ͨ͜͠ͱ
8. ίϯϙʔωϯτ୯ҐͰ ݟͨ໨ͱಈ࡞Λ αΫοͱ֬ೝ͢Δํ๏͸ ͳ͍ͷ͔ʁ
10. README.md ΑΓɿ “React Storybook is a UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively.” “React Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.” React Storybook?
11. ࢼͯ͠ΈΔ
12. ReduxͷTodoMVCΛྫʹ IUUQTHJUIVCDPNSFBDUKTSFEVYUSFFNBTUFSFYBNQMFTUPEPNWD
13. Πϯετʔϧ getstorybook ͱ͍͏CLIͰ؆୯ʹΠϯετʔϧͰ͖Δ
14. ֬ೝ͍ͨ͜͠ͱ • placeholder͕දࣔ͞ΕΔ • ςΩετ͕ೖྗͰ͖Δ • EnterΩʔԡԼͰ this.props.onSave ͕࣮ߦ͞ΕΔ StoryΛॻ͘ ྫɿ<TodoTextInput>
15. <TodoTextInput>ͷStory
16. ετʔϦʔΛάϧʔϐϯά͢Δɻ
    ௨ৗ͸ίϯϙʔωϯτ୯ҐʹͳΔ͸ͣ BEE
    Ͱ
    ͻͨ͢ΒετʔϦʔΛ௥Ճ͢Δ ΞΫγϣϯ࣮ߦ࣌ͷϩάग़ྗʹඞཁ
    ʢޙड़ʣ
17. ׬੒ͨ͠Storybook
18. DEMO https://github.com/zaki-yama/react-storybook-sample
19. EnterΩʔΛԡͨ͠ͱ͖ͷڍಈ Ҿ਺ͱҰॹʹϩάग़ྗ͞ΕΔ Enter
20. React Storybook Αͦ͞͏
21. • React StorybookΛ࢖͏ͱ • ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ͱೖग़ ྗʹͳ͍ͬͯΔ͔ɺগྔͷίʔυͰ֬ೝͰ ͖Δ • ΞϓϦͱ͸ಠཱͯ͠ίϯϙʔωϯτ։ൃΛ ਐΊΔ͜ͱ͕Ͱ͖Δ ·ͱΊ