Introduction to React, Flux, and Isomorphic Apps
0 likes997 views
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.
![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’}
]}](https://image.slidesharecdn.com/introtoreactfluxiso-150615232259-lva1-app6891/85/Introduction-to-React-Flux-and-Isomorphic-Apps-11-320.jpg)
Introduction to React, Flux, and Isomorphic Apps
- 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
- 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
- 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.