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
890
Building a Pixel Art Editor with Elm
shuhei
1
790
Redux Middleware Wars (Japanese)
shuhei
8
1.9k
Redux Middleware Wars (English)
shuhei
0
170
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
870
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.7k
shake-upを科学する
rsakata
7
1k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.3k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
23
6.2k
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
How GitHub (no longer) Works
holman
314
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Gamification - CAS2011
davidbonilla
81
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Why Our Code Smells
bkeepers
PRO
337
57k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
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