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

8 Tips for React beginner

8 Tips for React beginner

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

takayuki shimizu

October 13, 2016
Tweet

More Decks by takayuki shimizu

Other Decks in Technology

Transcript

  1. ͋ͳͨ୭ ਗ਼ਫོ೭ @takayukishmz DeNA -> startup -> FiNC #perl #node

    #objc #ruby ΞϓϦɺαʔόʔɺϑϩϯτΤϯυʹશ෦ FiNCͰ͸FiNCϓϥεɺ΢ΣϧωεαʔϕΠͳͲB ޲͚ΞϓϦέʔγϣϯ࡞ͬͯ·͢
  2. 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‰‡|‰
  3. ࢝ΊͷҰา class HelloMessage extends React.Component { render() { return <div>Hello

    {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Finc" />, mountNode); https://facebook.github.io/react/
  4. 1.ϑϩϯτΤϯυߏ੒ܾΊ React.js language: Javascript ES6 workflow: gulp + babel +

    browserify + watchify Flux framework: Redux Test: ava ຊ൪ߏ੒ͷ࣮ྫ͸·ͩ·ͨখ਺ɻ ࣮ફ͍ͯ͠Δதͷਓʹ͖͘ͷ͕Ұ൪ɻ
  5. 3.WorkFlowͷ४උ gulpɿhe streaming build system. babelͷม׵͔Β buildɺαʔόʔ্ཱͪ͛etcͳͲͷλεΫΛ࣮ߦɻ babelɿES6 -> ES5΁ม׵͢ΔτϥϯεύΠϥ

    browserifyɿΫϥΠΞϯταΠυͰ΋import/require ΛՄೳʹͯ͘͠ΕΔຐ๏ͷ伺 watchifyɿwatchifyΛΕͯࠩ෼͚ͩ࠶τϥϯεύΠϧ workflow·ΘΓ͸೔ʑਐԽɻwebpack,RollupͳͲ΋࢖༻ɻ
  6. 4. FLUXϑϨʔϜϫʔΫଟա͗໰୊ ແ਺ʹ͋ΔFluxϑϨʔϜϫʔΫʹৼΓճ͞Εͳ͕Β΋ɺ 'MVYYPSBMUKTRedux ˡࠓίί Facebook Flux, Fluxible by Yahoo,

    Reflux, Alt, Flummox, Marty.js, McFly, Lux, Material Flux, Redux, Redux + Flambeau, Nuclear.js, Fluxette, Fluxxor, Freezer, Fluxury..
  7. About redux a predictable state container for JavaScript apps. https://github.com/reactjs/redux

    ʮJavaScriptͷΞϓϦͷ༧ଌՄೳͳঢ়ଶͷίϯςφʯ FluxͷViewҎ֎ͷ෦෼Λ୲͏ StateΛReducerΛ௨ͯ͠ͷΈ͔͠มߋΛ͔͚ΒΕͳ͍
  8. 5.͙͢ංେԽ͢Δ໰୊ actions reducers stores components containers fetch API handling ϏδωεϩδοΫ

    ࣌ࠁදࣔ ࠃࡍԽ statefull component fat action fat reducer ̎ϲ݄΋΍Ε͹ɺαϯϓϧͰ͸Έͨ͜ͱͳ͍ίʔυྔʹ
  9. 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ͷ໾ׂΛ໌֬ʹ͠ɺ ࠶ར༻ੜΛอͭ