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

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಺༰΁ͷϑΟʔυόοΫΛ ࠙਌ձͰ௖͚Δͱخ͍͠Ͱ͢ʂ