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

Share this video with your friends

Send Tweet

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.

Nils
Nils
~ 9 years ago

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

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

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/

egghead eggo
egghead eggo
~ 9 years ago

The lesson video has been updated!

Jori
Jori
~ 9 years ago

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

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

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.

Derek Hannah
Derek Hannah
~ 9 years ago

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

Derek Hannah
Derek Hannah
~ 9 years ago

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

Derek Hannah
Derek Hannah
~ 9 years ago

other than that this whole course was dope thanks!

Joel Hooks
Joel Hooks
~ 9 years ago

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.

Tyler McGinnis
Tyler McGinnis(instructor)
~ 9 years ago

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

Kirk Sefchik
Kirk Sefchik
~ 8 years ago

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.
Peter
Peter
~ 8 years ago

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.

Robert Misior
Robert Misior
~ 8 years ago

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

import NotesList from './NotesList';