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.
What is the benefit of using es6 class instead of React.createClass ?
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/
The lesson video has been updated!
Hi. First off, great series! A question though: why do we have to bind propTypes seperately to a class?
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.
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
also Peter Hunt of the Facebook React team has told me personally that they do not use the es6 class syntax at Facebook
other than that this whole course was dope thanks!
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.
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
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.
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.
You need to change the Notes to use import syntax for the NotesList:
import NotesList from './NotesList';