Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
8 Tips for React beginner
Search
takayuki shimizu
October 13, 2016
Technology
0
250
8 Tips for React beginner
2016/10/12「React勉強会 vol.2︎ 急成長サービスを支えるReactの最新動向」の登壇資料です。
takayuki shimizu
October 13, 2016
Tweet
Share
More Decks by takayuki shimizu
See All by takayuki shimizu
VPoEの仕事 / What's VPoE work?
takayukishmz
0
390
エンジニアリングマネージャーと実行力 - 13ヶ月の組織改善から学ぶ3つのアンチパターンとチェックリスト - / Engineering Manager and Execution
takayukishmz
8
4.4k
エンジニアリングマネージャーと戦略 / Engineering Manager and Strategy
takayukishmz
2
3.4k
カイカクジャーニー ~ スタートアップが必ずぶつかる課題と開発チームのメジャーバージョンアップ ~/ Rails Developer Meetup 2018-12-08
takayukishmz
5
3.6k
React/Reduxで半年くらい真面目にSPAするとわかること
takayukishmz
6
5k
Other Decks in Technology
See All in Technology
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
2.5Dモデルのすべて
yu4u
2
610
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
FastConnect の冗長性
ocise
1
9.6k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
SCSAから学ぶセキュリティ管理
masakamayama
0
140
High Performance PHP
cmuench
0
140
現場で役立つAPIデザイン
nagix
29
10k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Why Our Code Smells
bkeepers
PRO
335
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Visualization
eitanlees
146
15k
It's Worth the Effort
3n
184
28k
A better future with KSS
kneath
238
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
8 TIPS FOR REACT BEGINNER ٕज़։ൃຊ෦ WEB APPLICATION DEVELOPMENT MANAGER
ਗ਼ਫ ོ೭
agenda Why React?Redux? 8 Tips For React Beginner
͋ͳͨ୭ ਗ਼ਫོ೭ @takayukishmz DeNA -> startup -> FiNC #perl #node
#objc #ruby ΞϓϦɺαʔόʔɺϑϩϯτΤϯυʹશ෦ FiNCͰFiNCϓϥεɺΣϧωεαʔϕΠͳͲB ͚ΞϓϦέʔγϣϯ࡞ͬͯ·͢
What is FiNC w σʔλऩूˠੳˠιϦϡʔγϣϯˠ&$ w ߦಈม༰ͱܧଓͷͨΊͷΣϧωεόϦϡʔνΣʔϯ =/$ !B6 FQ
}jdc D]U EF TS -0$ SNS 5=$ qA`X >"2 q lY D {P e zG 3O yo3O |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'$ $?),10O3 uv 10Ie ;$LI ^ f|
FiNC App (web) React + Redux + React-Router
FiNCϓϥε αʔϕΠʹαʔϕΠͰݸਓͷੜ׆श׳ɺਫ਼ਆঢ়ଶͳͲύʔιφϧσʔλΛऔಘɺੳ͠ɺݸਓاۀ ͷੜ࢈ੑɺ՝Λநग़ɻετϨενΣοΫʹରԠ React on Rails
ITPro Media *51SP͞ΜͰ3FBDU3FEVYͷهࣄΛॻ͖·ͨ͠
None
agenda Why React?Redux? 8 Tips For React Beginner
React͕ೖΔલ ϑϩϯτΤϯδχΞθϩ Railsͷແடংͳϑϩϯτʹѱઓۤಆ 10Ҏ্ͷϚΠΫϩαʔϏεͷू߹ ͱΓ͋͑ͣษڧձΛͬͯΈΔ υΩϡϝϯτɺαϯϓϧॆ࣮͍ͯ͠ΔͷͰ·ͣ ৮ͬͯΈΔ
࢝ΊͷҰา class HelloMessage extends React.Component { render() { return <div>Hello
{this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="Finc" />, mountNode); https://facebook.github.io/react/
About React.js JUST THE UI ≠ϑϨʔϜϫʔΫɻͨͩͷViewϥΠϒϥϦ VIRTUAL DOM ԾdomͷΈΛ͚ͬͯࠩͩΛ؆୯ʹ࠶ඳը DATA
FLOW one-way binding. γϯϓϧͳσʔλͷྲྀΕ
Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛྑ͍ͨ͘͠ pureͳjs͚ͩͩͱঢ়ଶཧʹࠔΔ ࠷ॳͷεϐʔυେࣄ͚ͩͲɺอक͕ͬͱେࣄ Nativeͱಉ͡APIΛ͍͍ͨˍMicro ServiceΏ͑ଞ αʔϏεͱͷAPI࿈ܞଟ͍.
FiNCϓϥε ঢ়ଶ ঢ়ଶ ঢ়ଶ ঢ়ଶཧΛͲ͏ʹָ͔ʹͰ͖ͳ͍͔
Why React.js? ύϑΥʔϚϯεΛߴΊͯUXΛߴΊ͍ͨ virtual domʹΑΓ࣮ίετΛ͑ͭͭɺඳը͚ͬ͜͏ૣ͍ jsΦϯϦʔͩͱঢ়ଶཧʹࠔΔ Reaxt+FluxͰঢ়ଶཧʹదͨ͠ΞʔΩςΫνϟΛఏڙ ࠷ॳͷεϐʔυେࣄ͚ͩͲɺอक͕ͬͱେࣄ ҰఆنҎ্ʹͳͬͯSimpleͳσʔλϑϩʔΛอ͍ͪ͢ Nativeͱಉ͡APIΛ͍͍ͨˍMicro
ServiceΏ͑ଞαʔϏεͱͷAPI࿈ܞଟ͍ React+react-router+fluxͰಛఆͷαʔόʔ͔Βಠཱͨ͠SPAͱ࣮
agenda Why React?Redux? 8 Tips For React Beginner
8 TIPS FOR REACT BEGINNER 1.ϑϩϯτΤϯυߏܾΊ 2.ࠓͳΒES2015Ұ 3.Workflowͷඋ 4.FluxϥΠϒϥϦ 5.Fat
Flux 6.Smart/Dumb Component 7.CSS:Component = 1:1
1.ϑϩϯτΤϯυߏܾΊ React.js language: Javascript ES6 workflow: gulp + babel +
browserify + watchify Flux framework: Redux Test: ava ຊ൪ߏͷ࣮ྫ·ͩ·ͨখɻ ࣮ફ͍ͯ͠Δதͷਓʹ͖͘ͷ͕Ұ൪ɻ
2.͏ES2015Λ͓͏ 2015/06/17ʹඪ४༷ͱͯ͠ൃߦ babelΛ͑ES5ʹޓͰ͖ΔͷͰChromeʙIE· Ͱ’΄΅’ͳ͘ಈ͘ ArrowFunction, let,const,default parameter,Class etc ศརͳػೳ͕ଟՃɻCoffeeScript͍Βͣ. ڈͳΒ໎͕ͬͨɺࠓͳΒҰ
࠷ۙProjectʹΑͬͯTypeScriptΛ࠾༻
3.WorkFlowͷ४උ gulpɿhe streaming build system. babelͷม͔Β buildɺαʔόʔ্ཱͪ͛etcͳͲͷλεΫΛ࣮ߦɻ babelɿES6 -> ES5ม͢ΔτϥϯεύΠϥ
browserifyɿΫϥΠΞϯταΠυͰimport/require ΛՄೳʹͯ͘͠ΕΔຐ๏ͷ伺 watchifyɿwatchifyΛΕ͚ͯࠩͩ࠶τϥϯεύΠϧ workflow·ΘΓʑਐԽɻwebpack,RollupͳͲ༻ɻ
Α͠ɺReactΛ࢝ΊΑ͏
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..
About redux a predictable state container for JavaScript apps. https://github.com/reactjs/redux
ʮJavaScriptͷΞϓϦͷ༧ଌՄೳͳঢ়ଶͷίϯςφʯ FluxͷViewҎ֎ͷ෦Λ୲͏ StateΛReducerΛ௨ͯ͠ͷΈ͔͠มߋΛ͔͚ΒΕͳ͍
Redux Flow Reducer Store Middleware Action Action Creater Server View
Why Redux? Ұ൪͔͍ͬͳঢ়ଶ(State)ཧʹఆධ Action/reducer͕ͨͩͷؔͰɺૣ͍ɾςετ͠ ͍͢ ੍ଟ͍͕Θ͔ΕγϯϓϧɻΏ͑ʹfluxͷதͰ Ұ൪ίʔυϨϏϡʔ͍͘͢͠ɺอक͍͢͠ɻ
ͱ͍͑
5.͙͢ංେԽ͢Δ actions reducers stores components containers fetch API handling ϏδωεϩδοΫ
࣌ࠁදࣔ ࠃࡍԽ statefull component fat action fat reducer ̎ϲ݄ΕɺαϯϓϧͰΈͨ͜ͱͳ͍ίʔυྔʹ
actions reducers stores components containers repository entities utils React/ReduxͷجຊઃܭʹͱͲ·Βͣɺ ΞϓϦέʔγϣϯͷͷׂΛॳظ͔ΒਐΊΔͷ͕େࣄ
5.͙͢ංେԽ͢Δ
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ͷׂΛ໌֬ʹ͠ɺ ࠶ར༻ੜΛอͭ
7. REACTσβΠϯϑΣʔζ͔Β࢝·Δ ੜ࢈ੑͷͨΊʹ࠶ར༻ੜͷߴ͍Presentatonal ComponentΛͭ͘Δ νʔϜͰίϯϙʔωϯτࢦΛపఈ ࠶ར༻ੑͷίϯϙʔωϯτͰσβΠϯΛߏ CSSBEM, SMACSSͳͲίϯϙʔωϯτલఏ ͷCoding RuleΛऔΓೖΕΔඞཁ͋Γ
CSS:Component = 1:1
8. Flux͋͘·Ͱ ReactΛೖΕΔʹFluxΛೖΕΔͱͳΓ͕ͪ ͳʹΛղܾ͍ͨ͠ʁ SPA͢Δ͠ͱΓ͋͑ͣ.. ϗϯτʹSPA͢Δඞཁ͋Δʁ طଘProjectͷಋೖϋʔυϧ ϗϯτʹϖΠ͢Δʁ React“ϑϨʔϜϫʔΫ”Ͱͳ͘”ViewϥΠϒϥϦ”
Others.. React x i18n React on Railsͱ͍͏ҋʹ͍ͭͯ FluxxorɺAltͱ͍͏ࠇྺ࢙ʹ͍ͭͯ ڵຯ͋Δํผ్
·ͱΊ React/redux͕࠷ߴʂ͔Θ͔Βͳ͍͕ɺχʔζʹ͋͑ ͔ͳΓḿΔɻ ES2015ָ͍͠ɻ ֶशίετ࣮ͦΜͳʹͳ͍ɻfrontendͷϥΠϒϥϦ Ͱ͍ܰํɻ ࣮ફಋೖ࣌ɺsample codeͷԆͰπϥΠɻઌਓʹ ૬ஊ͢Δͷ͕Ұ൪!
We are hiring! https://www.wantedly.com/projects/63233