React
•
1 like•648 views
This document discusses React, a JavaScript library for building user interfaces. It summarizes that React uses virtual DOM re-rendering to update the user interface whenever data changes, allowing developers to build user interfaces out of independent and reusable components in a declarative way using one-way data flow via props and state. Everything in React is composed of components that manage their own data and state.
Report
Share
React
- 1. React
- 2. import React from 'react'; React.render(<p>Hello</p>, document.body);
- 4. @ream88
- 8. React
- 10. #1 Re-rendering
- 12. Data changing over time is the root of all evil.
- 13. Re-rendering Every place data is displayed is guaranteed to be up-to-date.
- 14. Re-rendering No magical data binding.
- 15. Re-rendering No model dirty checking.
- 16. Re-rendering No more explicit DOM operations - everything is declarative.
- 17. Re-rendering Built in - Virtual DOM!
- 18. #2 Components
- 19. Frameworks — Controllers — Directives — Templates — Global Event Listeners — Models — View Models
- 20. React — Controllers — Directives — Templates — Global Event Listeners — Models — View Models
- 21. ?— Seperation of concerns — MVC
- 22. Everything is a component
- 28. Components — composable — resuable — maintainable — testable
- 29. #3Single source of truth
- 30. Data flow — no framework: any component can communicate with any other component — Backbone: pubsub — Angular & Ember: two-way binding — React: one-way data flow
- 31. class CartItem extends React.Component { render() { return ( <div> <Button text="Remove" /> </div> ) } } class Button extends ReactComponent { render() { return ( <button>{this.props.text}</button> ) } }
- 32. Props — passed from parents to their childs — immutable
- 33. class Button extends React.Component { render() { this.props.text = 'bar' // not working return ( <button>{this.props.text}</button> ) } }
- 34. State — internal only — mutable — can be passed as props
- 35. class CartItem extends React.Component { render() { this.setState({ text: 'Remove this item' }) return ( <div> <Button text={this.state.text} /> </div> ) } }
- 36. Events — flow up from components
- 37. class CartItem extends React.Component { removeItem() { /* ... */ }, render() { return ( <div> <Button text="Remove" onClick={this.removeItem} /> </div> ) } } class Button extends React.Component { render() { return ( <button onClick={this.props.onClick}>{this.props.text}</button> ) } }
- 38. Read more — @reactjs — https://egghead.io — https://facebook.github.io/react/index.html — http://www.slideshare.net/AndrewHull/react-js- and-why-its-awesome — http://www.slideshare.net/KamleshKumarSingh/ react-mit
- 39. Thx!