Dano Manion

ReactJS Notes

ReactJS

  • Component based design (Modular Approach), Small Pieces (Components)
    • Everything is a Component!
    • Sort of like Drupal’s modular design except for design
    • Each piece of the Front-End Architecture represents a piece of the interface
      • Example: App / Header / Content, Article Teaser List / Footer
        • A bunch of fake components that contain real HTML
  • One-Way data flow, perfect for functional programming
  • Don’t run the app on the body element as this could have consequences with 3rd party plugins that might be doing the same. It could lead to subtle reconciliation issues.
  • When adding Ajax request, be sure to place them within the componentDidMount() function.

Terms

  • VirtualDom - Fast, in memory, representation of the DOM
    • Is what ReactJS prefers to change over the actual DOM, since changing the DOM is one of the slowest aspects of web apps
    • The VirtualDom is an abstraction, so you don’t actually have to render / paint things, grab actual images, etc.
    • Sort of reminds me of the process used in Video Compression. Where the only stored information is that of which is changed.
    • Diffing Algorithm : If the parent element is removed, React assumes enough changes have already occurred enough below in the sub-tree that it just knows to rerender the whole thing
      • Unless the changes are of the same type?
      • Insert new elements on the end or use key attributes, for performance
      • Key attributes are like an index for elements for quick performance
  • Higher Order Components: is a function that takes a component and passes it into a different component class that’s going to create some methods and render that initial component pass-in.
    • Act like a wrapper
    • used to be done with mixins, no can do with ES6
  • Flux is more of a pattern then a framework

Requirements

  • React - Core library
  • React DOM - Another to render it to the DOM
  • Webpack - used to bundle all assets into a single file
  • Babel - E6 Transpiler
  • NodeJS - for npm libraries

Component Lifecycle

  1. componentWillMount - Immediately before initial rendering
  2. componentDidMount - Immediately after initial rendering
  3. componentWillReceiveProps - When component receives new props
  4. shouldComponentUpdate - Before render, after receiving new props or state
    • can return false To prevent rendering
  5. componentWillUpdate - Before render, after receiving new props or state
  6. componentDidUpdate - After component’s updates are flushed to DOM
  7. componentWillUnmount - Immediately before remiding? the component from DOM

Sources