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
790
Building a Pixel Art Editor with Elm
shuhei
1
720
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
810
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
140
Other Decks in Technology
See All in Technology
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
110
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
120
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
DevRelの始め方
moongift
PRO
1
390
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
250
Discovering AI Models
picardparis
4
3.9k
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
190
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
230
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
学術機関におけるID連携とOpenID Connect
fujie
0
230
PDF Viewer作成の今までとこれから
hunachi
0
470
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Documentation Writing (for coders)
carmenintech
65
4.3k
For a Future-Friendly Web
brad_frost
174
9.3k
Unsuck your backbone
ammeep
667
57k
Code Review Best Practice
trishagee
62
16k
Embracing the Ebb and Flow
colly
83
4.4k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
How STYLIGHT went responsive
nonsquared
93
5.1k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
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