diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index 75e23858..337796b0 100644 --- a/docs/05-reusable-components.md +++ b/docs/05-reusable-components.md @@ -78,6 +78,28 @@ React.createClass({ }); ``` +### Single Child + +With `React.PropTypes.element` you can specify that only a single child can be passed to +a component as children. + +```javascript +var MyComponent = React.createClass({ + propTypes: { + children: React.PropTypes.element.isRequired + }, + + render: function() { + return ( +
+ {this.props.children} // This must be exactly one element or it will warn. +
+ ); + } + +}); +``` + ## Default Prop Values React lets you define default values for your `props` in a very declarative way: @@ -115,28 +137,6 @@ ReactDOM.render( ); ``` -## Single Child - -With `React.PropTypes.element` you can specify that only a single child can be passed to -a component as children. - -```javascript -var MyComponent = React.createClass({ - propTypes: { - children: React.PropTypes.element.isRequired - }, - - render: function() { - return ( -
- {this.props.children} // This must be exactly one element or it will throw. -
- ); - } - -}); -``` - ## Mixins Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.