-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (102 loc) · 3.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<link rel="stylesheet" href="css/index.css">
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
/* This is out static data*/
var staticData = [
{
author: "Jack",
text: "Hello John"
},
{
author: "John",
text: "Hello Jack"
}
];
/* This is our Comment Box component*/
var CommentBox = React.createClass({
/* set our initial state */
getInitialState: function(){
return {
data: staticData
};
},
/* Adding the new comment to the static data */
commentSubmitHandler: function(comment){
var updatedData = this.state.data.concat([comment]);
this.setState({data: updatedData});
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmitted={this.commentSubmitHandler}/>
</div>
);
}
});
/* This is our Comment List component*/
var CommentList = React.createClass({
render: function() {
/* Creating a list of comments */
var commentNodes = this.props.data.map(function(comment){
return <Comment author={comment.author}>{comment.text}</Comment>
});
/* Return the list */
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
/* This is our Comment Form component*/
var CommentForm = React.createClass({
/* Submit Handler */
handleSubmit: function(e){
e.preventDefault();
var author = this.refs.author.getDOMNode().value;
var text = this.refs.text.getDOMNode().value;
if(!author || !text){
return;
}
this.props.onCommentSubmitted({author: author, text: text});
this.refs.author.getDOMNode().value = "";
this.refs.text.getDOMNode().value = "";
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author"/>
<input type="text" placeholder="Say something..." ref="text"/>
<input type="submit" value="Post!"/>
</form>
);
}
});
/* This is our Comment component*/
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="author">{this.props.author}</h2>
{this.props.children}
</div>
);
}
});
/* This is how the component renders to screen */
React.render(<CommentBox />, document.getElementById("content"));
</script>
</body>
</html>