learn-co-curriculum / mod-5-react-resources Goto Github PK

Below are some helpful resources that will help you when building out your final projects

1. Please remember that the setState method in React is asynchronous.

2. You've likely seen or will see the warning that each child in an array or iterator should have a unique key prop. Example:

this.state.hogs.map((hog, index) => (
  {/*AVOID THIS*/}
  <HogTile key={index} />
  {/*Do this instead*/}
  <HogTile key={hog.id} />
))

Essentially, React is telling you that any child components should have a unique identifier or key prop. When passing your components key props, avoid using the index while you're iterating as a key as it is an anti-pattern.

3. You may also want to be cautious of setting the initial state of a component based on props.

class Hog extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    //try to avoid this as it violates single source of truth
      hogs: props.hogs
    }
  }
}

4. Semantic UI for React is a great CSS library written specifically for React. Make sure you read the usage section of the docs to see how to incorporate it into your React projects. Make sure you're reading the docs for the react version of semantic, not the vanilla JS one. Their other library uses jQuery which does not play well with React at all.

5. Please review error handling in fetch and familiarize yourself with this.

fetch("/api/foo")
  .then( response => {
    if (!response.ok) { throw response }
    return response.json()  //we only get here if there is no error
  })
  .then( json => {
    this.props.dispatch(doSomethingWithResult(json)) 
  })
  .catch( err => {
    err.text().then( errorMessage => {
      this.props.dispatch(displayTheError(errorMessage))
    })
  })

View Some Useful Tools for Writing React on Learn.co and start learning to code for free.