Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. - React Docs

When should I split my code out into a component?

Front End Center — Single Responsibility Components: Object-Oriented Design in React @glenmaddern @frontendcenter

What are some of your best practices when working with components?

  • Keep it [F]ocused.
  • Keep it [I]ndependent.
  • Keep it [R]eusable.
  • Keep it [S]mall.
  • Keep it [T]estable.
  • or in short, FIRST.

— Addy Osmani

See : Max Stoiber @mxstbr

Also some best practices here: Our Best Practices for Writing React Components @ MuseFind

How do I output a list of items?

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = => (
    <li key={number.toString()}>
  return <ul>{listItems}</ul>;

const numbers = [1, 2, 3, 4, 5];

  <NumberList numbers={numbers} />,

Or embedded style

function NumberList(props) {
  const numbers = props.numbers;
  return (
      { =>
        <ListItem key={number.toString()}
                  value={number} />

See: Lists and Keys

How can I map over an object?

{Object.keys(yourObject).map(function(key) {
    return <div>Key: {key}, Value: {yourObject[key]}</div>;

Loading Data

How can I load API data into my Component?

Async / Await support in create-react-app

Support async/await #327

Error Handling

Error Handling in React 16 Dan Abramov @dan_abramov

Don’t convert an arrow function just to add a console.log