no-context: improve documentation

Author: zachguo

docs/rules/no-context.md

@@ -1,51 +1,67 @@
 # Prevent usage of context (no-context)
 
-[Context](https://facebook.github.io/react/docs/context.html) is an advanced and experimental feature. The API is likely to change in future releases. Most applications will never need to use context. Especially if you are just getting started with React, you likely do not want to use context. Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application.
+[Context](https://facebook.github.io/react/docs/context.html) is an advanced and experimental feature. The API is likely to change in future releases. Most applications will never need to use context. Especially if you are just getting started with React, you likely do not want to use context. Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application. Consider higher order components or Flux architecture instead.
 
 ## Rule Details
 
 The following patterns are considered warnings:
 
-```js
+```jsx
 class Button extends React.Component {
   render() {
     return (
       <button style={{background: this.context.color}}>
-        {this.props.children}
+        {this.props.text}
       </button>
     );
   }
 }
+Button.propTypes = {
+  text: React.PropTypes.string
+};
 Button.contextTypes = {
   color: React.PropTypes.string
 };
+```
 
-const Button = ({children}, context) =>
+```jsx
+const Button = ({text}, context) =>
   <button style={{background: context.color}}>
-    {children}
+    {text}
   </button>;
-Button.contextTypes = {color: React.PropTypes.string};
+Button.propTypes = {
+  text: React.PropTypes.string
+};
+Button.contextTypes = {
+  color: React.PropTypes.string
+};
 ```
 
 The following patterns are not considered warnings:
 
-```js
+```jsx
 class Button extends React.Component {
   render() {
     return (
       <button style={{background: this.props.color}}>
-        {this.props.children}
+        {this.props.text}
       </button>
     );
   }
 }
 Button.propTypes = {
+  text: React.PropTypes.string,
   color: React.PropTypes.string
 };
+```
 
-const Button = ({children, color}, context) =>
+```jsx
+const Button = ({text, color}) =>
   <button style={{background: color}}>
-    {children}
+    {text}
   </button>;
-Button.propTypes = {color: React.PropTypes.string};
+Button.propTypes = {
+  text: React.PropTypes.string,
+  color: React.PropTypes.string
+};
 ```