2. Agenda
What is React
How React works
React Component lifecycle
State management - MobX
3. What is React
A JavaScript library for building user interfaces
Declarative
Create interactive Uis
Design simple views
Predictable and easier
to debug code
Component Based
Building block of
complex UI
Manage their own
state
Learn Once, write
anywhere
Create Web based
applications
Progressive WebApps
Native Mobile Apps
4. How does React Work
HTML
JS
How Browsers work
Add CSS
DOM Tree
Parser
Render Tree
Painted
Browser
How React works
HTML
JS
Host Tree/
Virtual DOM
Parser
React maps the DOM tree and the Host tree
to allow for minimal updates in the browser
11. MobX - State Management
MobX provides mechanisms to optimally synchronize application state with
the React components by using a reactive virtual dependency state graph that
is only updated when strictly needed and is never stale.