ReactJS
17 likes2,289 views
This document discusses React components and their anatomy. It shows how a basic ActionButton component is defined and rendered, then how multiple ActionButton components are used in a Counter component to increment and decrement a count. It explains that React uses components instead of templates for separation of concerns. It also discusses how React re-renders on every state change rather than using two-way data binding, and how the virtual DOM enables efficient re-renders.
![“View model” tightly
couples template to
display logic.
[{“price”: “7.99”, “product”: “Back
scratcher”, “tableRowColor”: “rgba(0, 0, 0,
0.5)”}]](https://image.slidesharecdn.com/react-mit-150309081313-conversion-gate01/85/ReactJS-28-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to ReactJS (20)
Ad
More from Kamlesh Singh (8)
Recently uploaded (20)
ReactJS
- 2. Ben Newman (@benjamn) Paul O’Shannessy (@zpao) React reactjs.org
- 4. Anatomy of a Component
- 5. <ActionButton text="Book flight" onAction={someFunc} />
- 6. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { ! ! ! ! ! } });
- 7. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { ! ! ! ! ! } });
- 8. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { return ( <button class="ActionButton"> <span>button text</span> </button> ); } });
- 9. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { return ( <button class="ActionButton"> <span>{this.props.text}</span> </button> ); } });
- 10. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { return ( <button class="ActionButton" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });
- 11. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { return ( <button class="ActionButton" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });
- 12. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { return ( <button class="ActionButton" onClick={this.props.onAction}> <span>{this.props.text.toUpperCase()}</span> </button> ); } });
- 13. <ActionButton text="Book flight" onAction={someFunc} /> var ActionButton = React.createClass({ render: function() { return ( <button class="ActionButton" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });
- 15. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } });
- 16. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } });
- 17. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } });
- 18. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } });
- 19. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } });
- 20. What makes React different?
- 21. 1. Components, not templates 2. Re-render on update 3. Virtual DOM (and events)
- 24. 1. Components, not templates
- 25. Separation of concerns: ! Reduce coupling, increase cohesion.
- 26. Coupling is: “The degree to which each program module relies on each of the other modules.” http://en.wikipedia.org/wiki/Coupling_(computer_science)
- 27. Cohesion is: “The degree to which elements of a module belong together.” http://en.wikipedia.org/wiki/Cohesion_(computer_science)
- 28. “View model” tightly couples template to display logic. [{“price”: “7.99”, “product”: “Back scratcher”, “tableRowColor”: “rgba(0, 0, 0, 0.5)”}]
- 30. React components are loosely coupled and highly cohesive
- 31. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } });
- 32. 2. Re-render on every change
- 33. <Counter initialCount={4} /> var Counter = React.createClass({ getInitialState: function() { return {count: this.props.initialCount}; }, addToCount: function(delta) { this.setState({count: this.state.count + delta}) }, render: function() { return ( <div> <h3>Count: {this.state.count}</h3> <ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} /> <ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} /> </div> ); } }); - no DOM mutations - no bindings between data and DOM - in general, way less shit to think about
- 34. Best analogy: Website from 1994
- 35. Data changing over time is the root of all evil.
- 36. Re-rendering on every change makes things simple. Every place data is displayed is guaranteed to be up-to-date.
- 37. No magical data binding. Re-rendering on every change makes things simple.
- 38. No model dirty checking. Re-rendering on every change makes things simple.
- 39. No more explicit DOM operations – everything is declarative. Re-rendering on every change makes things simple.
- 40. 3. Virtual DOM
- 41. Won’t rerendering be as slow as molasses?!
- 42. React has a virtual DOM (and events system). Optimized for performance and memory footprint
- 43. On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue • …and batch executes all updates
- 44. It’s fast! Because the DOM is slow!
- 45. It’s fast! Computes minimal DOM operations
- 46. It’s fast! Batched reads and writes for optimal DOM performance
- 47. It’s fast! Usually faster than manual DOM operations
- 48. It’s fast! Automatic top-level event delegation (with cross-browser HTML5 events)
- 49. It’s fast! Can do all this at 60fps, even in a (non-JIT) UIWebView on the iPhone.
- 50. Why Should YOU Use React? • Can be used for parts of your application • Plays well with other libraries and technologies (meteor, rails, node) • Components allow you to split work easily
- 51. Learn more and get involved • http://reactjs.org • #reactjs on Freenode IRC • reactjs on Google Groups • www.facebook.com/careers
- 52. More Links • react-meteor: https://github.com/benjamn/react-meteor • <ActionButton> demo: http://jsfiddle.net/zpao/EFhy4/ • <Clicker> demo: http://jsfiddle.net/zpao/fk5Pc/