The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

9:15
In this video, we’ll walk through refactoring all of our note components to learn how to go from createClass to utilize JavaScript classes to build our React components as well as how to handle propTypes with ES6.
Watch this lesson now
Avatar
egghead.io

In this video, we’ll walk through refactoring all of our note components to learn how to go from createClass to utilize JavaScript classes to build our React components as well as how to handle propTypes with ES6.

Avatar
Alex

This video and the next one can be clearly cut out of this series. They do not bring anything new except for the fact that we do not need commas inside class definitions to separate our method definitions (which could be tacked onto the previous video).

It just seems like an extra that wastes time. Students can clearly go through the code and do the repetitive things on their own. I'd rather see more useful content :-)

Overall, I find this series very useful and easy to follow. Great job!

In reply to egghead.io
Avatar
Nils

What is the benefit of using es6 class instead of React.createClass ?

Avatar
Tyler

That is a question that the JavaScript community is kind of up in arms about right now. I personally use createClass still as I'm not a huge fan of classes in JS. However, a lot of really smart people use class. Here's a pretty good article describing the pros and cons. http://reactjsnews.com/composing-components/

In reply to Nils
Avatar
egghead.io

The lesson video has been updated!

Avatar
Mac Ryan

@Alex - I see your point but disagree.

Having already looked quite a bit into React before following this series, I was surprised the series itself did not started with the ES6 syntax directly, but then I realised that possibly my case (back-end dev recently got more involved in front-end) is not the typical one.

I see that while for me ES6 is just a superior syntax, very similar (or heavily influenced?) by python, for many of my seasoned frond-end colleagues is confusing.

I think the author made a clever decision in starting with ES5 (so that most people will feel "right at home") but then moving to ES6 (if you are picking up React, you are going to write new code, there is no reason whatsoever to use legacy syntax).

Full disclosure: in following the lessons I already used ES6 along the way [and dropped the firething site in favour of redux].

In reply to Alex
Avatar
Mike

I agree, not everyone is an ES6 expert yet (myself included, for sure), so seeing this video being done with "traditional" ES5, and then refactored to ES6 was immensely helpful.

In reply to Mac Ryan
Avatar
Ben Turner

Was puzzled a bit how your app kept working in the first half of the exercise, whilst mine was exploding (due to the lack of "const" keyword in NotesList) - perhaps you had caching / some other confusion your end ? In any case, I spent quite some time debugging before just slogging through the rest of the video with a broken app, and was pleased to see the fix come later on - but some warning to other people "playing along at home" whilst watching might be good, else they end up getting lost down similar rabbit holes.

In reply to Mike
Avatar
Tyler

I agree. This was one of those moments I didn't catch until the videos were published. Once I do another update I'll add a note in that not having const just breaks everything but it does get fixed later in the video.

In reply to Ben Turner
Avatar
Jori

Hi. First off, great series! A question though: why do we have to bind propTypes seperately to a class?

Avatar
Tyler

Good question. class definitions in ES6 only allow you to define methods and not properties. Hence why we can't put propTypes by our methods in our class and instead need to be added after.

In reply to Jori
Avatar
Derek Hannah

Id advise against teaching the es6 class syntax, its harmful to all of us. We need to prefer composition over classical inheritance. https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.3ab6fv5ob

Avatar
Derek Hannah

also Peter Hunt of the Facebook React team has told me personally that they do not use the es6 class syntax at Facebook

In reply to Derek Hannah
Avatar
Derek Hannah

other than that this whole course was dope thanks!

In reply to Derek Hannah
Avatar
Joel

Id advise against teaching the es6 class syntax, its harmful to all of us. We need to prefer composition over classical inheritance. https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.3ab6fv5ob

It's really not, all due respect to Mr Elliott, the es6 class syntax is the least of our problems.

In reply to Derek Hannah
Avatar
Tyler

Just in case any beginners read this and get stressed out, I'd like to say I think it's more than fine to use ES6 classes for React. Dan is smarter than I am though and here's his opinion. https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4#.m2ph4tq8i

In reply to Derek Hannah
Avatar
Kirk Sefchik

The moment I start to refactor NotesList, I start getting the following error:
```

Warrning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Notes.

Anyone have any idea why this is happening? It triggers as soon as I convert NotesList from `React.createClass` syntax to ES6 class syntax.
Avatar
Peter

I have exactly the same problem, any one knows what the reason is for that? Checked all the code and is exactly the same way as in the video.

In reply to Kirk Sefchik
Avatar
Robert Misior

You need to change the Notes to use import syntax for the NotesList:

import NotesList from './NotesList';

In reply to Kirk Sefchik
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?