React JS and why it's awesome
-
Upload
andrew-hull -
Category
Software
-
view
23.375 -
download
3
description
Transcript of React JS and why it's awesome
![Page 2: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/2.jpg)
React First Impressions
![Page 3: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/3.jpg)
React First Impressions
![Page 4: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/4.jpg)
React First Impressions
WTF?!
![Page 5: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/5.jpg)
“Reaction” to React
![Page 6: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/6.jpg)
“Reaction” to React
“Ugly.”
![Page 7: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/7.jpg)
“Reaction” to React
“Ugly.”
“Separation of concerns!!”
![Page 8: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/8.jpg)
“Reaction” to React
“Ugly.”
“Separation of concerns!!”
“React is a templating language.”
![Page 9: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/9.jpg)
“Reaction” to React
![Page 10: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/10.jpg)
“Reaction” to React
• Don’t sweat it
![Page 11: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/11.jpg)
“Reaction” to React
• Don’t sweat it• JSX
![Page 12: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/12.jpg)
“Reaction” to React
• Don’t sweat it• JSX• It’s actually just Javascript
![Page 13: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/13.jpg)
“Reaction” to React
• Don’t sweat it• JSX• It’s actually just Javascript• It’s not a templating language
![Page 14: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/14.jpg)
“Reaction” to React
• Don’t sweat it• JSX• It’s actually just Javascript• It’s not a templating language• If you don’t like it, you don’t hafta
![Page 15: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/15.jpg)
React Second Impressions
![Page 16: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/16.jpg)
React Second Impressions
• Oh! There’s 2-way data-binding, like Angular!
![Page 17: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/17.jpg)
React Second Impressions
• Oh! There’s 2-way data-binding, like Angular!• Oh! It can work with Backbone. How I do?
![Page 18: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/18.jpg)
React Second Impressions
• Oh! There’s 2-way data-binding, like Angular!• Oh! It can work with Backbone. How I do?• Oh! It can do animations and SVG!
![Page 19: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/19.jpg)
React Second Impressions
• Oh! There’s 2-way data-binding, like Angular!• Oh! It can work with Backbone. How I do?• Oh! It can do animations and SVG!
Wait. Let’s back up.
![Page 20: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/20.jpg)
Some Fundamentals
![Page 21: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/21.jpg)
#1 Everything is a Component
![Page 22: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/22.jpg)
React has no…
![Page 23: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/23.jpg)
React has no…… controllers
![Page 24: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/24.jpg)
React has no…… controllers… directives
![Page 25: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/25.jpg)
React has no…… controllers… directives… templates
![Page 26: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/26.jpg)
React has no…… controllers… directives… templates… global event listeners
![Page 27: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/27.jpg)
React has no…… controllers… directives… templates… global event listeners… models
![Page 28: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/28.jpg)
React has no…… controllers… directives… templates… global event listeners… models… no view models
![Page 29: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/29.jpg)
React has no…… controllers… directives… templates… global event listeners… models… no view models
Just
![Page 30: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/30.jpg)
React has no…… controllers… directives… templates… global event listeners… models… no view models
Just Components
![Page 31: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/31.jpg)
![Page 32: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/32.jpg)
![Page 33: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/33.jpg)
![Page 34: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/34.jpg)
![Page 35: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/35.jpg)
“Separation of concerns!!”
![Page 36: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/36.jpg)
“Separation of concerns!!”“Do you even MVC?”
![Page 37: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/37.jpg)
What if we “separate” another way?
![Page 38: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/38.jpg)
CartComponent
What if we “separate” another way?
![Page 39: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/39.jpg)
CartComponent
CartListComponent
What if we “separate” another way?
![Page 40: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/40.jpg)
CartComponent
CartListComponent
CartItemComponent
What if we “separate” another way?
![Page 41: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/41.jpg)
CartComponent
CartListComponent
CartItemComponent
ButtonComponentButtonComponentButtonComponentButtonComponent
What if we “separate” another way?
![Page 42: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/42.jpg)
Separation of Concerns Components
![Page 43: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/43.jpg)
Separation of Concerns Components
•composable
![Page 44: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/44.jpg)
Separation of Concerns Components
•composable•reusable
![Page 45: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/45.jpg)
Separation of Concerns Components
•composable•reusable•maintainable
![Page 46: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/46.jpg)
Separation of Concerns Components
•composable•reusable•maintainable•testable
![Page 47: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/47.jpg)
Separation of Concerns Components
•composable•reusable•maintainable•testable
*If* Components are truly self-contained
![Page 48: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/48.jpg)
#2 Single Source of Truth
![Page 49: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/49.jpg)
Traditional data flows
![Page 50: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/50.jpg)
Traditional data flowsNo framework: Any component can communicate with any other component
![Page 51: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/51.jpg)
Traditional data flowsNo framework: Any component can communicate with any other component
Backbone: Pub-subitem.on('change:name', function() {…
![Page 52: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/52.jpg)
Traditional data flowsNo framework: Any component can communicate with any other component
Backbone: Pub-subitem.on('change:name', function() {…
Angular: 2-way data binding and $digest loop$scope.name = …
![Page 53: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/53.jpg)
Traditional data flowsNo framework: Any component can communicate with any other component
Backbone: Pub-subitem.on('change:name', function() {…
Angular: 2-way data binding and $digest loop$scope.name = …
React: 1-way data flow
![Page 54: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/54.jpg)
Data handed from parent to child
check.
props.
![Page 55: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/55.jpg)
Props accessed on this.props
![Page 56: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/56.jpg)
Props accessed on this.props
props.
![Page 57: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/57.jpg)
Props accessed on this.props
props.
![Page 58: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/58.jpg)
Props accessed on this.props
props.
props.
![Page 59: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/59.jpg)
Props accessed on this.props
props.
props.
![Page 60: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/60.jpg)
Props are immutable
![Page 61: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/61.jpg)
props.
Props are immutable
![Page 62: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/62.jpg)
props.
Props are immutable
![Page 63: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/63.jpg)
props.
Props are immutable
Don’t touch my stuff!
![Page 64: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/64.jpg)
props.
State is mutable
![Page 65: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/65.jpg)
props.
State is mutable
![Page 66: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/66.jpg)
props.
State is mutable
![Page 67: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/67.jpg)
props.
State is mutable
Whatever you say, dude.
![Page 68: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/68.jpg)
State can become props
![Page 69: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/69.jpg)
State can become props
props.
![Page 70: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/70.jpg)
State can become props
props.
![Page 71: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/71.jpg)
State can become props
props.
props.
![Page 72: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/72.jpg)
State can become props
props.
props.
![Page 73: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/73.jpg)
Data only flows one way
![Page 74: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/74.jpg)
Data only flows one way
Sure, sounds good…
![Page 75: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/75.jpg)
Data only flows one way
Sure, sounds good…(5 minutes later) Wait!
![Page 76: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/76.jpg)
Data only flows one way
Sure, sounds good…(5 minutes later) Wait! That’s not how the real world works!
![Page 77: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/77.jpg)
CartComponentCartListComponent
CartItemComponent
Data flows up?
<input>
![Page 78: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/78.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
Data flows down with handlers
![Page 79: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/79.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
Data flows down with handlers
![Page 80: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/80.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
CartItemComponent!!changeQty: function() {! … does stuff! this.props.onChange();!}!
Data flows down with handlers
![Page 81: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/81.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
CartItemComponent!!changeQty: function() {! … does stuff! this.props.onChange();!}!
Data flows down with handlers
<input value={this.props.item.qty} onChange={this.changeQty}>
![Page 82: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/82.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
CartItemComponent!!changeQty: function() {! … does stuff! this.props.onChange();!}!
Data flows down with handlers
<input value={this.props.item.qty} onChange={this.changeQty}>
![Page 83: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/83.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
CartItemComponent!!changeQty: function() {! … does stuff! this.props.onChange();!}!
Data flows down with handlers
<input value={this.props.item.qty} onChange={this.changeQty}>
![Page 84: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/84.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
CartItemComponent!!changeQty: function() {! … does stuff! this.props.onChange();!}!
Data flows down with handlers
<input value={this.props.item.qty} onChange={this.changeQty}>
![Page 85: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/85.jpg)
CartComponent!!
<CartListComponent!list={this.state.list}!onChange={this.handleChange}/>
CartListComponent!!
this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>!})
CartItemComponent!!changeQty: function() {! … does stuff! this.props.onChange();!}!
Data flows down with handlers
<input value={this.props.item.qty} onChange={this.changeQty}>
![Page 86: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/86.jpg)
Events flow up, data flows down
![Page 87: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/87.jpg)
Events flow up, data flows down
Does this sound familiar?
![Page 88: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/88.jpg)
Events flow up, data flows down
Does this sound familiar?Just like the DOM.
![Page 89: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/89.jpg)
#3 Virtual DOM
![Page 90: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/90.jpg)
What’s worse than having state in two places at once?
![Page 91: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/91.jpg)
What’s worse than having state in two places at once?
Having state in the DOM.
![Page 92: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/92.jpg)
Touching the DOM is evil
![Page 93: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/93.jpg)
Touching the DOM is evil
• It’s inconsistent
![Page 94: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/94.jpg)
Touching the DOM is evil
• It’s inconsistent• It’s hard to test
![Page 95: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/95.jpg)
Touching the DOM is evil
• It’s inconsistent• It’s hard to test• It’s brittle
![Page 96: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/96.jpg)
Touching the DOM is evil
• It’s inconsistent• It’s hard to test• It’s brittle• It’s EXPENSIVE!
![Page 97: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/97.jpg)
Back to JSX
![Page 98: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/98.jpg)
JSX Compiled
![Page 99: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/99.jpg)
It’s just Javascript
![Page 100: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/100.jpg)
It’s just Javascript
![Page 101: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/101.jpg)
Why learn yet another template language?
![Page 102: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/102.jpg)
What’s actually happening in render() ?
![Page 103: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/103.jpg)
What’s actually happening in render() ?
What does p() return?
![Page 104: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/104.jpg)
What’s actually happening in render() ?
What does p() return?When do I call render()
![Page 105: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/105.jpg)
Virtual DOM
![Page 106: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/106.jpg)
Virtual DOM
• It’s a pure Javascript, in-memory representation of the DOM
![Page 107: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/107.jpg)
Virtual DOM
• It’s a pure Javascript, in-memory representation of the DOM
• render() fires whenever something changes
![Page 108: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/108.jpg)
Virtual DOM
• It’s a pure Javascript, in-memory representation of the DOM
• render() fires whenever something changes
• React modifies the real DOM to match
![Page 109: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/109.jpg)
Virtual DOM
• It’s a pure Javascript, in-memory representation of the DOM
• render() fires whenever something changes
• React modifies the real DOM to match• It’s FAST
![Page 110: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/110.jpg)
Virtual DOM
• It’s a pure Javascript, in-memory representation of the DOM
• render() fires whenever something changes
• React modifies the real DOM to match• It’s FAST• It’s pure
![Page 111: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/111.jpg)
Virtual DOM
• It’s a pure Javascript, in-memory representation of the DOM
• render() fires whenever something changes
• React modifies the real DOM to match• It’s FAST• It’s pure• It just works
![Page 112: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/112.jpg)
… Except when it doesn’t
![Page 113: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/113.jpg)
… Except when it doesn’tHow do I access the actual DOM?
![Page 114: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/114.jpg)
… Except when it doesn’tHow do I access the actual DOM?
How do I know when render() is done?
![Page 115: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/115.jpg)
… Except when it doesn’tHow do I access the actual DOM?
How do I know when render() is done?
![Page 116: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/116.jpg)
… Except when it doesn’tHow do I access the actual DOM?
How do I know when render() is done?
Lifecycle Method
![Page 117: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/117.jpg)
… Except when it doesn’tHow do I access the actual DOM?
How do I know when render() is done?
Lifecycle Method
Actual DOM Node
![Page 118: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/118.jpg)
Yay! Declarative Templates!
![Page 119: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/119.jpg)
Declarative Templates suck!
![Page 120: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/120.jpg)
Declarative Templates suck!
wut.
![Page 121: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/121.jpg)
Declarative Templates suck!
wut.
![Page 122: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/122.jpg)
Declarative Templates suck!
wut.
Sounds legit!
![Page 123: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/123.jpg)
Why all this is awesome
![Page 124: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/124.jpg)
Why all this is awesome
• One-way data flow keeps complexity under control
![Page 125: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/125.jpg)
Why all this is awesome
• One-way data flow keeps complexity under control
• Easy to debug self-contained components
![Page 126: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/126.jpg)
Why all this is awesome
• One-way data flow keeps complexity under control
• Easy to debug self-contained components
• Library doesn’t dictate too much
![Page 127: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/127.jpg)
Why all this is awesome
• One-way data flow keeps complexity under control
• Easy to debug self-contained components
• Library doesn’t dictate too much• Ridiculous potential
![Page 129: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/129.jpg)
Where to go from here?
![Page 130: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/130.jpg)
Where to go from here?
Official React docs http://facebook.github.io/react/
![Page 131: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/131.jpg)
Where to go from here?
Official React docs http://facebook.github.io/react/[email protected]:tastejs/todomvc.git
![Page 132: React JS and why it's awesome](https://reader034.fdocuments.in/reader034/viewer/2022052223/557d5f5fd8b42aba3d8b4f53/html5/thumbnails/132.jpg)
Thank You