Tweet
Tweet

Slide 1

Slide 1 text

React StorybookΛ ৮ͬͯΈΔ 2016.12.19 React LT ๨೥ձ

Slide 2

Slide 2 text

ࢁ㟒ɹਅޗ
 גࣜձࣾνʔϜεϐϦοτ
 (2016೥2݄ʙ) zaki___yama
 Blog: http://dackdive.hateblo.jp/ લ৬Ͱ͸αʔόʔαΠυ։ൃ͕த৺
 Reactྺ = JavaScriptྺɿ໿8ϲ݄ ࣗݾ঺հ

Slide 3

Slide 3 text

React ࠷ۙͷ೰Έ

Slide 4

Slide 4 text

ςετ

Slide 5

Slide 5 text

• ಋೖɾֶशίετ • πʔϧͷൺֱͱબఆ • ࢖༻͢ΔπʔϧͷAPIΛ֮͑ͨΓ • UI ·ΘΓ͸มԽ͕ܹ͍͠ • ͔ͤͬ͘ॻ͍ͨςετ͕ෛ࠴ʹͳΔՄೳੑ React ςετͷ೰Έ

Slide 6

Slide 6 text

• ԿΛςετ͢Δʁͱ͍͏໰୊ • React ίϯϙʔωϯτʹରͯ͠ςετ͢Δͷ͸ɺ
 ʮਖ਼͍͠ Html ͕ੜ੒͞Ε͍ͯΔ͜ͱʯʁ • ͲΕ͚ͩςετΛॻ͍ͯ΋ɺ࠷ऴతͳݟͨ໨͸ ਓͷ໨Ͱ֬ೝ͠ͳ͍ͱ͍͚ͳ͍ React ςετͷ೰Έ

Slide 7

Slide 7 text

• ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ʹͳ͍ͬͯΔ͜ͱ • ίϯϙʔωϯτ͕ظ଴௨Γಈ࡞͢Δ͜ͱ • ༩͑ΒΕͨ props Λݩʹద੾ͳඳըΛߦ͏ • ϘλϯΫϦοΫͳͲͷΞΫγϣϯʹରͯ͠Πϕϯτ ϋϯυϥ͕ద੾ʹݺ͹ΕΔ • ͦͷͱ͖ʹظ଴ͨ͠ύϥϝʔλ͕౉͖͍ͬͯͯΔ ࠷௿ݶɺ֬ೝ͍ͨ͜͠ͱ

Slide 8

Slide 8 text

ίϯϙʔωϯτ୯ҐͰ ݟͨ໨ͱಈ࡞Λ αΫοͱ֬ೝ͢Δํ๏͸ ͳ͍ͷ͔ʁ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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?

Slide 11

Slide 11 text

ࢼͯ͠ΈΔ

Slide 12

Slide 12 text

ReduxͷTodoMVCΛྫʹ IUUQTHJUIVCDPNSFBDUKTSFEVYUSFFNBTUFSFYBNQMFTUPEPNWD

Slide 13

Slide 13 text

Πϯετʔϧ getstorybook ͱ͍͏CLIͰ؆୯ʹΠϯετʔϧͰ͖Δ

Slide 14

Slide 14 text

֬ೝ͍ͨ͜͠ͱ • placeholder͕දࣔ͞ΕΔ • ςΩετ͕ೖྗͰ͖Δ • EnterΩʔԡԼͰ this.props.onSave ͕࣮ߦ͞ΕΔ StoryΛॻ͘ ྫɿ

Slide 15

Slide 15 text

ͷStory

Slide 16

Slide 16 text

ετʔϦʔΛάϧʔϐϯά͢Δɻ ௨ৗ͸ίϯϙʔωϯτ୯ҐʹͳΔ͸ͣ BEE Ͱ ͻͨ͢ΒετʔϦʔΛ௥Ճ͢Δ ΞΫγϣϯ࣮ߦ࣌ͷϩάग़ྗʹඞཁ ʢޙड़ʣ

Slide 17

Slide 17 text

׬੒ͨ͠Storybook

Slide 18

Slide 18 text

DEMO https://github.com/zaki-yama/react-storybook-sample

Slide 19

Slide 19 text

EnterΩʔΛԡͨ͠ͱ͖ͷڍಈ Ҿ਺ͱҰॹʹϩάग़ྗ͞ΕΔ Enter

Slide 20

Slide 20 text

React Storybook Αͦ͞͏

Slide 21

Slide 21 text

• React StorybookΛ࢖͏ͱ • ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ͱೖग़ ྗʹͳ͍ͬͯΔ͔ɺগྔͷίʔυͰ֬ೝͰ ͖Δ • ΞϓϦͱ͸ಠཱͯ͠ίϯϙʔωϯτ։ൃΛ ਐΊΔ͜ͱ͕Ͱ͖Δ ·ͱΊ