React Components, Flux, and Isomorphism

Federico Torre

React Componentscomponent = view + controller

• 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

React Components

• Based on state (props and state)

• Uni-directional (re-renders every change*)

• Composable (components in components)

• Reusable (thanks to props)

React Components

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

Fluxflux = actions + stores

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)

Using Flux

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.

Flux: Constants

Literally, just constants.

Using Flux

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

Isomorphismone code base for client and server rendering

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

Isomorphism

IsomorphismOn the client load, run Router.run() again with the same data.

This time, React.render() — injects view/html + js/ui.

Federico Torre ftorre104@gmail.com 832-606-0294