React JS and why it's awesome
•
429 likes•108,009 views
Introduction to React JS library and some of the fundamentals that set it apart from other choices
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to React JS and why it's awesome
Similar to React JS and why it's awesome (20)
Recently uploaded
Recently uploaded (20)
React JS and why it's awesome
- 1. React and why it’s awesome Andrew Hull @aghull normative.com
- 4. React First Impressions WTF?!
- 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.”
- 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
- 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.
- 21. #1 Everything is a Component
- 22. React has no…
- 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
- 36. “Se“pDaora ytoioun e ovef 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 Concerns Components
- 43. Separation of Concerns Components •composable
- 44. Separation of Concerns Components •composable •reusable
- 45. Separation of Concerns Components •composable •reusable •maintainable
- 46. Separation of Concerns Components •composable •reusable •maintainable •testable
- 47. Separation of Concerns Components •composable •reusable •maintainable •testable *If* Components are truly self-contained
- 48. #2 Single Source of Truth
- 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 from parent to child check. props.
- 55. Props accessed on this.props
- 56. Props accessed on this.props props.
- 57. Props accessed on this.props props.
- 58. Props accessed on this.props props. props.
- 59. Props accessed on this.props props. props.
- 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 become props
- 69. State can become props props.
- 70. State can become props props.
- 71. State can become props props. props.
- 72. State can become props props. props.
- 73. Data only flows one way
- 74. Data only flows one way Sure, sounds good…
- 75. Data only flows one way Sure, sounds good… (5 minutes later) Wait!
- 76. Data only flows one 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 down with handlers CartComponent! ! <CartListComponent! list={this.state.list}! onChange={this.handleChange}/>
- 79. Data flows down with 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 down with 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 down with 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 down with 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 down with 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 down with 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 down with 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. #3 Virtual DOM
- 90. What’s worse than having state in two places at once?
- 91. What’s worse than having state in two places at once? Having state in the DOM.
- 92. Touching the DOM is evil
- 93. Touching the DOM is evil • It’s inconsistent
- 94. Touching the DOM is evil • It’s inconsistent • It’s hard to test
- 95. Touching the DOM is evil • It’s inconsistent • It’s hard to test • It’s brittle
- 96. Touching the DOM is evil • It’s inconsistent • It’s hard to test • It’s brittle • It’s EXPENSIVE!
- 97. Back to JSX
- 98. JSX Compiled
- 100. It’s just Javascript
- 101. Why learn yet another 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. Virtual DOM
- 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 when it doesn’t
- 113. … Except when it doesn’t How do I access the actual DOM?
- 114. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done?
- 115. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done?
- 116. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done? Lifecycle Method
- 117. … Except when it doesn’t How do I access the actual DOM? How do I know when render() is done? Lifecycle Method Actual DOM Node
- 120. Declarative Templates suck! wut.
- 121. Declarative Templates suck! wut.
- 122. Declarative Templates suck! wut. Sounds legit!
- 123. Why all this is awesome
- 124. Why all this is awesome • One-way data flow keeps complexity under control
- 125. Why all this is awesome • One-way data flow keeps complexity under control • Easy to debug self-contained components
- 126. 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
- 127. 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
- 128. A small demo http://www.emergent.info/iphone-hairgate
- 129. Where to go from here?
- 130. Where to go from here? Official React docs http://facebook.github.io/react/
- 131. Where to go from here? Official React docs http://facebook.github.io/react/ TodoMVC git@github.com:tastejs/todomvc.git
- 132. Thank You