ES6 Class Docs

docs/docs/05-reusable-components.md

@@ -187,3 +187,48 @@ React.render(
 
 A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
 
+## ES6 Classes
+
+You may also define your React classes as a plain JavaScript class. For example using ES6 class syntax:
+
+```javascript
+class HelloMessage extends React.Component {
+  render() {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+React.render(<HelloMessage name="Sebastian" />, mountNode);
+```
+
+The API is similar to `React.createClass` with the exception for `getInitialState`. Instead of providing a separate `getInitialState` method, you set up your own `state` property in the constructor.
+
+Another difference is that `propTypes` and `defaultProps` are defined as properties on the constructor instead of in the class body.
+
+```javascript
+export class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {count: props.initialCount};
+  }
+  tick() {
+    this.setState({count: this.state.count + 1});
+  }
+  render() {
+    return (
+      <div onClick={this.tick.bind(this)}>
+        Clicks: {this.state.count}
+      </div>
+    );
+  }
+}
+Counter.propTypes = { initialCount: React.PropTypes.number };
+Counter.defaultProps = { initialCount: 0 };
+```
+
+### No Autobinding
+
+Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or arrow functions.
+
+### No Mixins
+
+Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins.

docs/docs/ref-01-top-level-api.md

@@ -11,6 +11,15 @@ redirect_from: "/docs/reference.html"
 `React` is the entry point to the React library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can `require()` it.
 
 
+### React.Component
+
+```javascript
+class Component
+```
+
+This is the base class for React Components when they're defined using ES6 classes. See [Reusable Components](/react/docs/reusable-components.html#es6-classes) for how to use ES6 classes with React. For what methods are actually provided by the base class, see the [Component API](/react/docs/component-api.html).
+
+
 ### React.createClass
 
 ```javascript

docs/docs/ref-02-component-api.md

@@ -6,7 +6,7 @@ prev: top-level-api.html
 next: component-specs.html
 ---
 
-## ReactComponent
+## React.Component
 
 Instances of a React Component are created internally in React when rendering. These instances are reused in subsequent renders, and can be accessed in your component methods as `this`. The only way to get a handle to a React Component instance outside of React is by storing the return value of `React.render`. Inside other Components, you may use [refs](/react/docs/more-about-refs.html) to achieve the same result.