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

fem-react-2017.03.27.md

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