4-10-notes.md

4-10-notes.md

Passing Data to the Details Component

• PropTypes isn't required for code, but it's for debugging and has been useful
• pattern="route", component=function <-- properties on react router 4 Match objects
• There are "Miss" and "Redirect" components -> react-router.now.sh

Organizing Code in React Components

• Higher Order components wrap other components and imbues those components with functionality

Finishing the Details Component

• PropTypes -- identifying what you need first then doing it.
• Watch the FEM courses on both Auth and the accessible web

Creating a Header Component

• Duplicated "header" code. We need DRY it up with another component
• making a Header.js file
• We can make components with ES6 class syntax -- class Header extends react.Component

import React from 'react'
import { Link } from 'react-router'

class Header extends React.Component {
  render () {
    return (
      <header>
        <h1>
          <Link to='/'>
            Home
          </Link>
        </h1>
      </header>
    )
  }
}

Conditional Display Logic (p1)

• ES6 Classes don't have properties yet, so we have to add propTypes on after

Header.propTypes + {
  handleSearchTermChange: func,
  showSearch: bool, 
  searchTerm: string
}

export default Header

• ES6 Components need a constructor instead of getInitialState()

constructor (props) {
  super(props)
  
  this.state = {
  
  }
}

• What about this?

someMethod () {
  this.setState({black: 'string'})
}

render () { 
  return (
    <header>
      <h1 onChange={this.someMethod)>asdf</h1>
      ,,,
  )
}

• ES6 does not auto-bind methods, resulting in problems accessing methods on the class
• Arrow-functions can sole the this problem

Conditional Display Logic (p2)

• The Header integrates nicely with the other components, data is shared
• It does this via handleSearchTermChange and setState

Making the ShowCard Component Clickable

• Link gives us stuff for free over a
• onChange={this.props.handleSearchTermChange}

Q&A: Shared State & createClass in ES6

• createClass will likely be supported for a while
• React provides "code mods" which are installed with a tool called codemod

React Lifecycle Methods

• getInitialState -- when you first create a component, this is one of the first methods it calls ( aka Constructor)
• componentWillMount -- called right before component is put into the DOM (does get called in Node environment)
• componentDidMount -- called right -after_ component is put into the DOM (does not get called in a Node environment)
  • Do ajax in componentDidMount, callbacks for updating the UI
  • side event listeners? componentDidmount
  • d3...
• componentWillUnmount -- cleanup before elements are removed. i.e. unsubsubscribe, cleanup event listeners, etc
• shouldComponentUpdate
  • if just the ID changed, then I should update. Otherwise, don't look at anything else
  • If you have a component that should never update, return false
  • avoid this until you must use it. React is good at what it does, shallow updates are fast
  • if you have shouldComponentUpdate return false, then later change the component, you might get unexpected bugs
  • try to rely on React -- it's good at what it does.
• PerfTools?
• There is a "React" way to do animations!

Lifecycle Methods Documentation

• componentWillMount is invoked immediately before rendering when new props or state is received

componentDidMount() & AJAZ Requests

• first, add a getInitialState and then a componentDidMount
• componentDidMount
  • doesn't trigger on render, only on mount
  • if you navigate between two pages, you will "re-mount" and will re-fetch data
• bring in axios and use is to make an AJAX call to omdbapi.com w/ ?=imdbID
• Fetch is a cool AJAX thing, check it out