It really depends on what you're trying to do.

Function components are easy to write, make it impossible to use component state and are automatically optimized (because by not having any state they are pure and therefore will only need re-rendering when their props change).

Class components provide you a few more escape hatches like component state and lifecycle control. They give you access to everything React has to offer at the cost of some syntactic overhead and having to take care of render optimization yourself.

The createClass function is the only way to use mixins in React components (though you can replicate most of the functionality first provided via mixins using higher-order components). They're also probably the easiest way to shoot yourself in the foot (by making your components excessively complex via multiple mixins, and because they automatically bind methods, which may be confusing when used in combination with other components).

In my opinion you should start out with function components. If possible, all your component composition should happen via function components to make it easier to reason about. This strongly plays into the practice of having "dumb components" (pure) and "smart components" (containers). When you need to introduce state, wrap your pure component in a class component that provides the state to the pure component which merely renders that state.

I wouldn't recommend using the createClass function anymore unless you have to work with a code base that heavily relies on mixins that can't be easily replaced with higher-order components.

I had written my MERN tutorial using React.createClass and ES5. Later, I created an ES6 version, here's the github repo -- I've put in a good amount of comments within the source itself.

You could compare the two sets of sources and take your pick, but here's my take:

I liked the following in ES6 classes:

• ES6 class feels more natural and the syntax is a little more compact
• Lots of code out there I had to read was in ES6, it was easier to comprehend them, I didn't have to context-switch.

But I also did not like the following:

• ES6 has no auto-binding, this is a pain. I kept slipping up and running into run-time errors due to this.
• ES6 classes don't have static variables, things like defining contextTypes is a little convoluted.

Having said that, I'll probably stick to ES6 since that seems to be the future.

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….

Everyone in this thread brings up great points. Only thing I would add is if you are just now learning React start with the tutorial on their site and when you are searching for answers to problems and see people using ES6, ignore it. Just focus on what React is doing and understanding how React actually works.

Learning the fundamentals of React is very important and requires 100% of your attention. If you try and learn both at once this will probably slow you down from learning React and also introduces things like Babel and Webpack. Take it one step at a time. Learn React.

Thats my two cents.

You will probably find more modern examples with ES6 and classes, this is generally a good thing. Code feels a little more "natural" this way aswell.

If you are new to react, you should definitely spend a day or two following the latest Frontend-Masters workshop: livestream.com/accounts/4894689/events/5033959

Your question and so many others perfectly explained

Use ES6 classes as they have better performance than React.createClass as React.createClass have autobinding (it automatically binds the functions in the component) whereas in ES6 components you can choose to bind particular functions.

And to support my rationale i did a quick perf test creating component using both React.createClass and ES6 classes. ES6 classes were a bit quicker when the components had a lot of functions.

Will post the source to github.

Note: ES6 Classes are not faster in every case. It also depends on your component.

I agree with what @somu said. Both have different syntax, but the end result is same. As far as I know the React team encourages to use ES6 class syntax. But if you have written significant portion of your code in older React.createClass() syntax I suggest sticking to it.

Further Reading :

• toddmotto.com/react-create-class-versus-component/
• reactkungfu.com/2015/07/what-react-component-class-syntax-should-i-use/

There is no better/worse way to do it. It all depends on your strengths, if you know ES6, go with plain classes, or else React.createClass is good as well. However, considering that ES6 will be standard in near future, I would recommend you go with plain classes.

One cannot say one method is superior to the other. Both have different syntax for doing the same things like initializing state, defining properties, etc.

If you use React.component, you have to use something like babel to transpile the code to es5. Because class keyword is part of es6 and not supported by all browsers.

Facebook might have plans to remove React.createClass in future. But, you are good to use it for now.

Finally, it all comes down to preference. Use the one which you feel more comfortable with and don't mix both in a single project just for the sake of simplicity.