Tweet
Tweet

Slide 1

Slide 1 text

8 TIPS FOR REACT BEGINNER ٕज़։ൃຊ෦ WEB APPLICATION DEVELOPMENT MANAGER ਗ਼ਫ ོ೭

Slide 2

Slide 2 text

agenda Why React?Redux? 8 Tips For React Beginner

Slide 3

Slide 3 text

͋ͳͨ୭ ਗ਼ਫོ೭ @takayukishmz DeNA -> startup -> FiNC #perl #node #objc #ruby ΞϓϦɺαʔόʔɺϑϩϯτΤϯυʹશ෦ FiNCͰ͸FiNCϓϥεɺ΢ΣϧωεαʔϕΠͳͲB ޲͚ΞϓϦέʔγϣϯ࡞ͬͯ·͢

Slide 4

Slide 4 text

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‰‡|‰

Slide 5

Slide 5 text

FiNC App (web) React + Redux + React-Router

Slide 6

Slide 6 text

FiNCϓϥε αʔϕΠʹαʔϕΠͰݸਓͷੜ׆श׳ɺਫ਼ਆঢ়ଶͳͲύʔιφϧσʔλΛऔಘɺ෼ੳ͠ɺݸਓاۀ ͷੜ࢈ੑɺ՝୊Λநग़ɻετϨενΣοΫʹ΋ରԠ React on Rails

Slide 7

Slide 7 text

ITPro Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

agenda Why React?Redux? 8 Tips For React Beginner

Slide 10

Slide 10 text

React͕ೖΔલ ϑϩϯτΤϯδχΞ͸θϩ Railsͷແடংͳϑϩϯτʹѱઓۤಆ 10Ҏ্ͷϚΠΫϩαʔϏεͷू߹ ͱΓ͋͑ͣษڧձΛ΍ͬͯΈΔ υΩϡϝϯτɺαϯϓϧ͸ॆ࣮͍ͯ͠ΔͷͰ·ͣ͸ ৮ͬͯΈΔ

Slide 11

Slide 11 text

࢝ΊͷҰา class HelloMessage extends React.Component { render() { return
Hello {this.props.name}
; } } ReactDOM.render(, mountNode); https://facebook.github.io/react/

Slide 12

Slide 12 text

About React.js JUST THE UI ≠ϑϨʔϜϫʔΫɻͨͩͷViewϥΠϒϥϦ VIRTUAL DOM Ծ૝domͷ࢓૊ΈΛ࢖ͬͯࠩ෼͚ͩΛ؆୯ʹ࠶ඳը DATA FLOW one-way binding. γϯϓϧͳσʔλͷྲྀΕ

Slide 13

Slide 13 text

Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛྑ͍ͨ͘͠ pureͳjs͚ͩͩͱঢ়ଶ؅ཧʹࠔΔ ࠷ॳͷεϐʔυ΋େࣄ͚ͩͲɺอक͕΋ͬͱେࣄ Nativeͱಉ͡APIΛ࢖͍͍ͨˍMicro ServiceΏ͑ଞ αʔϏεͱͷAPI࿈ܞ΋ଟ͍.

Slide 14

Slide 14 text

FiNCϓϥε ঢ়ଶ ঢ়ଶ ঢ়ଶ ঢ়ଶ؅ཧΛͲ͏ʹָ͔ʹͰ͖ͳ͍͔

Slide 15

Slide 15 text

Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛߴΊ͍ͨ virtual domʹΑΓ࣮૷ίετΛ཈͑ͭͭ΋ɺඳը΋͚ͬ͜͏ૣ͍ jsΦϯϦʔͩͱঢ়ଶ؅ཧʹࠔΔ Reaxt+FluxͰঢ়ଶ؅ཧʹదͨ͠ΞʔΩςΫνϟΛఏڙ ࠷ॳͷεϐʔυ΋େࣄ͚ͩͲɺอक͕΋ͬͱେࣄ Ұఆن໛Ҏ্ʹͳͬͯ΋SimpleͳσʔλϑϩʔΛอͪ΍͍͢ Nativeͱಉ͡APIΛ࢖͍͍ͨˍMicro ServiceΏ͑ଞαʔϏεͱͷAPI࿈ܞ΋ଟ͍ React+react-router+fluxͰಛఆͷαʔόʔ͔Β͸ಠཱͨ͠SPAͱ࣮૷

Slide 16

Slide 16 text

agenda Why React?Redux? 8 Tips For React Beginner

Slide 17

Slide 17 text

8 TIPS FOR REACT BEGINNER 1.ϑϩϯτΤϯυߏ੒ܾΊ 2.ࠓͳΒES2015Ұ୒ 3.Workflowͷ੔උ 4.FluxϥΠϒϥϦ໰୊ 5.Fat Flux 6.Smart/Dumb Component 7.CSS:Component = 1:1

Slide 18

Slide 18 text

1.ϑϩϯτΤϯυߏ੒ܾΊ React.js language: Javascript ES6 workflow: gulp + babel + browserify + watchify Flux framework: Redux Test: ava ຊ൪ߏ੒ͷ࣮ྫ͸·ͩ·ͨখ਺ɻ ࣮ફ͍ͯ͠Δதͷਓʹ͖͘ͷ͕Ұ൪ɻ

Slide 19

Slide 19 text

2.΋͏ES2015Λ࢖͓͏ 2015/06/17ʹඪ४࢓༷ͱͯ͠ൃߦ babelΛ࢖͑͹ES5ʹޓ׵Ͱ͖ΔͷͰChromeʙIE· Ͱ’΄΅’໰୊ͳ͘ಈ͘ ArrowFunction, let,const,default parameter,Class etc ศརͳػೳ͕ଟ਺௥Ճɻ΋͸΍CoffeeScript͍Βͣ. ڈ೥ͳΒ໎͕ͬͨɺࠓͳΒҰ୒ ࠷ۙ͸ProjectʹΑͬͯ͸TypeScriptΛ࠾༻΋

Slide 20

Slide 20 text

3.WorkFlowͷ४උ gulpɿhe streaming build system. babelͷม׵͔Β buildɺαʔόʔ্ཱͪ͛etcͳͲͷλεΫΛ࣮ߦɻ babelɿES6 -> ES5΁ม׵͢ΔτϥϯεύΠϥ browserifyɿΫϥΠΞϯταΠυͰ΋import/require ΛՄೳʹͯ͘͠ΕΔຐ๏ͷ伺 watchifyɿwatchifyΛΕͯࠩ෼͚ͩ࠶τϥϯεύΠϧ workflow·ΘΓ͸೔ʑਐԽɻwebpack,RollupͳͲ΋࢖༻ɻ

Slide 21

Slide 21 text

Α͠ɺReactΛ࢝ΊΑ͏

Slide 22

Slide 22 text

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..

Slide 23

Slide 23 text

About redux a predictable state container for JavaScript apps. https://github.com/reactjs/redux ʮJavaScriptͷΞϓϦͷ༧ଌՄೳͳঢ়ଶͷίϯςφʯ FluxͷViewҎ֎ͷ෦෼Λ୲͏ StateΛReducerΛ௨ͯ͠ͷΈ͔͠มߋΛ͔͚ΒΕͳ͍

Slide 24

Slide 24 text

Redux Flow Reducer Store Middleware Action Action Creater Server View

Slide 25

Slide 25 text

Why Redux? Ұ൪΍͔͍ͬͳঢ়ଶ(State)؅ཧʹఆධ Action/reducer͕ͨͩͷؔ਺Ͱɺૣ͍ɾςετ͠΍ ͍͢ ੍໿͸ଟ͍͕Θ͔Ε͹γϯϓϧɻΏ͑ʹfluxͷதͰ ΋Ұ൪ίʔυϨϏϡʔ͠΍͍͘͢ɺอक͠΍͍͢ɻ

Slide 26

Slide 26 text

ͱ͸͍͑

Slide 27

Slide 27 text

5.͙͢ංେԽ͢Δ໰୊ actions reducers stores components containers fetch API handling ϏδωεϩδοΫ ࣌ࠁදࣔ ࠃࡍԽ statefull component fat action fat reducer ̎ϲ݄΋΍Ε͹ɺαϯϓϧͰ͸Έͨ͜ͱͳ͍ίʔυྔʹ

Slide 28

Slide 28 text

actions reducers stores components containers repository entities utils React/ReduxͷجຊઃܭʹͱͲ·Βͣɺ ΞϓϦέʔγϣϯ಺ͷ੹຿ͷ෼ׂΛॳظ͔ΒਐΊΔͷ͕େࣄ 5.͙͢ංେԽ͢Δ໰୊

Slide 29

Slide 29 text

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ͷ໾ׂΛ໌֬ʹ͠ɺ ࠶ར༻ੜΛอͭ

Slide 30

Slide 30 text

7. REACT͸σβΠϯϑΣʔζ͔Β࢝·Δ ੜ࢈ੑͷͨΊʹ͸࠶ར༻ੜͷߴ͍Presentatonal ComponentΛͭ͘Δ νʔϜͰίϯϙʔωϯτࢦ޲Λపఈ ࠶ར༻ੑͷίϯϙʔωϯτͰσβΠϯΛߏ੒ CSS΋BEM, SMACSSͳͲίϯϙʔωϯτલఏ ͷCoding RuleΛऔΓೖΕΔඞཁ͋Γ CSS:Component = 1:1

Slide 31

Slide 31 text

8. Flux͸͋͘·Ͱ࿬໾ ReactΛೖΕΔʹFluxΛೖΕΔͱͳΓ͕ͪ ͳʹΛղܾ͍ͨ͠ʁ SPA͢Δ͠ͱΓ͋͑ͣ.. ϗϯτʹSPA͢Δඞཁ͋Δʁ طଘProject΁ͷಋೖϋʔυϧ ϗϯτʹϖΠ͢Δʁ React͸“ϑϨʔϜϫʔΫ”Ͱ͸ͳ͘”ViewϥΠϒϥϦ”

Slide 32

Slide 32 text

Others.. React x i18n React on Railsͱ͍͏ҋʹ͍ͭͯ FluxxorɺAltͱ͍͏ࠇྺ࢙ʹ͍ͭͯ ڵຯ͋Δํ͸ผ్

Slide 33

Slide 33 text

·ͱΊ React/redux͕࠷ߴʂ͔͸Θ͔Βͳ͍͕ɺχʔζʹ͋͑ ͹͔ͳΓḿΔɻ ES2015ָ͍͠ɻ ֶशίετ͸࣮͸ͦΜͳʹͳ͍ɻfrontendͷϥΠϒϥϦ Ͱ͸͍ܰํɻ ࣮ફಋೖ࣌͸ɺsample codeͷԆ௕Ͱ͸πϥΠɻઌਓʹ ૬ஊ͢Δͷ͕Ұ൪!

Slide 34

Slide 34 text

We are hiring! https://www.wantedly.com/projects/63233