Skip to content

Commit 3b3d2e2

Browse files
Robert CullitonRobert Culliton
Robert Culliton
authored and
Robert Culliton
committed
going through tutorial
1 parent 66ccecd commit 3b3d2e2

File tree

3 files changed

+55
-72
lines changed

3 files changed

+55
-72
lines changed

‎comments.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
[
22
{
3-
"author": "Pete Hunt",
4-
"text": "Hey there!"
3+
"author": "rob culliton",
4+
"text": "it's been real react"
55
},
66
{
7-
"author": "Paul O’Shannessy",
8-
"text": "React is *great*!"
7+
"author": "don delillo",
8+
"text": "this is the new austerity"
99
}
1010
]

‎public/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@
1414
<body>
1515
<div id="content"></div>
1616
<script type="text/babel" src="scripts/example.js"></script>
17-
<script type="text/babel">
18-
// To get started with this tutorial running your own code, simply remove
19-
// the script tag loading scripts/example.js and start writing code here.
17+
2018
</script>
2119
</body>
2220
</html>

‎public/scripts/example.js

Lines changed: 50 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,13 @@
1-
/**
2-
* This file provided by Facebook is for non-commercial testing and evaluation
3-
* purposes only. Facebook reserves all rights not expressly granted.
4-
*
5-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8-
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9-
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
10-
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11-
*/
1+
// tutorial1.js
122

13-
var Comment = React.createClass({
14-
rawMarkup: function() {
15-
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
16-
return { __html: rawMarkup };
17-
},
183

19-
render: function() {
20-
return (
21-
<div className="comment">
22-
<h2 className="commentAuthor">
23-
{this.props.author}
24-
</h2>
25-
<span dangerouslySetInnerHTML={this.rawMarkup()} />
26-
</div>
27-
);
28-
}
29-
});
4+
// we pass some methods in a javascript object to crate a new react component
5+
// render returns a tree of react components that will eventually render to html
6+
7+
var data = [
8+
{id: 1, author: "Pete Hunt", text: "This is one comment"},
9+
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
10+
];
3011

3112
var CommentBox = React.createClass({
3213
loadCommentsFromServer: function() {
@@ -42,23 +23,6 @@ var CommentBox = React.createClass({
4223
}.bind(this)
4324
});
4425
},
45-
handleCommentSubmit: function(comment) {
46-
var comments = this.state.data;
47-
var newComments = comments.concat([comment]);
48-
this.setState({data: newComments});
49-
$.ajax({
50-
url: this.props.url,
51-
dataType: 'json',
52-
type: 'POST',
53-
data: comment,
54-
success: function(data) {
55-
this.setState({data: data});
56-
}.bind(this),
57-
error: function(xhr, status, err) {
58-
console.error(this.props.url, status, err.toString());
59-
}.bind(this)
60-
});
61-
},
6226
getInitialState: function() {
6327
return {data: []};
6428
},
@@ -70,25 +34,24 @@ var CommentBox = React.createClass({
7034
return (
7135
<div className="commentBox">
7236
<h1>Comments</h1>
73-
<CommentList data={this.state.data} />
74-
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
37+
<CommentList data={ this.state.data } />
38+
<CommentForm />
7539
</div>
7640
);
7741
}
7842
});
7943

8044
var CommentList = React.createClass({
8145
render: function() {
82-
var commentNodes = this.props.data.map(function(comment, index) {
46+
47+
var commentNodes = this.props.data.map(function(comment) {
8348
return (
84-
// `key` is a React-specific concept and is not mandatory for the
85-
// purpose of this tutorial. if you're curious, see more here:
86-
// http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
87-
<Comment author={comment.author} key={index}>
49+
<Comment author={comment.author} key={comment.id}>
8850
{comment.text}
8951
</Comment>
9052
);
9153
});
54+
9255
return (
9356
<div className="commentList">
9457
{commentNodes}
@@ -97,29 +60,51 @@ var CommentList = React.createClass({
9760
}
9861
});
9962

63+
var Comment = React.createClass({
64+
render: function() {
65+
return (
66+
<div className="comment">
67+
<h2 className="commentAuthor">
68+
{this.props.author}
69+
</h2>
70+
{ this.props.children }
71+
</div>
72+
);
73+
}
74+
});
75+
10076
var CommentForm = React.createClass({
101-
handleSubmit: function(e) {
102-
e.preventDefault();
103-
var author = this.refs.author.value.trim();
104-
var text = this.refs.text.value.trim();
105-
if (!text || !author) {
106-
return;
107-
}
108-
this.props.onCommentSubmit({author: author, text: text});
109-
this.refs.author.value = '';
110-
this.refs.text.value = '';
77+
getInitialState: function() {
78+
return {author: '', text: ''};
79+
},
80+
handleAuthorChange: function(e) {
81+
this.setState({author: e.target.value});
82+
},
83+
handleTextChange: function(e) {
84+
this.setState({text: e.target.value});
11185
},
11286
render: function() {
11387
return (
114-
<form className="commentForm" onSubmit={this.handleSubmit}>
115-
<input type="text" placeholder="Your name" ref="author" />
116-
<input type="text" placeholder="Say something..." ref="text" />
117-
<input type="submit" value="Post" />
88+
<form className="commentForm">
89+
<input
90+
type="text"
91+
placeholder="Your name"
92+
value={this.state.author}
93+
onChange={this.handleAuthorChange}
94+
/>
95+
<input
96+
type="text"
97+
placeholder="Say something..."
98+
value={this.state.text}
99+
onChange={this.handleTextChange}
100+
/>
101+
<input type="submit" value="Post" />
118102
</form>
119103
);
120104
}
121105
});
122106

107+
// injects the markup into a dom element, supplied as the second argument
123108
ReactDOM.render(
124109
<CommentBox url="/api/comments" pollInterval={2000} />,
125110
document.getElementById('content')

0 commit comments

Comments
 (0)