This document provides an overview of React including: key features like components, JSX, and unidirectional data flow; installation and technical requirements; the component lifecycle; differences from Angular; popular companies using React; and links to examples. It covers React concepts like states, props, and events. Questions from attendees are invited at the end.
2. Introduction to React?
React features
Installation
React philosophy
Coupling vs Cohesion
JSX
Flux
Components
Why components?
React component life
cycle
◦ Initial phase
◦ Lifetime phase
◦ Tear Down phase
Data flow
Virtual DOM
States and Props
Events
Final HTML
Angular VS React
Why React?
Where is React?
Questions?
What is Next?
3. What you should know already
◦ Good knowledge of JavaScript and HTML
◦ Basic understanding of HTML DOM
Technical preparations
◦ Latest Chrome browser on your system
◦ Your preferred IDE
◦ React developer debugger tool (Currently, available
for Chrome)
4.
5.
6. A library for building user interfaces
Designed for View layer
Created by Facebook/Instagram developers
Build reusable & Interactive UI components
Renders your UI and respond to events
7. Build Components not templates
Re-render on every change
Fast Virtual DOM
Unidirectional data binding
Reusable and Interactive components
Components are loosely coupled and highly
cohesive
JSX (Easy to write)
No more explicit DOM operations – everything
is declarative
Own debugger
10. Coupling
The degree to which each program module relies on
each of the other modules.
Cohesion
The degree to which elements of a module belong
together.
11.
12. Writing code made easy and faster
Nothing but writing HTML in JavaScript
It’s not mandatory, you are allowed to write
your JavaScript instead
JavaScript XML Syntax Transform
13. Flux is the application architecture that Facebook uses for
building client-side web applications. It complements React's
composable view components by utilizing a unidirectional data
flow. It's more of a pattern rather than a formal framework
19. Components are reusable
Components are composable
Components are unit testable
Every component has “state” and “props”
Components cab be wrapped using
<div>,<span>,<Counter>,<ActionButton>
24. React follows unidirectional data flow like
other MVC framework
Data flow happen from parent to child in
components by their state and props
Only immediate parent is allowed to pass the
data to it’s children components
25. React has Virtual DOM and event system
React builds a new virtual DOM subtree on every
update
React always compares its virtual DOM on change
not actual DOM
Instead of creating new object, react just identify
what changes are took place and update the
referenced object and DOM accordingly
Optimized for performance and memory
footprint
All updates happen trough a batch process
26.
27. States
Every component has default state object.
State can be set by using this.setState() method.
Probs
In React props are like the HTML properties.
They are used to pass data between components.
name={value} is used to set the property in
component.
this.props.propertyname is used to read values
which are passed from its parent.
31. Feature Angular React
Layers MVC V
Technology - JSX
Core Structure MVC Components
Data Flow 2 way Unidirectional
Owner Google Facebook/Instagram
Architecture - Flux
SEO support Phantom JS SEO friendly
32. Can be used partially for your application
Fast DOM manipulation
Components allows you to separate your entities
Easy to build, grasp and well thought out
SEO friendly – Components can be rendered client
side and server side
JSX let you write HTML in JavaScript