best-practice.md

6 pro tips from react developers

stateless components: This means components that don’t have any this.state = { ... } calls in them. They only deal with incoming “props” and sub-components Anather is stateful components

1. use functional components

• less code
• easier to understand
• stateless
• simpler to test
• no 'this' binding
• easier to extract smaller components

2. Keep your components small

• Read
• Test
• Maintain
• Reuse

3. Understand how to handle 'this'

With ES6 classes, React does not autobind the functions inside that component.

constructor(props) {
  super(props);
  this.bindFn = this.bindFn.bind(this)
}

4. Use a function in 'setState', not an object

5. Utilize prop-types

It can help prevent bugs by ensuring you are using the right data types for your props.

6. Use React developer tools

Google react plugin

7. key

Not all lists need to have keys. A list needs keys if either of the following are true:

• The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must "remember" whether it was checked off. The items shouldn't get amnesia when they render.

• A list's order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.