A quick introduction to Facebook's react.js framework. This deck covers react components, flux architecture, and how to build an isomorphic application.
6. • Based on state (props and state)
• Uni-directional (re-renders every change*)
• Composable (components in components)
• Reusable (thanks to props)
React Components
8. Component Data
• State — contained within a component; used to
track changes within a component
• Props — passed in from parent; think of these as
arguments, or inputs to a component; do not
change
9. Summarizing Components
• Very modular .:. reusable
• State based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Can pass data down to children via props, but …
what about coordinating parallel components….?
Listing Card
Photo Gallery
11. Why Flux?
• Component’s source of truth
• Ties components together
• Flux = Actions + Stores 101 Main St, $3500
102 Main St, $3800
Showing 2 favorites
DataStore
{favorites: [
{title: ‘101 main st’,
price: ‘3500’},
{title: ‘101 main st’,
price: ‘3500’}
]}
12. Flux
Available app-wide. We use Fluxxor.
• Actions — things to do; api calls for example
• Stores — one source of truth; all app data
• and constants (aka dispatcher)
18. Using Flux
User clicks
Component
calls action
Action
dispatches
event
Store
receives
event with
payload
Store
updates data,
emits change
Component
re-renders
with new
state
20. Isomorphism
Client side rendering
• Javascript app running
in browser
• Slow initial load :/
• New pages are quick
— just fetch json data
Server side rendering
• Generate page on
server
• Quick initial page load
• SEO works
• HTTP request for each
new page :/
Why not have both?
We use react-router for client-side & server-side routing.
21. Isomorphism
On the server, pass
everything to the react
app.
React.renderToString()
— view/html only; no
js/ui.