I use two methods to create React components. For stateless components, always use the functional approach:
// Pure functions
var Logo = function({ width, height }) {
return (
<img src="/images/logo.svg" width={width} height={height}/>
);
};
// Or use arrow functions for simpler components
var Logo = ({ width, height }) => <img src="/images/logo.svg" width={width} height={height}/>;
You won't get access to any lifecycle methods, state or ref using the functional approach. In other cases go by createClass or the ES6 classes, whatever feels natural to you. But be consistent.
I would recommend you reading this excellent write-up by Dan Abramov (creator of Redux) that shows the best practices when using ES6 classes– medium.com/@dan_abramov/how-to-use-classes-and-sl….