Download to read offline
![[ code ] codepen /** Comment Component: renders <li /> */ var Comment = React.createClass({ propTypes: { className: React.PropTypes.string, id: React.PropTypes.string, commentText: React.PropTypes.string }, render: function() { return ( <li id={this.props.id} className={this.props.className}> {this.props.commentText} </li> ); } });](https://image.slidesharecdn.com/react-160229032739/75/React-High-level-overview-for-backend-developers-16-2048.jpg)
![[ demo ]](https://image.slidesharecdn.com/react-160229032739/75/React-High-level-overview-for-backend-developers-20-2048.jpg)
React: High level overview for backend developers
- 1.
- 2. About Me Twitter: @vaskointeractv Github:bvasko LinkedIn
- 3. Backbone, Angular, Ember= MV* React = View only What is React?
- 4. 2 way databinding flow
- 5. MV* Scaled 2 waydata binding Keeping the UI in sync becomes quite complicated
- 6. Unidirectional Data Flow (withFlux + React)
- 7. > Data sentto Store > Store Updates > View re-renders
- 8. Unidirectional data flowscaled No explicit data binding UI state is synced across the app
- 9.
- 10. Virtual DOM The virtualdom is a representation of the dom state held in memory
- 11. React performs adiff of the dom’s current state and next state
- 12. The changed nodesare marked for re-render
- 13. You can manuallytweak this when you know something should not update
- 14.
- 15. Components are more thanHTML templates What it isn’t ● No explicit data binding ● You never need to tell your component to re-render What it is ● Markup ● Behavior ● State Each component is a mini self-contained API
- 16. [ code ] codepen /**Comment Component: renders <li /> */ var Comment = React.createClass({ propTypes: { className: React.PropTypes.string, id: React.PropTypes.string, commentText: React.PropTypes.string }, render: function() { return ( <li id={this.props.id} className={this.props.className}> {this.props.commentText} </li> ); } });
- 17. It’s not allabout performance
- 18.
- 19. ● Decoupled fromapplication data - same component can be used in a data entry app, QA app, etc. ● Event handlers are attached after the first rendering pass, allowing for server-side rendering of the HTML or re-use on mobile devices ● Behavior is also passed down through props, making it easier to have the component behave differently based on context
- 20.
- 21.
- 22. React Test Utils Testbrowser events without a DOM
- 23.
- 24. React tools forthe browser Displays component name, state & props Output the selected component to the console with $r New team members can quickly find their way around the codebase
- 26.