Download as PDF, PPTX
Uploaded byAndrew Hull
React JS and why it's awesome
This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include: - Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components. - Everything in React is a component, with data flowing in one direction from parent to child via props. State is mutable within a component. - By using a virtual DOM, React can efficiently update the real DOM by only making necessary changes, keeping the interface fast and pure.
More Related Content
![[1B4]안드로이드 동시성_프로그래밍](https://cdn.slidesharecdn.com/ss_thumbnails/1b4-140928080341-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to React JS and why it's awesome
React JS and why it's awesome
- 1. React and whyit’s awesome Andrew Hull @aghull normative.com
- 2.
- 3.
- 4. React First Impressions WTF?!
- 5.
- 6. “Reaction” to React “Ugly.”
- 7. “Reaction” to React “Ugly.” “Separation of concerns!!”
- 8. “Reaction” to React “Ugly.” “Separation of concerns!!” “React is a templating language.”
- 9.
- 10. “Reaction” to React • Don’t sweat it
- 11. “Reaction” to React • Don’t sweat it • JSX
- 12. “Reaction” to React • Don’t sweat it • JSX • It’s actually just Javascript
- 13. “Reaction” to React • Don’t sweat it • JSX • It’s actually just Javascript • It’s not a templating language
- 14. “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
- 15.
- 16. React Second Impressions • Oh! There’s 2-way data-binding, like Angular!
- 17. React Second Impressions • Oh! There’s 2-way data-binding, like Angular! • Oh! It can work with Backbone. How I do?
- 18. 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!
- 19. 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.
- 20.
- 21. #1 Everything isa Component
- 22.
- 23. React has no… … controllers
- 24. React has no… … controllers … directives
- 25. React has no… … controllers … directives … templates
- 26. React has no… … controllers … directives … templates … global event listeners
- 27. React has no… … controllers … directives … templates … global event listeners … models
- 28. React has no… … controllers … directives … templates … global event listeners … models … no view models
- 29. React has no… … controllers … directives … templates … global event listeners … models … no view models Just
- 30. React has no… … controllers … directives … templates … global event listeners … models … no view models Just Components
- 35.
- 36. “Se“pDaora ytoioun eovef nc oMnVcCer?n”s!!”
- 37. What if we“separate” another way?
- 38. What if we“separate” another way? CartComponent
- 39. What if we“separate” another way? CartComponent CartListComponent
- 40. What if we“separate” another way? CartComponent CartListComponent CartItemComponent
- 41. What if we“separate” another way? CartComponent CartListComponent CartItemComponent ButtonComponent
- 42. Separation of ConcernsComponents
- 43. Separation of ConcernsComponents •composable
- 44. Separation of ConcernsComponents •composable •reusable
- 45. Separation of ConcernsComponents •composable •reusable •maintainable
- 46. Separation of ConcernsComponents •composable •reusable •maintainable •testable
- 47. Separation of ConcernsComponents •composable •reusable •maintainable •testable *If* Components are truly self-contained
- 48. #2 Single Sourceof Truth
- 49.
- 50. Traditional data flows No framework: Any component can communicate with any other component
- 51. Traditional data flows No framework: Any component can communicate with any other component Backbone: Pub-sub item.on('change:name', function() {…
- 52. Traditional data flows No framework: Any component can communicate with any other component Backbone: Pub-sub item.on('change:name', function() {… Angular: 2-way data binding and $digest loop $scope.name = …
- 53. Traditional data flows No framework: Any component can communicate with any other component Backbone: Pub-sub item.on('change:name', function() {… Angular: 2-way data binding and $digest loop $scope.name = … React: 1-way data flow
- 54. Data handed fromparent to child check. props.
- 55. Props accessed onthis.props
- 56. Props accessed onthis.props props.
- 57. Props accessed onthis.props props.
- 58. Props accessed onthis.props props. props.
- 59. Props accessed onthis.props props. props.
- 60.
- 61. Props are immutable props.
- 62. Props are immutable props.
- 63. Props are immutable props. Don’t touch my stuff!
- 64. State is mutable props.
- 65. State is mutable props.
- 66. State is mutable props.
- 67. State is mutable props. Whatever you say, dude.
- 68. State can becomeprops
- 69. State can becomeprops props.
- 70. State can becomeprops props.
- 71. State can becomeprops props. props.
- 72. State can becomeprops props. props.
- 73. Data only flowsone way
- 74. Data only flowsone way Sure, sounds good…
- 75. Data only flowsone way Sure, sounds good… (5 minutes later) Wait!
- 76. Data only flowsone way Sure, sounds good… (5 minutes later) Wait! That’s not how the real world works!
- 77. Data flows up? CartComponent CartListComponent CartItemComponent <input>
- 78. Data flows downwith handlers CartComponent! ! <CartListComponent! list={this.state.list}! onChange={this.handleChange}/>
- 79. Data flows downwith handlers CartComponent! ! <CartListComponent! list={this.state.list}! onChange={this.handleChange}/> CartListComponent! ! this.props.list.map(function(item) {! <CartItemComponent item={item}! onChange={this.props.onChange}/>! })
- 80. Data flows downwith handlers 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();! }!
- 81. Data flows downwith handlers 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();! }! <input value={this.props.item.qty} onChange={this.changeQty}>
- 82. Data flows downwith handlers 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();! }! <input value={this.props.item.qty} onChange={this.changeQty}>
- 83. Data flows downwith handlers 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();! }! <input value={this.props.item.qty} onChange={this.changeQty}>
- 84. Data flows downwith handlers 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();! }! <input value={this.props.item.qty} onChange={this.changeQty}>
- 85. Data flows downwith handlers 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();! }! <input value={this.props.item.qty} onChange={this.changeQty}>
- 86. Events flow up,data flows down
- 87. Events flow up,data flows down Does this sound familiar?
- 88. Events flow up,data flows down Does this sound familiar? Just like the DOM.
- 89.
- 90. What’s worse thanhaving state in two places at once?
- 91. What’s worse thanhaving state in two places at once? Having state in the DOM.
- 92. Touching the DOMis evil
- 93. Touching the DOMis evil • It’s inconsistent
- 94. Touching the DOMis evil • It’s inconsistent • It’s hard to test
- 95. Touching the DOMis evil • It’s inconsistent • It’s hard to test • It’s brittle
- 96. Touching the DOMis evil • It’s inconsistent • It’s hard to test • It’s brittle • It’s EXPENSIVE!
- 97.
- 98.
- 99.
- 100.
- 101. Why learn yetanother template language?
- 102. What’s actually happening in render() ?
- 103. What’s actually happening in render() ? What does p() return?
- 104. What’s actually happening in render() ? What does p() return? When do I call render()
- 105.
- 106. Virtual DOM •It’s a pure Javascript, in-memory representation of the DOM
- 107. Virtual DOM •It’s a pure Javascript, in-memory representation of the DOM • render() fires whenever something changes
- 108. 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
- 109. 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
- 110. 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
- 111. 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
- 112. … Except whenit doesn’t
- 113. … Except whenit doesn’t How do I access the actual DOM?
- 114. … Except whenit doesn’t How do I access the actual DOM? How do I know when render() is done?
- 115. … Except whenit doesn’t How do I access the actual DOM? How do I know when render() is done?
- 116. … Except whenit doesn’t How do I access the actual DOM? How do I know when render() is done? Lifecycle Method
- 117. … Except whenit doesn’t How do I access the actual DOM? How do I know when render() is done? Lifecycle Method Actual DOM Node
- 118.
- 119.
- 120.
- 121.
- 122. Declarative Templates suck! wut. Sounds legit!
- 123. Why all thisis awesome
- 124. Why all thisis awesome • One-way data flow keeps complexity under control
- 125. Why all thisis awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components
- 126. Why all thisis awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components • Library doesn’t dictate too much
- 127. Why all thisis awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components • Library doesn’t dictate too much • Ridiculous potential
- 128. A small demo http://www.emergent.info/iphone-hairgate
- 129. Where to gofrom here?
- 130. Where to gofrom here? Official React docs http://facebook.github.io/react/
- 131. Where to gofrom here? Official React docs http://facebook.github.io/react/ TodoMVC git@github.com:tastejs/todomvc.git
- 132.