Air BnB React/JSX Styleguide: Day 2 Class vs. React.createClass vs. Stateless

Here is day 2 for the Air Bnb Read/JSX style guide review. Yesterday we look at the basics, today we are looking at how Air BnB engineers suggest we look at Class vs. React.createClss vs. Stateless:

• If you have internal state and/or refs, prefer class extends React.Component over React.createClass. eslint: react/prefer-es6-class react/prefer-stateless-function

So we want to write our components with internal state as:

class Listing extends React.Component {
// ...
  render() {
    return <div>{this.state.hello}</div>
  }
}

And if there is no state or refs, prefer normal functions over classes:

function Listing({ hello }) {
  return <div>{hello}</div>;
}

You don't want to write it as either of the following:

class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// or

const Listing = ({ hello }) => (
  <div>{hello}</div>
);

That is actually very useful to know - I try not to write arrow functions myself very often anyways because I never seem to get them right. Thanks Air BnB!

I'll meditate on that one today...

"Whooooooaaaaaaayyyyyyyyuuuuummmmmmmaaaaaayyyyyyyyyeeeeeeeuuuuuuummmmmmmmm..... Whoooooooooooaaaaaaaaayyyyyyyyyuuuuummmmmmmaaaaaaayyyyyyyeeeeeeuuuuuummmmmmmm.... ooooooohhhhhhhhhmmmmmmmmm..."

Thanks for reading!