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
Introduction to React
Search
Shuhei Kagawa
January 20, 2014
Technology
10
4k
Introduction to React
Facebook/Instagram の OSS UI ライブラリである React の紹介です。2014/1/20 に行われた M3 Tech Talk #17 で発表しました。
Shuhei Kagawa
January 20, 2014
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
820
Building a Pixel Art Editor with Elm
shuhei
1
740
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
150
Draw Animated Chart on React Native
shuhei
0
8.7k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
820
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
140
Other Decks in Technology
See All in Technology
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
140
Taming you application's environments
salaboy
0
190
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
150
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
420
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
What's new in Ruby 2.0
geeforr
343
31k
Music & Morning Musume
bryan
46
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Automating Front-end Workflow
addyosmani
1366
200k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
The Language of Interfaces
destraynor
154
24k
Code Reviewing Like a Champion
maltzj
520
39k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Building an army of robots
kneath
302
43k
Producing Creativity
orderedlist
PRO
341
39k
Transcript
React Shuhei Kagawa @M3 Tech Talk - 2014/1/20
What’s React? • ͷ OSS ͳ Web UI ϥΠϒϥϦ •
JavaScript MVC Framework • ෳͷίϯϙʔωϯτΛΈ߹Θͤͯ UI Λߏஙɻ
None
Why React? • ࣮ɹFacebook, Instagram ͰΘΕ͍ͯΔɻClosure, jQuery ͱಉʹɺੈքͰ࠷ݫ͍͠ݱͰΘΕ͍ͯΔ JavaScript ϥ
ΠϒϥϦɻAngular Google ͷओཁͳϓϩμΫτͰΘΕͯ ͍ͳ͍ɻ • γϯϓϧɹ֮͑Δ͜ͱ͕গͳ͍ɻComponent ͚ͩɻAngular ͷ Controller, Model, Scope, Directive… • View ͚ͩɹطଘϓϩδΣΫτʹΈࠐΈ͍͢ɻFacebook Ͱ ίϝϯτཝ͔Β࣮ઓೖɻInstagram Ͱॳ Backbone.js ͱͷΈ߹ΘͤͰ༻ɻ
Declarative • Α͋͘ΔͷɺHTML Λ jQuery Ͱͪΐͪ͜ΐ͜ม ߋɻͩΜͩΜεύήοςΟʹɾɾɾɻ • React ͳΒɺαʔόαΠυͷΑ͏ʹςϯϓϨʔτ
ʢͷΑ͏ͳͷʣΛॻ͚ͩ͘ͰɺσʔλͷมߋʹԠ ͯ͡ DOM Λॻ͖ม͑ͯ͘ΕΔɻ • ࣗͰ DOM ૢ࡞ෆཁʂ
Declarative? • var Counter = React.createClass({ getInitialState: function () {
return { count: this.props.initialCount }; }, add: function (diff) { this.setState({ count: this.state.count + diff }); }, render: function () { return ( React.DOM.div(null, [ React.DOM.button({ onClick: this.add.bind(this, -1)}, “-“), React.DOM.span(null, [“Count: “, this.state.count]), React.DOM.button({ onClick: this.add.bind(this, 1)}, “+“) ]) ); } }); React.renderComponent(<Counter initialCount={100}>, document.body);
Declarative! • var Counter = React.createClass({ getInitialState: function () {
return { count: this.props.initialCount }; }, add: function (diff) { this.setState({ count: this.state.count + diff }); }, render: function () { return ( <div> <button onClick={this.add.bind(this, -1)}>-</button> <span>Count: {this.state.count}</span> <button onClick={this.add.bind(this, 1)}>+</button> </div> ); } }); React.renderComponent(<Counter initialCount={100}>, document.body);
JSX • DeNA Ͱ࡞ͬͯΔ AltJS ͱผɻ • JavaScript ͷதʹ HTMLʢΆ͍ͷʣ͕ॻ͚Δʂ
• return <div>{this.prop.name}</div>; • ୯७ʹ JavaScript ʹม͞ΕΔɻߦҰॹɻ • return React.DOM.div(null, this.prop.name);
JSX • ࣄલʹ JavaScript ʹίϯύΠϧ͓ͯ͘͠ɻ • $ npm install -g
react-tools $ jsx —watch src build • ϒϥβ্ͰίϯύΠϧՄೳɻ • <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> <script type="text/jsx"> /** @jsx React.DOM */ React.renderComponent( <h1>Hello, world!</h1>, document.getElementById('example') ); </script>
Virtual DOM • DOM Λຖճॻ͖ͬͯ͢ɺແବͰʁը໘͕ͪΒͭ͘ͷͰ ʁ • ͕͔͔࣌ؒΔͷ DOM ૢ࡞ɻJavaScript
ͦͷͷ͍ʂ • JavaScript ্Ͱ Virtual DOM ΛߏஙɻVirtual DOM ಉ࢜Ͱࠩ Λͱͬͯɺ࣮ࡍͷ DOM ૢ࡞Λ࠷খݶʹ͑Δɻ • DOM πϦʔͷൺֱͬͯɺύϑΥʔϚϯεग़ΔͷʁώϡʔϦ εςΟΫεʹΑΓ O(n^3) ͔Β O(n) ʹɻ
Component • ೋछྨͷσʔλͰ UI Λඳըɻ • props: ֎͔Β͞ΕΔ • state:
ଆͰอ࣋ɾมߋ͢Δ • render() Ͱ্هͷೋछྨͷΛͬͯɺVirtual DOM Λߏங͢Δɻ • ௨ৗ props ͷมߋ·ͨ setState() ͷݺͼग़࣌͠ͷΈɺද͕ࣔߋ৽͞ΕΔɻ • ௨ৗඞཁͳ͍͕ɺखಈͰදࣔΛߋ৽͢Δ͜ͱՄೳɻforceUpdate() • ֎෦ͱͷΠϯλʔϑΣΠε props ͚ͩɻ
Composition • render() Ͱผͷ component Λࢠͱͯ࣋ͭ͜͠ͱ͕Ͱ͖Δɻ • ͔ΒࢠͷϝιουΛݺΜͩΓ͠ͳ͍ɻͨͩ props Λ͚ͩ͢ɻ
• <Parent name=“Oyataro” age={49} /> • render: function () { return ( <div> <Child name=“Taro” age={this.props.age - 25} /> <Child name=“Jiro” age={this.props.age - 30} /> </div> ); } • ͔ΒσʔλΛྲྀ͠ࠐΉͱɺ·Ͱσʔλ͕ߦ͖Δɻ
Demo https://github.com/shuhei/react-sample-counter
·ͱΊ • Facebook, Instagram Ͱͷ࣮ઓͰ͑ΒΕ͍ͯΔɻ • View ͷݟ௨͕͠ྑ͘ͳΔɻrender() ݟΕશͯ ͔Δɻ
• Virtual DOM Ͱ DOM ૢ࡞͍Βͣɻ • ࠶ར༻ੑͷߴ͍ ComponentɻJS ͱςϯϓϨʔτ͕ ͔Ε͍ͯͳ͍ͷͰɺऔΓճ͍͢͠ɻ
ඍົͳͱ͜Ζ • render Ͱฦ͢ͷɺҰͭͰͳ͍ͱ͍͚ͳ͍ɻෳ ͷཁૉΛฦ͢߹ <div /> Ͱғ͏ɻ • Bootstrap
Έ͍ͨʹΫϥε໊ͨ͘͞Μ͚ͭΔͷΛ JSX ͰΔͷඍົɻJSX தʹ Bootstrap ͷΫϥ ε໊͚ͭͣɺSass ͷ @extend ͳΜ͔ͰελΠϦ ϯά͢Δͱྑͦ͞͏ɻ
Q&A • ϞόΠϧͰ͑Δͷ͔ʁಛʹ੍ͳ͍ͣɻ • ରԠϒϥβʁIE8- αϙʔτɻJS ্Ͱ͍Ζ͍ΖΔͷͰɻDOM Λ͘Β͍࣮ͯ͠͠Δײ͡ɻ • ϝϞϦͷফඅ͕େ͖͍ͷͰʁVirtual
DOM ൺֱత͍ܰͣɻ2 ͭϖʔδΛ։͘ΑΓஅવ͍ܰɻ • Facebook ͷ OSS αϙʔτѱ͍ͱฉ͕͘ʁࠓͷͱ͜Ζɺ͔ͳΓ׆ൃɻ • ྑ͍αϯϓϧʁ͋·ΓΒͳ͍ɻFacebook Instagram ͷιʔεΛͬͯΈΔͷ͍͍͔ɻ͋ ͱɺࢥ͍ͭٙ͘υΩϡϝϯτʹ͍͍ͨͯॻ͍ͯ͋Δɻ • 1.0 ·ͰͷϩʔυϚοϓʁΘ͔Βͳ͍ɻ! • JSX Ͱ className ͱ͔͚͋ͬͨͲɺHTML ͱҧ͏ʁJS ʹͳΔͷͰɺ༧ޠɻHTML ͦͷͷͰ ͳ͍ɻΫϩεϒϥβͳཧతͳ DOMɻ • JSX ίϯύΠϧͷιʔεϚοϓରԠʁ·ͩɻPull Request དྷͯΔ͕·ͩϚʔδ͞Εͯͳ͍ɻ https://github.com/facebook/react/pull/833
References • ެࣜαΠτ - ؾʹͳΔͱ͜ΖΛઌճΓͯ͠ॻ͍ͯ͘Ε͍ͯΔɻ http://facebook.github.io/react/index.html • Github https://github.com/facebook/react •
Rethinking best practices - ίϯηϓτ͕த৺ͷߨԋɻ http://www.youtube.com/watch?v=x7cQ3mrcKaY • Introduction to React - ࣮دΓͷࡉ͔͍ɻ http://www.youtube.com/watch?v=XxVg_s8xAms • Khan Academy Ͱͷࣄྫ http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript- library/answer/Ben-Alpert