A basic introduction what react is?

1. Introduction to React

2. Before starting React?
What is DOM?
DOM is the Document Object Model
Dom works as a model in
front of artist i.e. Web
browser

3. What is React ?
• A library for creating user interfaces
V in MVC Model
• React is a middle man between
DOM and Developer
• Smooths the process and
communication of portrait creation

4. Three main tricks
• Reactive UI
• Virtual DOM
• Components

5. Reactive UI
• When you update with jQuery
you have to tell DOM everything
where to go and what to update.
• Heck, this sounds tedious and
error-prone! Why can’t you just
tell Dom what you want instead
of how to pose?

6. Reactive UI
• As a dev you say what you want.
React figures out how to do it.
• Data change UI updates itself
automatically.
• The idea of reactive UI greatly
simplifies UI development.

7. Virtual DOM
As a dev you want quick update
but Dom and artist (browser)
make dev wait to give more
orders.

8. Virtual DOM
• React make sketches for the dev updates and then updates the
real Dom.
• React keeps record of everything with sketches and show it to
Dom at the right time.
• React is smart. He can sort through the sketches, remove any
duplication and make sure that Dom and the artist do as little
work as possible.

9. Virtual DOM

10. Components
• Blocks of pieces that joins
together to build a big thing.
• Our cars, houses and even our
bodies are all made up of
identifiable components that are
individual, functional units.

11. Components
If you change a component,
everything that includes this
component will be updated
automatically.

12. Props v/s State
• Props are Read Only
• Props is what you received
(Immutable) from parent
component
• State change can be
asynchronous
• State is what you own (Mutable)

13. Let us consider following
components
• Roof
• Wall
• Door
• Window

14. Props
• For <Roof color="blue" /> roof is blue
• For <Roof color="red" /> roof would be red.
• Main idea Components are reusable. I make a
skeleton roof once can use it multiple times with
different properties.
<Roof color="blue" material="wood" />

15. Now the house is built.
What if we want to change the things now?
• For example we want to open or
close the door.
• For that we have state.
• Door state is handle within door
component. Its only doors
business.

16. Life Cycles

17. Life Cycles

18. Thank you
Any Questions?