Browse Source

ES6 Class Docs

Some minor burried docs.
main
Sebastian Markbage 10 years ago
parent
commit
ea4dd85a7e
  1. 45
      docs/05-reusable-components.md
  2. 9
      docs/ref-01-top-level-api.md
  3. 2
      docs/ref-02-component-api.md

45
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.

9
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

2
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.

Loading…
Cancel
Save