diff --git a/react.md b/react.md
index 4b7642df1..c38ab9ae3 100644
--- a/react.md
+++ b/react.md
@@ -3,7 +3,8 @@ title: React.js
layout: default
---
-## Components
+Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking.
+{:.brief-intro.center}
```js
var Component = React.createClass({
@@ -17,6 +18,26 @@ var Component = React.createClass({
var c = React.render(, document.body);
```
+## Nesting
+Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
+{:.center}
+
+```js
+var UserAvatar = React.createClass({...});
+var UserProfile = React.createClass({...});
+```
+
+```js
+var Info = React.createClass({
+ render() {
+ return
+
+
+
;
+ }
+});
+```
+
## States & Properties
```js
@@ -33,7 +54,7 @@ this.props.fullscreen === true
this.replaceProps({ ... });
```
-### Initial states and properties
+### Initial data
```js
React.createClass({
@@ -73,8 +94,8 @@ c.replaceProps({ ... })
c.refs
```
-### [Component specs](http://facebook.github.io/react/docs/component-specs.html)
-Methods and properties you can override in your class definitions.
+### Component specs
+Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
| Method | What |
| ---- | ---- |
@@ -262,28 +283,38 @@ propTypes: {
## Other features
-### [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html)
+### Class set
+Easily manipulate DOM classes. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
- render: function() {
- var cx = React.addons.classSet;
- var classes = cx({
- 'message': true,
- 'message-important': this.props.isImportant,
- 'message-read': this.props.isRead
- });
- // same final string, but much cleaner
- return Great Scott!
;
- }
+```js
+render: function() {
+ var cx = React.addons.classSet;
+ var classes = cx({
+ 'message': true,
+ 'message-important': this.props.isImportant,
+ 'message-read': this.props.isRead
+ });
+ // same final string, but much cleaner
+ return Great Scott!
;
+}
+```
-### [Propagating properties to children](http://facebook.github.io/react/docs/transferring-props.html)
+### Propagating properties
+See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
- var VideoPlayer = React.createClass({
- render: function() {
- return ;
- }
- });
+```html
+
+```
-
+{:.light}
+```js
+var VideoPlayer = React.createClass({
+ render: function() {
+ /* propagates src="..." down to this sub component */
+ return ;
+ }
+});
+```
### Mixins