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
4.1k
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
860
Building a Pixel Art Editor with Elm
shuhei
1
770
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
160
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
850
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
150
Other Decks in Technology
See All in Technology
PHPでアクターモデルを活用したSagaパターンの実践法 / php-saga-pattern-with-actor-model
ytake
0
500
もうVPNは古い? VPNを使わずに オンプレサーバーを 管理する手法あれこれ
ebibibi
0
150
SLI/SLO・ラプソディあるいは組織への適用の旅
nwiizo
3
520
保育 AI「たよれるくん」で 保育の質向上をアシスト
skakimoto
0
140
プロダクトの一番の理解者を目指してQAが取り組んでいること 〜現場・マネジメント各視点のプラクティス〜
hacomono
PRO
1
140
バックエンドエンジニアによるフロントエンドテスト拡充の具体的手法
kinosuke01
1
210
ソフトウェア開発におけるインターフェイスという考え方 / PHPerKaigi 2025
k1low
5
680
AI の活用における課題と現状、今後の期待
asei
2
120
英語と日本語の文字をComposeでキレイに並べよう
tomoya_shibata
1
130
コンテナ上シェル悪用の話とPure Bashでcurlが作れた話
ryotosaito
2
360
AI活用の壁を超える! 開発組織への普及の秘訣
kouryou
0
420
AIxIoTビジネス共創ラボ紹介_20250311.pdf
iotcomjpadmin
0
230
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Typedesign – Prime Four
hannesfritz
41
2.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.7k
A Philosophy of Restraint
colly
203
16k
Navigating Team Friction
lara
183
15k
A Tale of Four Properties
chriscoyier
158
23k
The Invisible Side of Design
smashingmag
299
50k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
A designer walks into a library…
pauljervisheath
205
24k
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