Understanding Facebook's React.js
•
3 likes•2,397 views
Slides on React.js covering the virtual DOM, JSX, components, component lifecycle, component state vs props
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Understanding Facebook's React.js
Similar to Understanding Facebook's React.js (20)
Recently uploaded
Recently uploaded (16)
Understanding Facebook's React.js
- 1. React A web tool developed and open-sourced by Facebook
- 2. • React is a javascript library, or tool • framework agnostic • lightweight and recursive What is React?
- 4. Benefits of React • Very modular .:. reusable • State-based .:. predictable • Independent .:. testable • High-performance, thanks to virtual DOM Listing Card Photo Gallery
- 5. React Virtual DOM the ability to re-render on every change!
- 6. • Manipulating the DOM is slow. • Javascript is fast. React Virtual DOM
- 7. Browser React Virtual DOM User’s View Real DOM Background Javascript Process Virtual DOM
- 8. Browser React Virtual DOM User’s View Real DOM null Background Javascript Process Virtual DOM <html> <button> Add text</button> <p></p> </html> First Render
- 9. Browser React Virtual DOM User’s View Real DOM <html> <button> Add text</button> <p></p> </html> Background Javascript Process Virtual DOM Real DOM populated, vDOM cleared
- 10. Browser React Virtual DOM User’s View Real DOM <html> <button> Add text</button> <p></p> </html> Background Javascript Process Virtual DOM <html> <button> Add text</button> <p>New text!</p> </html> User clicks ‘Add text’!
- 11. Browser React Virtual DOM User’s View Real DOM <html> <button> Add text</button> <p>New text!</p> </html> Background Javascript Process Virtual DOM <html> <button> Add text</button> <p>New text!</p> </html> User clicks ‘Add text’!
- 12. • What we get is a seamless, fluid ui • Only things that actually change, do change React Virtual DOM
- 13. • No need to implement the vDOM • But it’s important to know the foundation of the tools you choose! React Virtual DOM
- 14. JSX is a sugar-syntax for JS React JSX
- 16. React JSX JSX can be escaped from JSX-land to JS-land with {} JSX JS
- 17. React JSX That goes for comments too! JSX JS
- 18. React JSX It’s javascript! Use expressions. JSX JS
- 19. React JSX Hmm…. Why not just write javascript… ?
- 20. React JS
- 21. React JS
- 22. React JSX
- 23. component = view + controller React Components
- 24. • Forget MVC, think components. • Component = view/html + controller/js • JSX (sugar syntax that gets compiled to JS) React Components
- 25. React Components
- 26. AppTemplate UserDashboardPage Listing Card Photo Gallery Listing Card Photo Gallery Listing Card Photo Gallery Listing Card Photo Gallery Listing Card Photo Gallery Listing Card Photo Gallery HeaderNav React Components
- 27. • Based on state (props and state) • Uni-directional (re-renders every change*) • Composable (components in components) • Reusable (thanks to props) React Components
- 28. React Components
- 29. Component Lifecycle • componentWillMount() • componentDidMount() *client only • componentWillReceiveProps() • shouldComponentUpdate() • componentWillUpdate() • componentDidUpdate() • componentWillUnmount()
- 30. • React allows you to build react classes of components • From those classes, you build component instances, or elements • Factories create functions that return elements for a given class React.createClass() React.createElement() React.createFactory() React Components
- 31. Performance Components • High-performance, thanks to virtual DOM • Automatically applies best practices • UI handlers, batch manipulations
- 32. Summarizing Components • Very modular .:. reusable • State based .:. predictable • Independent .:. testable • High-performance, thanks to virtual DOM Listing Card Photo Gallery
- 33. in React Components State vs Props
- 34. React Components
- 35. Component Data • State — contained within a component; used to track changes within a component • Props — passed in from parent; think of these as arguments, or inputs to a component; do not change
- 36. Component State • Things that change within the component • Think of an input form, when the user types stuff —> Keep track of those changes in state • … or the currentPhotoIndex the user is on as he swipes through the PhotoGallery —> Keep track of those changes in state Photo Gallery 1 of 12
- 37. Component Props • Things that get passed into the component • Think of props as configurations to your component <PhotoGallery photoCount=“false” /> <PhotoGallery photoCount=“true” /> • The parent component passes down data into the child component via props. Photo Gallery 1 of 12 Photo Gallery