React.js
2 likes•1,362 views
React.js is a JavaScript library that uses a virtual DOM to improve performance issues with traditional web development approaches that involved full page refreshes on data changes. It works by rendering the UI into memory first before writing to the real DOM, allowing it to selectively update parts of the real DOM for better efficiency. Key concepts in React include components, props, state, lifecycle methods, events, and immutability to facilitate fast re-rendering when data changes.
React.js
- 1. React.js
- 2. How the webapplications are/were created Server side templates + jquery Client side templates + MVC libraries
- 3. React.js solves all these problems with Virtual DOM
- 4. Real DOM - simplified
- 5. Virtual DOM - simplified
- 6. Virtual DOM OldNew Result on real DOM
- 7. Hello World
- 8. Hello World
- 9. JSX Optional Recommended for faster, easier development Noninvasive transformer
- 13. Changing data Just rerender the whole application … or at least big part of it
- 14. Changing data
- 15. Changing data
- 16. Component state
- 17. Props vs State Props External data Can’t change it State Internal data Can change it Private for component
- 19. Events
- 20. Form and the state
- 21. Form state with mixin
- 22. Performance Always performs only DOM necessary changes All components are rendered by default „shouldComponentUpdate” to control whether the rendering is required
- 23. Performance
- 24. Performance
- 25. Performance
- 26. Performance App > TodoList > TodoItem#2
- 27. How to implement „shouldComponentUpdate”?
- 28. Mutable data
- 29. Immutable data
- 30. Immutable data Changing the data immutable way is hard Helpers http://facebook.github.io/react/docs/ update.html https://github.com/facebook/immutable-js
- 34. Debugging
- 36. Questions