From 4002a86e229cdb0fc023fb1252a2788f4011f2a4 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Mon, 30 Dec 2013 17:54:41 -0500
Subject: [PATCH] docs tips small refactorings

---
 tips/07-children-props-type.md                |  2 ++
 ...rops-in-getInitialState-as-anti-pattern.md | 24 +++++--------------
 tips/12-initial-ajax.md                       |  2 ++
 tips/14-communicate-between-components.md     |  2 +-
 ...-2.md => 15-expose-component-functions.md} |  6 ++---
 5 files changed, 14 insertions(+), 22 deletions(-)
 rename tips/{15-communicate-between-components-2.md => 15-expose-component-functions.md} (99%)

diff --git a/tips/07-children-props-type.md b/tips/07-children-props-type.md
index 8c4549ac..34a77ef5 100644
--- a/tips/07-children-props-type.md
+++ b/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 />;
   }
diff --git a/tips/10-props-in-getInitialState-as-anti-pattern.md b/tips/10-props-in-getInitialState-as-anti-pattern.md
index e0f13530..210530f8 100644
--- a/tips/10-props-in-getInitialState-as-anti-pattern.md
+++ b/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>;
   }
diff --git a/tips/12-initial-ajax.md b/tips/12-initial-ajax.md
index add4734c..5a761438 100644
--- a/tips/12-initial-ajax.md
+++ b/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>
diff --git a/tips/14-communicate-between-components.md b/tips/14-communicate-between-components.md
index a3a428f5..08582f96 100644
--- a/tips/14-communicate-between-components.md
+++ b/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()`.
diff --git a/tips/15-communicate-between-components-2.md b/tips/15-expose-component-functions.md
similarity index 99%
rename from tips/15-communicate-between-components-2.md
rename to tips/15-expose-component-functions.md
index 476d9ee1..2a59a126 100644
--- a/tips/15-communicate-between-components-2.md
+++ b/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>