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

DOM Update Process

  1. Virtual DOM
  2. State changes
  3. Diff with old DOM (via Levenshtein Wikipedia)
  4. 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 server
  • React.renderToStaticMarkup - Render the entire tree, but without React hooks (data-* attributes)

Real Apps

Flux is a framework pattern, in the same way as MVC

Frameworks