From 7d77fd17ea1de49df92d90e7d608550b5a0ce1dd Mon Sep 17 00:00:00 2001 From: petehunt Date: Sun, 14 Jul 2013 17:49:07 -0700 Subject: [PATCH] update and move tutorial --- docs/refactor/09-reference.md | 8 ++++++- .../09.1-tutorial.md} | 22 +++++++++---------- .../{00-table-of-contents.md => OUTLINE.md} | 0 3 files changed, 17 insertions(+), 13 deletions(-) rename docs/{tutorial.md => refactor/09.1-tutorial.md} (97%) rename docs/refactor/{00-table-of-contents.md => OUTLINE.md} (100%) diff --git a/docs/refactor/09-reference.md b/docs/refactor/09-reference.md index 909fab4bc..07acfa7ab 100644 --- a/docs/refactor/09-reference.md +++ b/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. \ No newline at end of file +* `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/) \ No newline at end of file diff --git a/docs/tutorial.md b/docs/refactor/09.1-tutorial.md similarity index 97% rename from docs/tutorial.md rename to docs/refactor/09.1-tutorial.md index 021ff5057..2daf7279a 100644 --- a/docs/tutorial.md +++ b/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 (
@@ -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 – 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 ( @@ -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: []}; }, diff --git a/docs/refactor/00-table-of-contents.md b/docs/refactor/OUTLINE.md similarity index 100% rename from docs/refactor/00-table-of-contents.md rename to docs/refactor/OUTLINE.md