React intro
- 1. BUILDING WEB APPS WITH REACT Yash Garudkar Software Engineer, Perennial Systems Pune
- 3. � React is a javascript library for building fast and interactive user interfaces for web and mobile applications. � In the MVC architecture, React forms the ‘V’ as it is responsible for how the application looks and feels. � It is open-source, reusable, component based front-end library build by Facebook to manage its views.
- 5. � Easy creation of dynamic web applications � Reusable components � Unidirectional data flow � Small learning curve � Build native applications 💻 - 📱
- 7. 1. JSX (JavaScript XML)
- 8. 2. Virtual DOM Virtual DOM Real DOM
- 9. How does Virtual DOM work?
- 10. Virtual DOM Real DOM Updated nodes PATCH Only changed objects are updated in DOM
- 11. 3. Performance � React uses virtual DOM that makes the web apps fast. � Complex UI is broken into components allowing multiple users to work on each component simultaneously.
- 12. 4. Extensions � React goes beyond simple UI and has many extensions for complete application architecture support. � Server-side rendering � Mobile apps development � Recoil/Redux for state management.
- 13. Component, State, Props and Lifecycle Methods...
- 14. State and Component (stateful)
- 15. Component (stateless) and Props
- 16. Lifecycle Methods ● static getDerivedStateFromProps() ● render() ● componentDidMount() ● componentDidUpdate() ● getSnapshotBeforeUpdate() ● shouldComponentUpdate()
- 17. Now let’s build a React application!