Skip to content

Instantly share code, notes, and snippets.

@alvinsj
Last active December 4, 2017 09:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save alvinsj/2633c9bd43b691fc66c484be4c4d854b to your computer and use it in GitHub Desktop.
Review of the videos from Advanced React (Free version)

https://courses.reacttraining.com/courses/advanced-react-free

  1. Imperative vs. Declarative, "extending" React
    Making use of react lifecycle to make declarative API (from imperative lib). non-dom, nothing-to-render component. e.g. <Sound />, <Tone />, <D3 />

    • nice: declarative > imperative.
    • maybe? component tree with non-DOM component. e.g. sound(LifeCycleComponent, {isPlaying, pitch, frequency})
  2. Implicit State with Compound Components and cloneElement
    Making use of React.Children.map to inject props to children,

    • nice: better absctraction/separation
    • maybe? adding more codes to maintain, e.g. const Tabs = //composable hoc.. . secondly, more coupling between hierarchies.
  3. Implicit State with Compound Components and Context Making use of context to inject child props

  4. Explicit State with Higher Order Components

    • nice: composable component creation
    • maybe? adding layers of components/structure. e.g. composePropsProvider(withMedia, withMoreProps)
  5. Explicit State with Render Props

    • nice: cleaner syntax
    • maybe? a bit magical for <ScrollY>{ y => <header top={y} /> }</ScrollY>
  6. Controlled Custom Components

    • nice: clear(one way) state management
    • maybe? strict
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment