Merge pull request #750 from chenglou/docs-clean

docs tips small refactorings

tips/07-children-props-type.md

@@ -16,6 +16,7 @@ var GenericWrapper = React.createClass({
   componentDidMount: function() {
     console.log(Array.isArray(this.props.children)); // => true
   },
+
   render: function() {
     return <div />;
   }
@@ -40,6 +41,7 @@ var GenericWrapper = React.createClass({
     // length of the non-existant array wrapper!
     console.log(this.props.children.length);
   },
+
   render: function() {
     return <div />;
   }

tips/10-props-in-getInitialState-as-anti-pattern.md

@@ -22,6 +22,7 @@ var MessageBox = React.createClass({
   getInitialState: function() {
     return {nameWithQualifier: "Mr. " + this.props.name};
   },
+
   render: function() {
     return <div>{this.state.nameWithQualifier}</div>;
   }
@@ -44,24 +45,9 @@ var MessageBox = React.createClass({
 React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
 ```
 
-For more complex logic:
+(For more complex logic, simply isolate the computation in a method.)
 
-```js
-/** @jsx React.DOM */
-
-var MessageBox = React.createClass({
-  render: function() {
-    return <div>{this.getNameWithQualifier(this.props.name)}</div>;
-  },
-  getNameWithQualifier: function(name) {
-    return 'Mr. ' + name;
-  }
-});
-
-React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
-```
-
-However, it's **not** an anti-pattern if you intentionally make it clear that synchronization's not the goal here:
+However, it's **not** an anti-pattern if you make it clear that synchronization's not the goal here:
 
 ```js
 /** @jsx React.DOM */
@@ -69,12 +55,14 @@ However, it's **not** an anti-pattern if you intentionally make it clear that sy
 var Counter = React.createClass({
   getInitialState: function() {
     // naming it initialX clearly indicates that the only purpose
-    // of the passed down prop is to initialize something internal
+    // of the passed down prop is to initialize something internally
     return {count: this.props.initialCount};
   },
+
   handleClick: function() {
     this.setState({count: this.state.count + 1});
   },
+
   render: function() {
     return <div onClick={this.handleClick}>{this.state.count}</div>;
   }

tips/12-initial-ajax.md

@@ -21,6 +21,7 @@ var UserGist = React.createClass({
       lastGistUrl: ''
     };
   },
+
   componentDidMount: function() {
     $.get(this.props.source, function(result) {
       var lastGist = result[0];
@@ -30,6 +31,7 @@ var UserGist = React.createClass({
       });
     }.bind(this));
   },
+
   render: function() {
     return (
       <div>

tips/14-communicate-between-components.md

@@ -40,4 +40,4 @@ React.renderComponent(
 
 Notice the use of `bind(this, arg1, arg2, ...)`: we're simply passing more arguments to `handleClick`. This is not a new React concept; it's just JavaScript.
 
-For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and when you receive an event call `setState()`.
+For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and when you receive an event, call `setState()`.

tips/15-communicate-between-components-2.md → tips/15-expose-component-functions.md

@@ -17,7 +17,7 @@ var Todo = React.createClass({
   render: function() {
     return <div onClick={this.props.onClick}>{this.props.title}</div>;
   },
-  
+
   //this component will be accessed by the parent through the `ref` attribute
   animate: function() {
     console.log('Pretend %s is animating', this.props.title);
@@ -28,7 +28,7 @@ var Todos = React.createClass({
   getInitialState: function() {
     return {items: ['Apple', 'Banana', 'Cranberry']};
   },
-  
+
   handleClick: function(i) {
     var items = this.state.items;
     items.splice(i, 1);
@@ -38,7 +38,7 @@ var Todos = React.createClass({
       }
     }.bind(this));
   },
-  
+
   render: function() {
     return (
       <div>