update and move tutorial

docs/refactor/09-reference.md

@@ -153,4 +153,10 @@ React has implemented a browser-independent events and DOM system for performanc
 * All events (including submit) bubble correctly per the W3C spec
 * All event objects conform to the W3C spec
 * All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here, since the spec is inconsistent.
-* `onChange` behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time.
+* `onChange` behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time.
+
+## Examples
+
+* React powers all of Instagram.com and many components on Facebook.com, including the commenting interface, ads creation flows, and page insights.
+* We've included [a step-by-step tutorial](./09.1-tutorial.md) for creating a comment box widget with React
+* [The React starter kit](/react/downloads.md) includes several examples which you can [view online in our GitHub repo](https://github.com/facebook/react/tree/master/examples/)

docs/tutorial.md → docs/refactor/09.1-tutorial.md

@@ -461,7 +461,7 @@ Let's make the form interactive. When the user submits the form, we should clear
 ```javascript{3-13,16,21}
 // tutorial16.js
 var CommentForm = React.createClass({
-  handleSubmit: React.autoBind(function() {
+  handleSubmit: function() {
     var author = this.refs.author.getDOMNode().value.trim();
     var text = this.refs.text.getDOMNode().value.trim();
     if (!text || !author) {
@@ -471,7 +471,7 @@ var CommentForm = React.createClass({
     this.refs.author.getDOMNode().value = '';
     this.refs.text.getDOMNode().value = '';
     return false;
-  }),
+  },
   render: function() {
     return (
       <form class="commentForm" onSubmit={this.handleSubmit}>
@@ -494,8 +494,6 @@ React attaches event handlers to components using a camelCase naming convention.
 
 We always return `false` from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call `preventDefault()` on it &ndash; read more about [event handling](event-handling.html).)
 
-`React.autoBind()` is a simple way to ensure that a method is always bound to its component. Inside the method, `this` will be bound to the component instance.
-
 #### Refs
 
 We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the component. We can call `getDOMNode()` on a component to get the native browser DOM element.
@@ -519,9 +517,9 @@ var CommentBox = React.createClass({
       }.bind(this)
     });
   },
-  handleCommentSubmit: React.autoBind(function(comment) {
+  handleCommentSubmit: function(comment) {
     // TODO: submit to the server and refresh the list
-  }),
+  },
   getInitialState: function() {
     return {data: []};
   },
@@ -551,14 +549,14 @@ Let's call the callback from the `CommentForm` when the user submits the form:
 ```javascript{6}
 // tutorial18.js
 var CommentForm = React.createClass({
-  handleSubmit: React.autoBind(function() {
+  handleSubmit: function() {
     var author = this.refs.author.getDOMNode().value.trim();
     var text = this.refs.text.getDOMNode().value.trim();
     this.props.onCommentSubmit({author: author, text: text});
     this.refs.author.getDOMNode().value = '';
     this.refs.text.getDOMNode().value = '';
     return false;
-  }),
+  },
   render: function() {
     return (
       <form class="commentForm" onSubmit={this.handleSubmit}>
@@ -590,7 +588,7 @@ var CommentBox = React.createClass({
       }.bind(this)
     });
   },
-  handleCommentSubmit: React.autoBind(function(comment) {
+  handleCommentSubmit: function(comment) {
     $.ajax({
       url: this.props.url,
       data: comment,
@@ -600,7 +598,7 @@ var CommentBox = React.createClass({
         this.setState({data: data});
       }.bind(this)
     });
-  }),
+  },
   getInitialState: function() {
     return {data: []};
   },
@@ -642,7 +640,7 @@ var CommentBox = React.createClass({
       }.bind(this)
     });
   },
-  handleCommentSubmit: React.autoBind(function(comment) {
+  handleCommentSubmit: function(comment) {
     var comments = this.state.data;
     comments.push(comment);
     this.setState({data: comments});
@@ -655,7 +653,7 @@ var CommentBox = React.createClass({
         this.setState({data: data});
       }.bind(this)
     });
-  }),
+  },
   getInitialState: function() {
     return {data: []};
   },