Hotfix demo

Static properties + Add module pattern demo.
This commit is contained in:
Sebastian Markbåge
2015-01-27 23:41:44 -08:00
parent 48443c26b9
commit f9d32be8b2
+14 -3
View File
@@ -63,8 +63,8 @@ Wait, assigning to properties seems like a very imperative way of defining class
```javascript
// Future Version
export class Counter extends React.Component {
propTypes = { initialCount: React.PropTypes.number };
defaultProps = { initialCount: 0 };
static propTypes = { initialCount: React.PropTypes.number };
static defaultProps = { initialCount: 0 };
state = { count: this.props.initialCount };
tick() {
this.setState({ count: this.state.count + 1 });
@@ -115,7 +115,7 @@ class Counter extends React.Component {
Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.
There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins was dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. Us making another standard doesn't help that effort.
There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins was dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort.
Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.
@@ -148,4 +148,15 @@ class Counter extends React.Component
div(onClick: @tick, 'Clicks: ', this.state.count)
```
You can even use the old ES3 module pattern if you want:
```javascript
function MyComponent(initialProps) {
return {
state: { value: initialProps.initialValue },
render: function() {
return <span className={this.state.value} />
}
};
}
```