React tips and hints

React-tips-and-hints.md

Functional stateless (dumb) React component

function Hello(props) {
  return <div>Hello {props.name} </div>;
}

ES6+

const Hello = props => <div>Hello {props.name}</div>;

or ES6+ destructuring on props:

const Hello = ({name}) => (<div>Hello {name}</div>);

Another example:

function ClicableDiv(props) {
  return (
    <div onClick={props.onClick}>
      {props.children}
    </div>
  );
}

The same example with ES6+ destructoring on props:

const ClicableDiv = ({onClick, children}) => (
  <div onClick={onClick}>
    {children}
  </div>
);