Using ES6 class syntax for react components

Question

As far as I am aware there are two ways to create and export a react class using ES6.

Maybe considered the old way:

export default React.createClass({
   ...
});

Maybe considered the new way:

export class Todo extends React.Component {
   ...
};

I was asked today why I prefer the 'old' way compared to the 'new' way. I didn't really have a good answer apart from the fact that the 'new' way uses extends, and as a result, inheritance. I was taught in c# to always favour composition over inheritance. And in javascript the same, preferring to use the revealing module pattern over prototypical inheritance for 95% of cases.

Being fairly new to react, my question is, am I missing something to why the new way is better than the old way? In my eyes it is far cleaner to have a function that accepts parameters and returns an object compared to inheriting from one.

Would it maybe not be nicer to follow a conversion, TodoComponent, maybe, or add some sort of decorator rather then extending from React.Component?

Adrian Hall · Accepted Answer · 2016-01-11 22:00:22Z

1

I tend to always look at the React team examples for guidance. In this case, they've provided a whole example dedicated to ES2015. That clearly covers the "new" syntax, as you refer to it.

I also peruse a lot of code looking at how things are done. Most projects using ES2015 are using the "new" syntax as well.

answered Jan 11, 2016 at 22:00

Adrian Hall

8,0351 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hatem Jaber · Accepted Answer · 2015-08-21 22:05:51Z

0

I can't tell you which is better, I'm in the middle. But the one thing that you have to keep in mind is that the majority will go with the new syntax, especially as ES6 becomes more available. You should get used to seeing it and using it because you will see more and more examples of it in the future while people are migrating to it. It's almost a necessity to stay relevant and not fall back. You will get used to it, I'm actually starting to like it more and more.

answered Aug 21, 2015 at 22:05

Hatem Jaber

2,4372 gold badges25 silver badges40 bronze badges

Comments

ryan0319 · Accepted Answer · 2016-01-11 22:10:05Z

0

The ES6 syntax will be transpiled into ES5 as modern browser do not fully support ES6 yet. One benefit of the old way would be that [mixins] can only be used the old way. The new way will result in less typing and a few extra functions. Especially scoping through arrow functions! Checkout: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins

answered Jan 11, 2016 at 22:10

ryan0319

4122 silver badges9 bronze badges

Collectives™ on Stack Overflow

Using ES6 class syntax for react components

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related