introduction to react, flux, and isomorphic apps
TRANSCRIPT
• Forget MVC, think components.
• Component = view/html + controller/js
• JSX (sugar syntax that gets compiled to JS)
React Components
React Components
• Very modular .:. reusable
• State based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Listing Card
Photo Gallery
• Based on state (props and state)
• Uni-directional (re-renders every change*)
• Composable (components in components)
• Reusable (thanks to props)
React Components
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
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
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’}
]}
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)
Flux: Actions
Actions dispatch events with payloads to stores.
Api calls will usually be called in actions.
Flux: Stores
Application-wide data management (aka models)
Components pull data in to their own state from stores.
Store methods manipulate store state &emit changes.
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
IsomorphismClient 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.
Isomorphism
On the server, pass everything to the react app.
React.renderToString() — view/html only; no js/ui.
Isomorphismreact-router routes (key to the whole app)
Router.run() uses this to identify which components to render based on url
IsomorphismOn the client load, run Router.run() again with the same data.
This time, React.render() — injects view/html + js/ui.