You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/tutorial.md
+10-4Lines changed: 10 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -410,12 +410,13 @@ var CommentBox = React.createClass({
410
410
411
411
Here, `componentWillMount` is a method called automatically by React before a component is rendered. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is trivial to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.
412
412
413
-
```javascript{3,15-16,30}
413
+
```javascript{3,16-17,31}
414
414
// tutorial14.js
415
415
var CommentBox = React.createClass({
416
416
loadCommentsFromServer: function() {
417
417
$.ajax({
418
418
url: this.props.url,
419
+
dataType: 'json',
419
420
success: function(data) {
420
421
this.setState({data: data});
421
422
}.bind(this)
@@ -515,12 +516,13 @@ When a user submits a comment, we will need to refresh the list of comments to i
515
516
516
517
We need to pass data from the child component to its parent. We do this by passing a `callback` in props from parent to child:
517
518
518
-
```javascript{11-13,27}
519
+
```javascript{12-14,28}
519
520
// tutorial17.js
520
521
var CommentBox = React.createClass({
521
522
loadCommentsFromServer: function() {
522
523
$.ajax({
523
524
url: this.props.url,
525
+
dataType: 'json',
524
526
success: function(data) {
525
527
this.setState({data: data});
526
528
}.bind(this)
@@ -581,12 +583,13 @@ var CommentForm = React.createClass({
581
583
582
584
Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:
583
585
584
-
```javascript{12-19}
586
+
```javascript{13-21}
585
587
// tutorial19.js
586
588
var CommentBox = React.createClass({
587
589
loadCommentsFromServer: function() {
588
590
$.ajax({
589
591
url: this.props.url,
592
+
dataType: 'json',
590
593
success: function(data) {
591
594
this.setState({data: data});
592
595
}.bind(this)
@@ -595,6 +598,7 @@ var CommentBox = React.createClass({
595
598
handleCommentSubmit: function(comment) {
596
599
$.ajax({
597
600
url: this.props.url,
601
+
dataType: 'json',
598
602
type: 'POST',
599
603
data: comment,
600
604
success: function(data) {
@@ -627,12 +631,13 @@ var CommentBox = React.createClass({
627
631
628
632
Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.
629
633
630
-
```javascript{12-14}
634
+
```javascript{13-15}
631
635
// tutorial20.js
632
636
var CommentBox = React.createClass({
633
637
loadCommentsFromServer: function() {
634
638
$.ajax({
635
639
url: this.props.url,
640
+
dataType: 'json',
636
641
success: function(data) {
637
642
this.setState({data: data});
638
643
}.bind(this)
@@ -644,6 +649,7 @@ var CommentBox = React.createClass({
0 commit comments