This commit is contained in:
Rico Sta. Cruz 2015-02-26 14:17:12 +08:00
parent d4370545fa
commit e189ce7c57
3 changed files with 93 additions and 9 deletions

23
flowtype.md Normal file
View File

@ -0,0 +1,23 @@
---
title: Flow
layout: default
---
### Simple failing example
```js
/* @flow */
function foo(x) { return x * 10; }
foo('Hello, world!');
```
### Annotations
```js
// Simple
function foo(x: string, y: number): string { ... }
// Arrays
function total(numbers: Array<number>) { ... }
```

View File

@ -19,16 +19,23 @@ layout: default
var compo = React.render(<Component />, mountnode); var compo = React.render(<Component />, mountnode);
### States
this.setState({ editing: true });
this.state.editing === true
this.replaceState({ ... });
### Props
this.setProps({ fullscreen: true });
this.props.fullscreen === true
this.replaceProps({ ... });
### [API](http://facebook.github.io/react/docs/component-api.html) ### [API](http://facebook.github.io/react/docs/component-api.html)
c.setState({ x: y });
c.setProps({ .. });
c.replaceProps({ .. });
c.replaceState({ .. });
c.getDOMNode() c.getDOMNode()
c.forceUpdate() c.forceUpdate()
c.isMounted() c.isMounted()
@ -49,7 +56,6 @@ layout: default
componentDidMount componentDidMount
componentDidUpdate componentDidUpdate
### Initial states ### Initial states
React.createClass({ React.createClass({
@ -126,6 +132,61 @@ layout: default
} }
}); });
### [Property validation](http://facebook.github.io/react/docs/reusable-components.html#prop-validation)
```js
React.createClass({
propTypes: {
// required
requiredFunc: React.PropTypes.func.isRequired,
requiredAny: React.PropTypes.any.isRequired,
// primitives, optional by default
bool: React.PropTypes.bool,
func: React.PropTypes.func,
number: React.PropTypes.number,
string: React.PropTypes.string,
}
});
Also:
```js
propTypes: {
message: React.PropTypes.instanceOf(Message), // instanceof any Class
element: React.PropTypes.element, // A React element
enum: React.PropTypes.oneOf(['News', 'Photos']),
node: React.PropTypes.node, // num, string, element, or array of these
// any of below
union: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
// arrays
array: React.PropTypes.array,
arrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// objects
object: React.PropTypes.object,
objectOf: React.PropTypes.objectOf(React.PropTypes.number),
// An object taking on a particular shape
object2: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// custom validator
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}
```
### Class set ### Class set
render: function() { render: function() {

View File

@ -1,5 +1,5 @@
--- ---
title: Travis: deploy gh-pages title: Deploy gh-pages via Travis
layout: default layout: default
--- ---