The document discusses React components, highlighting their modular, state-based, and reusable nature, while emphasizing the importance of props and state for data management. It introduces Flux as a way to manage application data through actions and stores, providing a single source of truth for component coordination. Additionally, it explains isomorphism in rendering, detailing how to achieve both client-side and server-side rendering efficiently using React Router.

1. React Components,
Flux, and Isomorphism
Federico Torre

2. React Components
component = view + controller

3. • Forget MVC, think components.
• Component = view/html + controller/js
• JSX (sugar syntax that gets compiled to JS)
React Components

4. React Components
• Very modular .:. reusable
• State based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Listing Card
Photo Gallery

5. React Components

6. • Based on state (props and state)
• Uni-directional (re-renders every change*)
• Composable (components in components)
• Reusable (thanks to props)
React Components

7. 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

10. Flux
flux = actions + stores

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)

13. Using Flux

14. Flux: Actions
Actions dispatch events
with payloads to stores.
Api calls will usually be
called in actions.

15. 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.

16. Flux: Constants
Literally, just constants.

17. Using Flux

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

19. Isomorphism
one code base for client and server rendering

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.

22. Isomorphism
react-router routes (key to the whole app)
Router.run() uses this to identify which components to render based on url

23. Isomorphism

24. Isomorphism
On the client load, run Router.run() again with the same data.
This time, React.render() — injects view/html + js/ui.

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