8 Tips for React beginner

2016/10/12「React勉強会 vol.2︎ 急成長サービスを支えるReactの最新動向」の登壇資料です。

Transcript

1. 8 TIPS FOR REACT BEGINNER ٕज़։ൃຊ෦ WEB APPLICATION DEVELOPMENT MANAGER ਗ਼ਫ ོ೭
2. agenda Why React?Redux? 8 Tips For React Beginner
3. ͋ͳͨ୭ ਗ਼ਫོ೭ @takayukishmz DeNA -> startup -> FiNC #perl #node #objc #ruby ΞϓϦɺαʔόʔɺϑϩϯτΤϯυʹશ෦ FiNCͰ͸FiNCϓϥεɺ΢ΣϧωεαʔϕΠͳͲB ޲͚ΞϓϦέʔγϣϯ࡞ͬͯ·͢
4. What is FiNC w σʔλऩूˠ෼ੳˠιϦϡʔγϣϯˠ&$ w ߦಈม༰ͱܧଓͷͨΊͷ΢ΣϧωεόϦϡʔνΣʔϯ =/$ !B6 …FQ }jdc ‰D]U EF TˆS -0$ SNS 5=$ q€A`X >"2 q€ lY ‰D {P e zG 3O yo‹3O ‡|f‰‰ 1_1ℓECgŠ a:B=,‰ • wNtb • Wƒ kZ • h~J • mix[p<$ • K4;@ etc. 3),/$'$ & C • B(9- 1 B&.= !4 <9@, • †s-<@ • $8B#B etc. '$R~ ‰D\r ‚7@, 7@,„nM !B6tb 5=$ *B<%8 HV‰ @+@* etc. ‰D'$ $?),10OŒ3 uv 10Ie ;$LI ^
    f‰‡|‰
5. FiNC App (web) React + Redux + React-Router
6. FiNCϓϥε αʔϕΠʹαʔϕΠͰݸਓͷੜ׆श׳ɺਫ਼ਆঢ়ଶͳͲύʔιφϧσʔλΛऔಘɺ෼ੳ͠ɺݸਓاۀ ͷੜ࢈ੑɺ՝୊Λநग़ɻετϨενΣοΫʹ΋ରԠ React on Rails
7. ITPro Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠
9. agenda Why React?Redux? 8 Tips For React Beginner
10. React͕ೖΔલ ϑϩϯτΤϯδχΞ͸θϩ Railsͷແடংͳϑϩϯτʹѱઓۤಆ 10Ҏ্ͷϚΠΫϩαʔϏεͷू߹ ͱΓ͋͑ͣษڧձΛ΍ͬͯΈΔ υΩϡϝϯτɺαϯϓϧ͸ॆ࣮͍ͯ͠ΔͷͰ·ͣ͸ ৮ͬͯΈΔ
11. ࢝ΊͷҰา class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Finc" />, mountNode); https://facebook.github.io/react/
12. About React.js JUST THE UI ≠ϑϨʔϜϫʔΫɻͨͩͷViewϥΠϒϥϦ VIRTUAL DOM Ծ૝domͷ࢓૊ΈΛ࢖ͬͯࠩ෼͚ͩΛ؆୯ʹ࠶ඳը DATA FLOW one-way binding. γϯϓϧͳσʔλͷྲྀΕ
13. Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛྑ͍ͨ͘͠ pureͳjs͚ͩͩͱঢ়ଶ؅ཧʹࠔΔ ࠷ॳͷεϐʔυ΋େࣄ͚ͩͲɺอक͕΋ͬͱେࣄ Nativeͱಉ͡APIΛ࢖͍͍ͨˍMicro ServiceΏ͑ଞ αʔϏεͱͷAPI࿈ܞ΋ଟ͍.
14. FiNCϓϥε ঢ়ଶ ঢ়ଶ ঢ়ଶ ঢ়ଶ؅ཧΛͲ͏ʹָ͔ʹͰ͖ͳ͍͔
15. Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛߴΊ͍ͨ virtual domʹΑΓ࣮૷ίετΛ཈͑ͭͭ΋ɺඳը΋͚ͬ͜͏ૣ͍ jsΦϯϦʔͩͱঢ়ଶ؅ཧʹࠔΔ Reaxt+FluxͰঢ়ଶ؅ཧʹదͨ͠ΞʔΩςΫνϟΛఏڙ ࠷ॳͷεϐʔυ΋େࣄ͚ͩͲɺอक͕΋ͬͱେࣄ Ұఆن໛Ҏ্ʹͳͬͯ΋SimpleͳσʔλϑϩʔΛอͪ΍͍͢ Nativeͱಉ͡APIΛ࢖͍͍ͨˍMicro ServiceΏ͑ଞαʔϏεͱͷAPI࿈ܞ΋ଟ͍ React+react-router+fluxͰಛఆͷαʔόʔ͔Β͸ಠཱͨ͠SPAͱ࣮૷
16. agenda Why React?Redux? 8 Tips For React Beginner
17. 8 TIPS FOR REACT BEGINNER 1.ϑϩϯτΤϯυߏ੒ܾΊ 2.ࠓͳΒES2015Ұ୒ 3.Workflowͷ੔උ 4.FluxϥΠϒϥϦ໰୊ 5.Fat Flux 6.Smart/Dumb Component 7.CSS:Component = 1:1
18. 1.ϑϩϯτΤϯυߏ੒ܾΊ React.js language: Javascript ES6 workflow: gulp + babel + browserify + watchify Flux framework: Redux Test: ava ຊ൪ߏ੒ͷ࣮ྫ͸·ͩ·ͨখ਺ɻ ࣮ફ͍ͯ͠Δதͷਓʹ͖͘ͷ͕Ұ൪ɻ
19. 2.΋͏ES2015Λ࢖͓͏ 2015/06/17ʹඪ४࢓༷ͱͯ͠ൃߦ babelΛ࢖͑͹ES5ʹޓ׵Ͱ͖ΔͷͰChromeʙIE· Ͱ’΄΅’໰୊ͳ͘ಈ͘ ArrowFunction, let,const,default parameter,Class etc ศརͳػೳ͕ଟ਺௥Ճɻ΋͸΍CoffeeScript͍Βͣ. ڈ೥ͳΒ໎͕ͬͨɺࠓͳΒҰ୒ ࠷ۙ͸ProjectʹΑͬͯ͸TypeScriptΛ࠾༻΋
20. 3.WorkFlowͷ४උ gulpɿhe streaming build system. babelͷม׵͔Β buildɺαʔόʔ্ཱͪ͛etcͳͲͷλεΫΛ࣮ߦɻ babelɿES6 -> ES5΁ม׵͢ΔτϥϯεύΠϥ browserifyɿΫϥΠΞϯταΠυͰ΋import/require ΛՄೳʹͯ͘͠ΕΔຐ๏ͷ伺 watchifyɿwatchifyΛΕͯࠩ෼͚ͩ࠶τϥϯεύΠϧ workflow·ΘΓ͸೔ʑਐԽɻwebpack,RollupͳͲ΋࢖༻ɻ
21. Α͠ɺReactΛ࢝ΊΑ͏
22. 4. FLUXϑϨʔϜϫʔΫଟա͗໰୊ ແ਺ʹ͋ΔFluxϑϨʔϜϫʔΫʹৼΓճ͞Εͳ͕Β΋ɺ
    'MVYYPS
    
    BMUKT
    
    Redux ˡࠓίί Facebook Flux, Fluxible by Yahoo, Reflux, Alt, Flummox, Marty.js, McFly, Lux, Material Flux, Redux, Redux + Flambeau, Nuclear.js, Fluxette, Fluxxor, Freezer, Fluxury..
23. About redux a predictable state container for JavaScript apps. https://github.com/reactjs/redux ʮJavaScriptͷΞϓϦͷ༧ଌՄೳͳঢ়ଶͷίϯςφʯ FluxͷViewҎ֎ͷ෦෼Λ୲͏ StateΛReducerΛ௨ͯ͠ͷΈ͔͠มߋΛ͔͚ΒΕͳ͍
24. Redux Flow Reducer Store Middleware Action Action Creater Server View
25. Why Redux? Ұ൪΍͔͍ͬͳঢ়ଶ(State)؅ཧʹఆධ Action/reducer͕ͨͩͷؔ਺Ͱɺૣ͍ɾςετ͠΍ ͍͢ ੍໿͸ଟ͍͕Θ͔Ε͹γϯϓϧɻΏ͑ʹfluxͷதͰ ΋Ұ൪ίʔυϨϏϡʔ͠΍͍͘͢ɺอक͠΍͍͢ɻ
26. ͱ͸͍͑
27. 5.͙͢ංେԽ͢Δ໰୊ actions reducers stores components containers fetch API handling ϏδωεϩδοΫ ࣌ࠁදࣔ ࠃࡍԽ statefull component fat action fat reducer ̎ϲ݄΋΍Ε͹ɺαϯϓϧͰ͸Έͨ͜ͱͳ͍ίʔυྔʹ
28. actions reducers stores components containers repository entities utils React/ReduxͷجຊઃܭʹͱͲ·Βͣɺ
    ΞϓϦέʔγϣϯ಺ͷ੹຿ͷ෼ׂΛॳظ͔ΒਐΊΔͷ͕େࣄ 5.͙͢ංେԽ͢Δ໰୊
29. 6.Smart/Dumb Components Container Component ৼΔ෣͍ʹؔ৺Λ࣋ͭ MVCͷCతͳҐஔ෇͚ σʔλͱৼΔ෣͍ΛPresentational Componentʹ౉͢ Presentational Componentͱfluxͱͷґଘ͕ͳ͍ঢ়ଶʹอͬͯ͘ΕΔ͍͍΍ͭ Presentational Component ݟͨ໨ʹؔ৺Λ΋ͭ PropsΛ΋Β͍ɺstateΛ΋ͨͳ͍ɻ fluxͷґଘ͕ͳ͍ʢͳΔ΂͘ʣ࠶ར༻ੜͷߴ͍component Presentational and Container Components — Medium https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.qoyibvfno Container(root) ͱͦΕҎԼͷ$PNQPOFOUͷ໾ׂΛ໌֬ʹ͠ɺ
    ࠶ར༻ੜΛอͭ
30. 7. REACT͸σβΠϯϑΣʔζ͔Β࢝·Δ ੜ࢈ੑͷͨΊʹ͸࠶ར༻ੜͷߴ͍Presentatonal ComponentΛͭ͘Δ νʔϜͰίϯϙʔωϯτࢦ޲Λపఈ ࠶ར༻ੑͷίϯϙʔωϯτͰσβΠϯΛߏ੒ CSS΋BEM, SMACSSͳͲίϯϙʔωϯτલఏ ͷCoding RuleΛऔΓೖΕΔඞཁ͋Γ CSS:Component = 1:1
31. 8. Flux͸͋͘·Ͱ࿬໾ ReactΛೖΕΔʹFluxΛೖΕΔͱͳΓ͕ͪ ͳʹΛղܾ͍ͨ͠ʁ SPA͢Δ͠ͱΓ͋͑ͣ.. ϗϯτʹSPA͢Δඞཁ͋Δʁ طଘProject΁ͷಋೖϋʔυϧ ϗϯτʹϖΠ͢Δʁ React͸“ϑϨʔϜϫʔΫ”Ͱ͸ͳ͘”ViewϥΠϒϥϦ”
32. Others.. React x i18n React on Railsͱ͍͏ҋʹ͍ͭͯ FluxxorɺAltͱ͍͏ࠇྺ࢙ʹ͍ͭͯ ڵຯ͋Δํ͸ผ్
33. ·ͱΊ React/redux͕࠷ߴʂ͔͸Θ͔Βͳ͍͕ɺχʔζʹ͋͑ ͹͔ͳΓḿΔɻ ES2015ָ͍͠ɻ ֶशίετ͸࣮͸ͦΜͳʹͳ͍ɻfrontendͷϥΠϒϥϦ Ͱ͸͍ܰํɻ ࣮ફಋೖ࣌͸ɺsample codeͷԆ௕Ͱ͸πϥΠɻઌਓʹ ૬ஊ͢Δͷ͕Ұ൪!
34. We are hiring! https://www.wantedly.com/projects/63233