Triangle.rb Notes - React
These notes where originally started at the Stacked meetup, but never published due to being incomplete.
React And Flux
2015-05-12 by Nate Hunzaker (Meetup) (Slides)
Frameworks
Good frameworks build on the good ideas of past experience. Don't reinvent the wheel each time you need a car.
We can only hope to make reliable those things in which we understand.
- Rich Hickey
React
- Focus on UI
- Composition
- Unidirectional flow
- Static mental model
Composition
- Everything is broken down into components
- Easy to make; minimal interface requirements
- Components are given properties (
props) - Components manage
state
Applications are broken down into a tree of nested components:
<App>
<Menu />
<Body>
<!-- nest components ad nauseam... -->
</Body>
</App>
React has an optional template language (JSX, built on top of JavaScript) that compiles to plain JavaScript functions.
Templates separate technology, not concerns.
- Pete Hunt
JSX Transpilers
- babel (built-in support)
- browserify (reactify)
- webpack (jsx-loader)
- react-jsx (also react-tools)
DOM Update Process
- Virtual DOM
- State changes
- Diff with old DOM (via Levenshtein Wikipedia)
- Write new DOM (automatic batches!)
Also with module hot reload!
Declarative Programming
- Define interface
- Update state when needed
- Tell React to re-render
Extras
render_component- Rails helper (via react-rails)React.renderToString- Render the entire DOM tree on the serverReact.renderToStaticMarkup- Render the entire tree, but without React hooks (data-*attributes)
Real Apps
Flux is a framework pattern, in the same way as MVC