Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
notes for Frontend Masters - Complete Intro to React v2 - March 27th, 2017

Frontend Masters - Complete Intro to React v2 - March 27th, 2017

Routing in React

  • react-router@v4-alpha

HashRouter Configuration

  • HashRouter - higher-order component
  • Match elements with a component passed in via prop
  • Fb recommend extends
  • ( {/* .jsx comments */} )

Creating the Search Page

  • dangerouslySetInnerHTML
  • webpack's devServer, historyApiFallback: true
  • HashRouter => BrowserRouter
  • Link

Loading JSON Files

  • webpack json-loader
  • Seach component, <pre>
  • JSON.stringify has replacers to deal with circular objects...

Iterating Through Data

  • [].map
  •, no =>?
  • "best practices in React are just best practices in Javascript"
  • fat-arrow functions are explicitly different than function, it's not the same thing...
  • template strings

Creating the ShowCard Component

  • ShowCard component
  • es6 destructuring assignment

Key Prop

  • React uses this to optimize replacing from virtual DOM to DOM
  • never use map index for key
  • more key stuff
  • stateless functional components vs. React components


  • specifying props via propTypes
  • React.PropTypes.shape - this is interesting, instead of React.PropTypes.object, you can:
  propTypes: {
    show: shape({
      poster: string,
      title: string
  • documentation + weak type checking
  • shape helps you not be lazy
  • shape is nestable

Using the Spread Operator in JSX

  • <Comp {...val} />
  • simplifying ShowCard component

Managing State

  • React tries to address state bugs by attempting to minimize the number of places that state can change
  • one-way data flow
  • children can notify parents via func invoke, but parents have to flow back down

getInitialState() and setState()

  • getInitialState() - return first state of component
  • re-render never fires on an input, captures the event and is falls on the floor
  • setState() does shadow merge
  • forceUpdate() is there if you need it and are interacting w/ a 3rd party
  • lots of questions that deal with other weird stuff
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.