Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Storybook を触ってみる

React Storybook を触ってみる

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

50fc0fdc2327ecbe7350645812de52e3?s=128

Shingo Yamazaki

December 19, 2016
Tweet

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. ίϯϙʔωϯτ୯ҐͰ ݟͨ໨ͱಈ࡞Λ αΫοͱ֬ೝ͢Δํ๏͸ ͳ͍ͷ͔ʁ

  9. None
  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Λ࢖͏ͱ • ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ͱೖग़ ྗʹͳ͍ͬͯΔ͔ɺগྔͷίʔυͰ֬ೝͰ ͖Δ • ΞϓϦͱ͸ಠཱͯ͠ίϯϙʔωϯτ։ൃΛ ਐΊΔ͜ͱ͕Ͱ͖Δ

    ·ͱΊ