Documentation for ES6 classes

[rogierschouten]

Which lifecycle methods can I define on a modern ES6-class-style React component? The same as for a classic component spec? I checked the docs but I can't find much yet on the ES6 classes. Am I missing something?

[agnosticdev]

There is a bit of information about ES6 classes at the bottom of Reusable Components:
https://facebook.github.io/react/docs/reusable-components.html#es6-classes

[rogierschouten]

Thanks @agnosticdev! Still there is a need for a full-blown example with all the methods in use I think.

[olegakbarov]

Yeah, that would be really helpful.

[zpao]

Ah, we added notes in the Component API section (eg a note that replaceState doesn't work), but not for lifecycle methods.

[ssorallen]

Noting the constructor's replacement for most use cases of componentWillMount falls into this category, and that's not currently mentioned in the docs. A question about its use came up in the Babel blog post about React + ES6: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/#comment-2123220032

[ankitml]

This is very confusing for the beginners. I started directly with ES6 style classes and the documentation is of very little help in learning. There is a need of full blown documentation compatible with ES6, as people who are starting with react now dont have any reason for learning non ES6 react. I can volunteer for converting to ES6 but not sure of facebook's commitment towards documentation.

[gaearon]

I can volunteer for converting to ES6 but not sure of facebook's commitment towards documentation.

Great! As you can see from our recent meeting notes, we’re not very happy about the situation either.

I think we want to convert the docs to use functional stateless components where state or lifecycle hooks aren’t needed, and ES6 classes wherever state or lifecycle hooks are necessary. We would only leave createClass in examples that specifically discuss its usage (e.g. mixins).

@zpao @spicyj Does this sound like what you folks have in mind?

---

Note to contributors:
If you’d like to work on this, please leave a comment in this issue to avoid duplicated work. Also don’t want to add more ES6 class examples, we want to change existing examples to use ES6 classes.

[jimfb]

@gaearon Sounds right to me.

[sophiebits]

Yeah. For now, let's also link to the createClass docs in the tutorial and intro docs after showing React.Component as an alternative for people who don't want to use ES6 classes.

[raphaelkross]

I faced problems when migrating to ES6 style - would love to help converting the documentation, this will surely help beginners or developers that aren't used to ES6 style yet!

[gillchristian]

I would like to help with the docs.

[jakegavin]

I'd also be willing to help out. In terms of autobinding, the core team notes say "We could just always bind in constructor in the documentation." I just want to verify that's the final decision since the wording make it sound a little uncertain?

Are the articles prioritized/triaged in any way or should people just comment in this issue with whatever article they're working on (to prevent duplicate PRs)?

[gaearon]

@gillchristian @jakegavin

Feel free to organize the work between yourselves in this thread! e.g. you can write “I’d like to take pages A, B, and C” so others can see which pages you’ll be working on, and can join to say “cool, I’ll take D and E”. This way we can split the effort and track the individual progress.

the core team notes say "We could just always bind in constructor in the documentation." I just want to verify that's the final decision since the wording make it sound a little uncertain?

Yes, we won’t use class properties in the docs. We only want to use stable ES2015 syntax. So if we need to bind an event handler, we will do this in the constructor.