workshop on react

1. BUILDING WEB APPS WITH
REACT
Yash Garudkar
Software Engineer,
Perennial Systems Pune

2. What is React?

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.

4. Why use React?

5. � Easy creation of dynamic web applications
� Reusable components
� Unidirectional data flow
� Small learning curve
� Build native applications 💻 - 📱

6. Features of React

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!