Components

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 https://addyosmani.com/first

See : https://twitter.com/mxstbr/status/790084862954864640 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 = numbers.map(number => (
    <li key={number.toString()}>
      {number}
    </li>
  ));
  return <ul>{listItems}</ul>;
}

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

ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

Or embedded style

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

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