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
760
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
840
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
150
Other Decks in Technology
See All in Technology
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
750
OPENLOGI Company Profile for engineer
hr01
1
20k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
200
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.2k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.4k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
340
What's new in Go 1.24?
ciarana
1
110
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
960
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Music & Morning Musume
bryan
46
6.4k
The Invisible Side of Design
smashingmag
299
50k
GraphQLとの向き合い方2022年版
quramy
44
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Visualization
eitanlees
146
15k
Bash Introduction
62gerente
611
210k
Gamification - CAS2011
davidbonilla
80
5.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Unsuck your backbone
ammeep
669
57k
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