The library for web and native user interfaces.
update and move tutorial
petehunt committed
Jul 14, 2013 at 17:49 UTC
b2107ba80bee1f36dd76c9a109a9c9ce3118376b
3 files changed
+17
-13
docs/docs/refactor/09-reference.md
+7
-1
@@ -153,4 +153,10 @@ React has implemented a browser-independent events and DOM system for performanc
153
* All events (including submit) bubble correctly per the W3C spec
154
* All event objects conform to the W3C spec
155
* 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.
156
-* `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
156
+* `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.
157
+
158
+## Examples
159
+
160
+* React powers all of Instagram.com and many components on Facebook.com, including the commenting interface, ads creation flows, and page insights.
161
+* We've included [a step-by-step tutorial](./09.1-tutorial.md) for creating a comment box widget with React
162
+* [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
docs/docs/refactor/09.1-tutorial.md
renamed
+10
-12
@@ -461,7 +461,7 @@ Let's make the form interactive. When the user submits the form, we should clear
461
```javascript{3-13,16,21}
462
// tutorial16.js
463
var CommentForm = React.createClass({
464
- handleSubmit: React.autoBind(function() {
464
+ handleSubmit: function() {
465
var author = this.refs.author.getDOMNode().value.trim();
466
var text = this.refs.text.getDOMNode().value.trim();
467
if (!text || !author) {
@@ -471,7 +471,7 @@ var CommentForm = React.createClass({
471
this.refs.author.getDOMNode().value = '';
472
this.refs.text.getDOMNode().value = '';
473
return false;
474
- }),
474
+ },
475
render: function() {
476
return (
477
<form class="commentForm" onSubmit={this.handleSubmit}>
@@ -494,8 +494,6 @@ React attaches event handlers to components using a camelCase naming convention.
494
495
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).)
496
497
-`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.
498
-
497
#### Refs
498
499
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({
517
}.bind(this)
518
});
519
},
522
- handleCommentSubmit: React.autoBind(function(comment) {
520
+ handleCommentSubmit: function(comment) {
521
// TODO: submit to the server and refresh the list
524
- }),
522
+ },
523
getInitialState: function() {
524
return {data: []};
525
},
@@ -551,14 +549,14 @@ Let's call the callback from the `CommentForm` when the user submits the form:
549
```javascript{6}
550
// tutorial18.js
551
var CommentForm = React.createClass({
554
- handleSubmit: React.autoBind(function() {
552
+ handleSubmit: function() {
553
var author = this.refs.author.getDOMNode().value.trim();
554
var text = this.refs.text.getDOMNode().value.trim();
555
this.props.onCommentSubmit({author: author, text: text});
556
this.refs.author.getDOMNode().value = '';
557
this.refs.text.getDOMNode().value = '';
558
return false;
561
- }),
559
+ },
560
render: function() {
561
return (
562
<form class="commentForm" onSubmit={this.handleSubmit}>
@@ -590,7 +588,7 @@ var CommentBox = React.createClass({
588
}.bind(this)
589
});
590
},
593
- handleCommentSubmit: React.autoBind(function(comment) {
591
+ handleCommentSubmit: function(comment) {
592
$.ajax({
593
url: this.props.url,
594
data: comment,
@@ -600,7 +598,7 @@ var CommentBox = React.createClass({
598
this.setState({data: data});
599
}.bind(this)
600
});
603
- }),
601
+ },
602
getInitialState: function() {
603
return {data: []};
604
},
@@ -642,7 +640,7 @@ var CommentBox = React.createClass({
640
}.bind(this)
641
});
642
},
645
- handleCommentSubmit: React.autoBind(function(comment) {
643
+ handleCommentSubmit: function(comment) {
644
var comments = this.state.data;
645
comments.push(comment);
646
this.setState({data: comments});
@@ -655,7 +653,7 @@ var CommentBox = React.createClass({
653
this.setState({data: data});
654
}.bind(this)
655
});
658
- }),
656
+ },
657
getInitialState: function() {
658
return {data: []};
659
},