Skip to content

Instantly share code, notes, and snippets.

@weisjohn
Created March 23, 2017 21:37
Show Gist options
  • Save weisjohn/1f31fefa5f2aff3f4d320dea4e95a20e to your computer and use it in GitHub Desktop.
Save weisjohn/1f31fefa5f2aff3f4d320dea4e95a20e to your computer and use it in GitHub Desktop.
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
  • preload.show.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

PropTypes

  • 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