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

非SPAで小さく始めるReactアーキテクチャ

 非SPAで小さく始めるReactアーキテクチャ

4bf9f85356f5a7c959b73f19f4c0df37?s=128

masarufuruya

July 20, 2017
Tweet

More Decks by masarufuruya

Other Decks in Technology

Transcript

  1. ඇSPAͰখ࢝͘͞ΊΔ ReactΞʔΩςΫνϟ ݹՈ େ

  2. ࣗݾ঺հ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ طଘͷRailsΞϓϦ΁ReactͰ৽ػೳΛ௥Ճ

  3. ࠓճͷൃදʹࢸͬͨഎܠ ◦ SPAಋೖͷهࣄ͕ଟ͍ ◦ ඇSPA΋gemΛ࢖ͬͨύλʔϯ͔ɺ webpackͰ΋෦෼తͳTipsͷهࣄ͕ଟ͍

  4. ࠓ೔ओʹ࿩͢͜ͱ ◦ ඇSPAΞϓϦʹReact+webpackΛಋೖ͢Δ ࡍͷશମతͳΞʔΩςΫνϟͱࠔΓϙΠϯ τ΁ͷ஌ݟڞ༗

  5. ͜Μͳ͜ͱ͸࿩͠·ͤΜ ◦ React,ES6,webpackʹؔ͢Δجૅతͳ࿩ ◦ ଞͷJSϑϨʔϜϫʔΫͱͷൺֱͷ࿩

  6. ࠓճಋೖͨ͠ελοΫ ◦ React ◦ flowtype ◦ webpack ◦ ES6 +

    Babel ◦ jQuery
  7. ࠓճಋೖͨ͠ελοΫ ◦ React ◦ flowtype ◦ webpack ◦ ES6 +

    Babel ◦ jQuery Redux͸ֶशίετ͕ߴ͍ͷͰݟૹΓ ܕΛܾΊΔͱAPIଆͱͷҙࢥૄ௨ָ͕ɻΦεεϝ σβΠφʔ͕ॻ͘JSʹؔͯ͠͸ڐ༰
  8. શମͷReactίϯϙʔωϯτߏ੒ Page App App Component Component ϖʔδͷى఺ ֤UIύʔπͷ਌ ֤UIύʔπͷࢠ

  9. ϖʔδ (Page) UIύʔπ(App) UIύʔπ(App)

  10. webpackϏϧυ • entryʹෳ਺ΤϯτϦʔϙΠϯτΛࢦఆ • ϖʔδຖͷXXXPage.jsΛES6 ➔ ES5ʹม׵

  11. Pageͷ໾ׂ (ϖʔδͷى఺) • ඞཁͳUIύʔπΛReactDOM.render • ֤UIύʔπ͸XXXApp.jsͰ໋໊Λ౷Ұ

  12. Appͷ໾ׂ (֤UIύʔπͷ਌) • stateͷอ࣋/มߋΛ୲౰ • ඇಉظॲཧ౳ͷϩδοΫ͸શͯ͜͜ʹهࡌ ※ ن໛͕େ͖͘ͳ͖ͬͯͨΒRedux, Immutable.jsͰ෼ׂΛݕ౼

  13. Appͷ໾ׂ (֤UIύʔπͷ਌) • stateͷ஋͸flowtypeͰܕఆٛ • APIଆͱͷσʔλͷೝࣝ߹Θͤʹศར

  14. Componentͷ໾ׂ (֤UIύʔπͷࢠ) • ਌(App)͔ΒͷpropsΛϨϯμϦϯά • ϢʔβʔͷΠϕϯτΛ਌ʹ౉͢

  15. ඇಉظॲཧʹؔ͢ΔTips • axiosͱ͍͏HTTPΫϥΠΞϯτΛར༻ • ϞοΫ΋༻ҙͰ͖ͯAPIແ͠Ͱ΋։ൃͰ͖Δ

  16. ॳճͷσʔλϩʔυ଴ͪ͸Ͳ͏͢Δʁ • gonͰॳճσʔλΛJS΁౉͠ճආ • SSR͸ख͕͔͔ؒΓͦ͏ͩͬͨͷͰࠓճ͸อཹ • σʔλऔಘ׬ྃ·Ͱը໘͕දࣔ͞Εͳ͍໰୊

  17. ࠓޙऔΓ૊Έ͍ͨ͜ͱ ◦ CSS in JSͷಋೖ ◦ εϚϗදࣔͷύϑΥʔϚϯενϡʔχϯά ◦ JQueryͱReactͷ࢖͍෼͚ͷϧʔϧࡦఆ ※

    UIύʔπຖʹָͳํͰ࣮૷Ͱ͖ΔΑ͏ʹ͍͖͍ͯͨ͠
  18. LT಺༰΁ͷϑΟʔυόοΫΛ ࠙਌ձͰ௖͚Δͱخ͍͠Ͱ͢ʂ