diff --git a/flowtype.md b/flowtype.md new file mode 100644 index 000000000..6787de7dd --- /dev/null +++ b/flowtype.md @@ -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) { ... } +``` diff --git a/react.md b/react.md index 22f256bed..b70f2b15a 100644 --- a/react.md +++ b/react.md @@ -19,16 +19,23 @@ layout: default var compo = React.render(, 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) - c.setState({ x: y }); - c.setProps({ .. }); - - c.replaceProps({ .. }); - c.replaceState({ .. }); - c.getDOMNode() - c.forceUpdate() c.isMounted() @@ -49,7 +56,6 @@ layout: default componentDidMount componentDidUpdate - ### Initial states 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 render: function() { diff --git a/travis-gh-pages.md b/travis-gh-pages.md index 96634158b..c45ad8f27 100644 --- a/travis-gh-pages.md +++ b/travis-gh-pages.md @@ -1,5 +1,5 @@ --- -title: Travis: deploy gh-pages +title: Deploy gh-pages via Travis layout: default ---