Journal of Simon Eames

React and Redux

Looking at different frameworkds for a few new projects at work and It's about time to catch up on the current generation These are my over view notes from React base on a quick look at pluralsight .

Basics of React

Why use React?

  • fast, uses virtual dom
  • Composibility, props (similar to html attributes
  • Plugable (just a view layer)
  • Isomorphic Friendly (doesn't need the dom to render)
  • Simple
  • Battle Proven (facebook, reddit, yahoo)

React creates Controller Views,

  • controller views: handle data conscerns and compose other dump cpomponents together
  • Controller views ahas child views underneath.

React uses JSX

  • 'HTML' in javascript
    • JSX can not use JS reserved words (EG. className, not class)
  • Minor differences
  • compiles down to javascript.
  • Optional since it can be rendered down.

Example of jsx<–>s equivalence

<h1 color="red">heading here</h1>

React.createElement("h1", {color: "red"}, "heading here")

Separation of concens

  • Putting html in js?
  • Others (angular, knockout, ember) puts JS into html
  • React puts html into JS.
  • HTML5 & JS must be keep in-sync
    • Out of sync issue occur
  • Debugging is easier, since putting html into JSX causes error to include the error line.

Virtual DOM

  • Drawing DOM is expensive.
  • Virtual DOM compares current state to new state.
  • Update can then update in the most efficient way.
  • Without virutal DOM the whol ething must be updated.
  • For even faster rendering react provides:
    • shouldComponentUpdate
    • PureRenderMixin and immutability allows reference comparisons.
  • Virtual DOM provides Synthetic Events:
    • abstracts away browser quirks
    • Allows optimizing to event attaching.
  • Isomorphic Support (render without DOM)
  • Can be used in natively (React Native)

Summary

Fast, Pluggable, Battle, proven

JSX

'HTML' that compiles to JS
Strict compile time checking

Virtual DOM

Performant
Simple Mental Model
Synthetic Events
Enables Isomorphic rendering and React Native

React Components and Patterns

  • Componenets are just React classes
    • Contains a render function
  • Main.js uses React.render(<component />, document.getElementById(elementToRenderOn))
  • Routing is just changing what to render on win events
  • Naming Conventions change.

Lifecycle

Procs
  • Looks like HTML attr
  • Immutable
State
  • Mutable
  • Should only use on controller view, eg.top level, pass data down via procs
Lifecycle functions
  • getInitalState : set inital state of component
  • getDefaultProps : set properties if not set by view
  • componentWillMount
    • before rendere,
    • set inital state
  • componentDidMount
    • after render
    • access DOM, integration with 3rd part, set timers, ajax work
  • componentWillReceiveProps
    • when properties have changes
    • set state before a render
  • shouldComponentUpdate
    • before renders & when new props are eing received
    • Perf, return false for unnecessary re-renders
  • componentWillUpdate
    • just before rendering when new props/state are being received
    • prepare for an update
  • componentDidUpdate
    • after updates are flushed to the DOM
    • Work with the DOM after an update
  • componentWillUnmount
    • just before unmounting from the DOM
    • cleanup, & destroy
Dynamic Children
  • require a key for each child
  • used by react to reorder/destroy
  • <tr key={author.id}>

Summary

Props
Pass data to child components
State
Data in Controller View
Lifecycle
Handle bootstrapping and third party integrations

Composition

  • Controller View
    • Top level React Component
    • 'owns' child component
    • sets props on children (handles data flow)
    • interacts with stores
    • Nesting controler views view is possilble but not recommended.
    • Difference between smart and dumb components
  • Prop types
    • List of validation rules that are needed.
    • PropTypes are only run in Development mode
  • Mixins
    • Shares code between concerns (eg components)