Skip to content

Commit 5a0ff21

Browse files
chenglouchenglou
committed
Initial push
0 parents  commit 5a0ff21

File tree

7 files changed

+257
-0
lines changed

7 files changed

+257
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*~
2+
node_modules
3+
.DS_Store

‎README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# React comment box example
2+
3+
This is the React comment box example from [the React tutorial](http://facebook.github.io/react/docs/tutorial.html).
4+
5+
## To use
6+
7+
```
8+
npm install express
9+
node server.js
10+
```
11+
12+
And visit http://localhost:3000/. Try opening multiple tabs!

‎css/base.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
background: #fff;
3+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
4+
font-size: 15px;
5+
line-height: 1.7;
6+
margin: 0;
7+
padding: 30px;
8+
}
9+
10+
a {
11+
color: #4183c4;
12+
text-decoration: none;
13+
}
14+
15+
a:hover {
16+
text-decoration: underline;
17+
}
18+
19+
code {
20+
background-color: #f8f8f8;
21+
border: 1px solid #ddd;
22+
border-radius: 3px;
23+
font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
24+
font-size: 12px;
25+
margin: 0 2px;
26+
padding: 0px 5px;
27+
}
28+
29+
h1, h2, h3, h4 {
30+
font-weight: bold;
31+
margin: 0 0 15px;
32+
padding: 0;
33+
}
34+
35+
h1 {
36+
border-bottom: 1px solid #ddd;
37+
font-size: 2.5em;
38+
font-weight: bold;
39+
margin: 0 0 15px;
40+
padding: 0;
41+
}
42+
43+
h2 {
44+
border-bottom: 1px solid #eee;
45+
font-size: 2em;
46+
}
47+
48+
h3 {
49+
font-size: 1.5em;
50+
}
51+
52+
h4 {
53+
font-size: 1.2em;
54+
}
55+
56+
p, ul {
57+
margin: 15px 0;
58+
}
59+
60+
ul {
61+
padding-left: 30px;
62+
}

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Hello React</title>
5+
<!-- Not present in the tutorial. Just for basic styling. -->
6+
<link rel="stylesheet" href="css/base.css" />
7+
<script src="http://fb.me/react-0.10.0.js"></script>
8+
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
9+
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
10+
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
11+
</head>
12+
<body>
13+
<div id="content"></div>
14+
<script type="text/jsx" src="scripts/example.js"></script>
15+
</body>
16+
</html>

‎package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "react-tutorial",
3+
"version": "0.0.0",
4+
"description": "Code from the React tutorial.",
5+
"main": "server.js",
6+
"dependencies": {
7+
"express": "3.12.1"
8+
},
9+
"devDependencies": {},
10+
"scripts": {
11+
"test": "echo \"Error: no test specified\" && exit 1",
12+
"start": "node server.js"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/petehunt/react-tutorial.git"
17+
},
18+
"keywords": [
19+
"react",
20+
"tutorial",
21+
"comment",
22+
"example"
23+
],
24+
"author": "petehunt",
25+
"license": "MIT",
26+
"bugs": {
27+
"url": "https://github.com/petehunt/react-tutorial/issues"
28+
},
29+
"homepage": "https://github.com/petehunt/react-tutorial"
30+
}

‎scripts/example.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/** @jsx React.DOM */
2+
3+
var converter = new Showdown.converter();
4+
5+
var Comment = React.createClass({
6+
render: function() {
7+
var rawMarkup = converter.makeHtml(this.props.children.toString());
8+
return (
9+
<div className="comment">
10+
<h2 className="commentAuthor">
11+
{this.props.author}
12+
</h2>
13+
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
14+
</div>
15+
);
16+
}
17+
});
18+
19+
var CommentBox = React.createClass({
20+
loadCommentsFromServer: function() {
21+
$.ajax({
22+
url: this.props.url,
23+
dataType: 'json',
24+
success: function(data) {
25+
this.setState({data: data});
26+
}.bind(this),
27+
error: function(xhr, status, err) {
28+
console.error(this.props.url, status, err.toString());
29+
}.bind(this)
30+
});
31+
},
32+
handleCommentSubmit: function(comment) {
33+
var comments = this.state.data;
34+
comments.push(comment);
35+
this.setState({data: comments}, function() {
36+
// `setState` accepts a callback. To avoid (improbable) race condition,
37+
// `we'll send the ajax request right after we optimistically set the new
38+
// `state.
39+
$.ajax({
40+
url: this.props.url,
41+
dataType: 'json',
42+
type: 'POST',
43+
data: comment,
44+
success: function(data) {
45+
this.setState({data: data});
46+
}.bind(this),
47+
error: function(xhr, status, err) {
48+
console.error(this.props.url, status, err.toString());
49+
}.bind(this)
50+
});
51+
});
52+
},
53+
getInitialState: function() {
54+
return {data: []};
55+
},
56+
componentWillMount: function() {
57+
this.loadCommentsFromServer();
58+
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
59+
},
60+
render: function() {
61+
return (
62+
<div className="commentBox">
63+
<h1>Comments</h1>
64+
<CommentList data={this.state.data} />
65+
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
66+
</div>
67+
);
68+
}
69+
});
70+
71+
var CommentList = React.createClass({
72+
render: function() {
73+
var commentNodes = this.props.data.map(function(comment, index) {
74+
return (
75+
// `key` is a React-specific concept and is not mandatory for the
76+
// purpose of this tutorial. if you're curious, see more here:
77+
// http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
78+
<Comment author={comment.author} key={index}>
79+
{comment.text}
80+
</Comment>
81+
);
82+
});
83+
return (
84+
<div className="commentList">
85+
{commentNodes}
86+
</div>
87+
);
88+
}
89+
});
90+
91+
var CommentForm = React.createClass({
92+
handleSubmit: function() {
93+
var author = this.refs.author.getDOMNode().value.trim();
94+
var text = this.refs.text.getDOMNode().value.trim();
95+
this.props.onCommentSubmit({author: author, text: text});
96+
this.refs.author.getDOMNode().value = '';
97+
this.refs.text.getDOMNode().value = '';
98+
return false;
99+
},
100+
render: function() {
101+
return (
102+
<form className="commentForm" onSubmit={this.handleSubmit}>
103+
<input type="text" placeholder="Your name" ref="author" />
104+
<input type="text" placeholder="Say something..." ref="text" />
105+
<input type="submit" value="Post" />
106+
</form>
107+
);
108+
}
109+
});
110+
111+
React.renderComponent(
112+
<CommentBox url="comments.json" pollInterval={2000} />,
113+
document.getElementById('content')
114+
);

‎server.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var express = require('express');
2+
var app = express();
3+
4+
var comments = [{author: 'Pete Hunt', text: 'Hey there!'}];
5+
6+
app.use('/', express.static(__dirname));
7+
app.use(express.bodyParser());
8+
9+
app.get('/comments.json', function(req, res) {
10+
res.setHeader('Content-Type', 'application/json');
11+
res.send(JSON.stringify(comments));
12+
});
13+
14+
app.post('/comments.json', function(req, res) {
15+
comments.push(req.body);
16+
res.setHeader('Content-Type', 'application/json');
17+
res.send(JSON.stringify(comments));
18+
});
19+
20+
app.listen(3000);

0 commit comments

Comments
 (0)