diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..87f537d4
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,9 @@
+The examples provided by Facebook are for non-commercial testing and evaluation
+purposes only. Facebook reserves all rights not expressly granted.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index b7517b72..4862f5df 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ This is the React comment box example from [the React tutorial](http://facebook.
## To use
-There are several simple server implementations included. They all serve static files from `public/` and handle requests to `comments.json` to fetch or add data. Start a server with one of the following:
+There are several simple server implementations included. They all serve static files from `public/` and handle requests to `/api/comments` to fetch or add data. Start a server with one of the following:
### Node
@@ -37,4 +37,19 @@ php server.php
go run server.go
```
+### Perl
+
+```sh
+cpan Mojolicious
+perl server.pl
+```
+
And visit . Try opening multiple tabs!
+
+## Changing the port
+
+You can change the port number by setting the `$PORT` environment variable before invoking any of the scripts above, e.g.,
+
+```sh
+PORT=3001 node server.js
+```
diff --git a/comments.json b/comments.json
index 32938452..28816136 100644
--- a/comments.json
+++ b/comments.json
@@ -1,6 +1,27 @@
[
{
+ "id": 1388534400000,
"author": "Pete Hunt",
"text": "Hey there!"
+ },
+ {
+ "id": 1420070400000,
+ "author": "Paul O’Shannessy",
+ "text": "React is *great*!"
+ },
+ {
+ "id": 1464988635157,
+ "author": "ben",
+ "text": "*abc*"
+ },
+ {
+ "id": 1464988636500,
+ "author": "ben",
+ "text": "*abc*"
+ },
+ {
+ "id": 1464988717637,
+ "author": "evil",
+ "text": "alert(1)"
}
-]
+]
\ No newline at end of file
diff --git a/package.json b/package.json
index e7491981..bf3360a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
{
"name": "react-tutorial",
"version": "0.0.0",
+ "private": true,
+ "license": "see LICENSE file",
"description": "Code from the React tutorial.",
"main": "server.js",
"dependencies": {
diff --git a/public/css/base.css b/public/css/base.css
index bf382be3..c8cc35f7 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -23,7 +23,7 @@ code {
font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
font-size: 12px;
margin: 0 2px;
- padding: 0px 5px;
+ padding: 0 5px;
}
h1, h2, h3, h4 {
@@ -35,9 +35,6 @@ h1, h2, h3, h4 {
h1 {
border-bottom: 1px solid #ddd;
font-size: 2.5em;
- font-weight: bold;
- margin: 0 0 15px;
- padding: 0;
}
h2 {
diff --git a/public/index.html b/public/index.html
index c6220169..eb201204 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,16 +1,22 @@
- Hello React
+
+ React Tutorial
-
-
-
-
+
+
+
+
+
-
+
+
diff --git a/public/scripts/example.js b/public/scripts/example.js
index fad2ea73..6493fea9 100644
--- a/public/scripts/example.js
+++ b/public/scripts/example.js
@@ -1,6 +1,6 @@
/**
- * This file provided by Facebook is for non-commercial testing and evaluation purposes only.
- * Facebook reserves all rights not expressly granted.
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -11,14 +11,19 @@
*/
var Comment = React.createClass({
+ rawMarkup: function() {
+ var md = new Remarkable();
+ var rawMarkup = md.render(this.props.children.toString());
+ return { __html: rawMarkup };
+ },
+
render: function() {
- var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return (
{this.props.author}
-
+
);
}
@@ -40,23 +45,24 @@ var CommentBox = React.createClass({
},
handleCommentSubmit: function(comment) {
var comments = this.state.data;
- comments.push(comment);
- this.setState({data: comments}, function() {
- // `setState` accepts a callback. To avoid (improbable) race condition,
- // `we'll send the ajax request right after we optimistically set the new
- // `state.
- $.ajax({
- url: this.props.url,
- dataType: 'json',
- type: 'POST',
- data: comment,
- success: function(data) {
- this.setState({data: data});
- }.bind(this),
- error: function(xhr, status, err) {
- console.error(this.props.url, status, err.toString());
- }.bind(this)
- });
+ // Optimistically set an id on the new comment. It will be replaced by an
+ // id generated by the server. In a production application you would likely
+ // not use Date.now() for this and would have a more robust system in place.
+ comment.id = Date.now();
+ var newComments = comments.concat([comment]);
+ this.setState({data: newComments});
+ $.ajax({
+ url: this.props.url,
+ dataType: 'json',
+ type: 'POST',
+ data: comment,
+ success: function(data) {
+ this.setState({data: data});
+ }.bind(this),
+ error: function(xhr, status, err) {
+ this.setState({data: comments});
+ console.error(this.props.url, status, err.toString());
+ }.bind(this)
});
},
getInitialState: function() {
@@ -79,12 +85,9 @@ var CommentBox = React.createClass({
var CommentList = React.createClass({
render: function() {
- var commentNodes = this.props.data.map(function(comment, index) {
+ var commentNodes = this.props.data.map(function(comment) {
return (
- // `key` is a React-specific concept and is not mandatory for the
- // purpose of this tutorial. if you're curious, see more here:
- // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-
+
{comment.text}
);
@@ -98,29 +101,47 @@ var CommentList = React.createClass({
});
var CommentForm = React.createClass({
+ getInitialState: function() {
+ return {author: '', text: ''};
+ },
+ handleAuthorChange: function(e) {
+ this.setState({author: e.target.value});
+ },
+ handleTextChange: function(e) {
+ this.setState({text: e.target.value});
+ },
handleSubmit: function(e) {
e.preventDefault();
- var author = React.findDOMNode(this.refs.author).value.trim();
- var text = React.findDOMNode(this.refs.text).value.trim();
+ var author = this.state.author.trim();
+ var text = this.state.text.trim();
if (!text || !author) {
return;
}
this.props.onCommentSubmit({author: author, text: text});
- React.findDOMNode(this.refs.author).value = '';
- React.findDOMNode(this.refs.text).value = '';
+ this.setState({author: '', text: ''});
},
render: function() {
return (
);
}
});
-React.render(
- ,
+ReactDOM.render(
+ ,
document.getElementById('content')
);
diff --git a/server.go b/server.go
index 44bc0bfd..934a4cfc 100644
--- a/server.go
+++ b/server.go
@@ -1,3 +1,15 @@
+/**
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
package main
import (
@@ -10,9 +22,11 @@ import (
"net/http"
"os"
"sync"
+ "time"
)
type comment struct {
+ ID int64 `json:"id"`
Author string `json:"author"`
Text string `json:"text"`
}
@@ -45,14 +59,14 @@ func handleComments(w http.ResponseWriter, r *http.Request) {
switch r.Method {
case "POST":
// Decode the JSON data
- comments := make([]comment, 0)
+ var comments []comment
if err := json.Unmarshal(commentData, &comments); err != nil {
http.Error(w, fmt.Sprintf("Unable to Unmarshal comments from data file (%s): %s", dataFile, err), http.StatusInternalServerError)
return
}
// Add a new comment to the in memory slice of comments
- comments = append(comments, comment{Author: r.FormValue("author"), Text: r.FormValue("text")})
+ comments = append(comments, comment{ID: time.Now().UnixNano() / 1000000, Author: r.FormValue("author"), Text: r.FormValue("text")})
// Marshal the comments to indented json.
commentData, err = json.MarshalIndent(comments, "", " ")
@@ -70,11 +84,13 @@ func handleComments(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
w.Header().Set("Cache-Control", "no-cache")
+ w.Header().Set("Access-Control-Allow-Origin", "*")
io.Copy(w, bytes.NewReader(commentData))
case "GET":
w.Header().Set("Content-Type", "application/json")
w.Header().Set("Cache-Control", "no-cache")
+ w.Header().Set("Access-Control-Allow-Origin", "*")
// stream the contents of the file to the response
io.Copy(w, bytes.NewReader(commentData))
@@ -89,7 +105,7 @@ func main() {
if port == "" {
port = "3000"
}
- http.HandleFunc("/comments.json", handleComments)
+ http.HandleFunc("/api/comments", handleComments)
http.Handle("/", http.FileServer(http.Dir("./public")))
log.Println("Server started: http://localhost:" + port)
log.Fatal(http.ListenAndServe(":"+port, nil))
diff --git a/server.js b/server.js
index fd4b81dd..b5a7218a 100644
--- a/server.js
+++ b/server.js
@@ -1,6 +1,6 @@
/**
- * This file provided by Facebook is for non-commercial testing and evaluation purposes only.
- * Facebook reserves all rights not expressly granted.
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -16,27 +16,57 @@ var express = require('express');
var bodyParser = require('body-parser');
var app = express();
+var COMMENTS_FILE = path.join(__dirname, 'comments.json');
+
app.set('port', (process.env.PORT || 3000));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
-app.get('/comments.json', function(req, res) {
- fs.readFile('comments.json', function(err, data) {
- res.setHeader('Content-Type', 'application/json');
- res.send(data);
+// Additional middleware which will set headers that we need on each request.
+app.use(function(req, res, next) {
+ // Set permissive CORS header - this allows this server to be used only as
+ // an API server in conjunction with something like webpack-dev-server.
+ res.setHeader('Access-Control-Allow-Origin', '*');
+
+ // Disable caching so we'll always get the latest comments.
+ res.setHeader('Cache-Control', 'no-cache');
+ next();
+});
+
+app.get('/api/comments', function(req, res) {
+ fs.readFile(COMMENTS_FILE, function(err, data) {
+ if (err) {
+ console.error(err);
+ process.exit(1);
+ }
+ res.json(JSON.parse(data));
});
});
-app.post('/comments.json', function(req, res) {
- fs.readFile('comments.json', function(err, data) {
+app.post('/api/comments', function(req, res) {
+ fs.readFile(COMMENTS_FILE, function(err, data) {
+ if (err) {
+ console.error(err);
+ process.exit(1);
+ }
var comments = JSON.parse(data);
- comments.push(req.body);
- fs.writeFile('comments.json', JSON.stringify(comments, null, 4), function(err) {
- res.setHeader('Content-Type', 'application/json');
- res.setHeader('Cache-Control', 'no-cache');
- res.send(JSON.stringify(comments));
+ // NOTE: In a real implementation, we would likely rely on a database or
+ // some other approach (e.g. UUIDs) to ensure a globally unique id. We'll
+ // treat Date.now() as unique-enough for our purposes.
+ var newComment = {
+ id: Date.now(),
+ author: req.body.author,
+ text: req.body.text,
+ };
+ comments.push(newComment);
+ fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) {
+ if (err) {
+ console.error(err);
+ process.exit(1);
+ }
+ res.json(comments);
});
});
});
diff --git a/server.php b/server.php
index 25aa468e..e510136b 100644
--- a/server.php
+++ b/server.php
@@ -1,4 +1,15 @@
$_POST['author'],
- 'text' => $_POST['text']];
+ $commentsDecoded[] = [
+ 'id' => round(microtime(true) * 1000),
+ 'author' => $_POST['author'],
+ 'text' => $_POST['text']
+ ];
$comments = json_encode($commentsDecoded, JSON_PRETTY_PRINT);
file_put_contents('comments.json', $comments);
}
header('Content-Type: application/json');
header('Cache-Control: no-cache');
+ header('Access-Control-Allow-Origin: *');
echo $comments;
} else {
return false;
}
}
-
diff --git a/server.pl b/server.pl
new file mode 100644
index 00000000..c3212b9c
--- /dev/null
+++ b/server.pl
@@ -0,0 +1,38 @@
+# This file provided by Facebook is for non-commercial testing and evaluation
+# purposes only. Facebook reserves all rights not expressly granted.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+# FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+# ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+# WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+use Time::HiRes qw(gettimeofday);
+use Mojolicious::Lite;
+use Mojo::JSON qw(encode_json decode_json);
+
+app->static->paths->[0] = './public';
+
+any '/' => sub { $_[0]->reply->static('index.html') };
+
+any [qw(GET POST)] => '/api/comments' => sub {
+ my $self = shift;
+ my $comments = decode_json (do { local(@ARGV,$/) = 'comments.json';<> });
+ $self->res->headers->cache_control('no-cache');
+ $self->res->headers->access_control_allow_origin('*');
+
+ if ($self->req->method eq 'POST')
+ {
+ push @$comments, {
+ id => int(gettimeofday * 1000),
+ author => $self->param('author'),
+ text => $self->param('text'),
+ };
+ open my $FILE, '>', 'comments.json';
+ print $FILE encode_json($comments);
+ }
+ $self->render(json => $comments);
+};
+my $port = $ENV{PORT} || 3000;
+app->start('daemon', '-l', "http://*:$port");
diff --git a/server.py b/server.py
index 730e39b3..03c6213d 100644
--- a/server.py
+++ b/server.py
@@ -1,5 +1,5 @@
-# This file provided by Facebook is for non-commercial testing and evaluation purposes only.
-# Facebook reserves all rights not expressly granted.
+# This file provided by Facebook is for non-commercial testing and evaluation
+# purposes only. Facebook reserves all rights not expressly granted.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -10,24 +10,35 @@
import json
import os
+import time
from flask import Flask, Response, request
app = Flask(__name__, static_url_path='', static_folder='public')
app.add_url_rule('/', 'root', lambda: app.send_static_file('index.html'))
-@app.route('/comments.json', methods=['GET', 'POST'])
-def comments_handler():
- with open('comments.json', 'r') as file:
- comments = json.loads(file.read())
+@app.route('/api/comments', methods=['GET', 'POST'])
+def comments_handler():
+ with open('comments.json', 'r') as f:
+ comments = json.loads(f.read())
if request.method == 'POST':
- comments.append(request.form.to_dict())
+ new_comment = request.form.to_dict()
+ new_comment['id'] = int(time.time() * 1000)
+ comments.append(new_comment)
+
+ with open('comments.json', 'w') as f:
+ f.write(json.dumps(comments, indent=4, separators=(',', ': ')))
- with open('comments.json', 'w') as file:
- file.write(json.dumps(comments, indent=4, separators=(',', ': ')))
+ return Response(
+ json.dumps(comments),
+ mimetype='application/json',
+ headers={
+ 'Cache-Control': 'no-cache',
+ 'Access-Control-Allow-Origin': '*'
+ }
+ )
- return Response(json.dumps(comments), mimetype='application/json', headers={'Cache-Control': 'no-cache'})
if __name__ == '__main__':
- app.run(port=int(os.environ.get("PORT",3000)))
+ app.run(port=int(os.environ.get("PORT", 3000)), debug=True)
diff --git a/server.rb b/server.rb
index 6bfb84a1..698f4339 100644
--- a/server.rb
+++ b/server.rb
@@ -1,5 +1,5 @@
-# This file provided by Facebook is for non-commercial testing and evaluation purposes only.
-# Facebook reserves all rights not expressly granted.
+# This file provided by Facebook is for non-commercial testing and evaluation
+# purposes only. Facebook reserves all rights not expressly granted.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -11,32 +11,39 @@
require 'webrick'
require 'json'
-port = ENV['PORT'].nil? ? 3000 : ENV['PORT'].to_i
+# default port to 3000 or overwrite with PORT variable by running
+# $ PORT=3001 ruby server.rb
+port = ENV['PORT'] ? ENV['PORT'].to_i : 3000
puts "Server started: http://localhost:#{port}/"
root = File.expand_path './public'
-server = WEBrick::HTTPServer.new :Port => port, :DocumentRoot => root
+server = WEBrick::HTTPServer.new Port: port, DocumentRoot: root
-server.mount_proc '/comments.json' do |req, res|
- comments = JSON.parse(File.read('./comments.json'))
+server.mount_proc '/api/comments' do |req, res|
+ comments = JSON.parse(File.read('./comments.json', encoding: 'UTF-8'))
if req.request_method == 'POST'
# Assume it's well formed
- comment = {}
+ comment = { id: (Time.now.to_f * 1000).to_i }
req.query.each do |key, value|
- comment[key] = value.force_encoding('UTF-8')
+ comment[key] = value.force_encoding('UTF-8') unless key == 'id'
end
comments << comment
- File.write('./comments.json', JSON.pretty_generate(comments, :indent => ' '))
+ File.write(
+ './comments.json',
+ JSON.pretty_generate(comments, indent: ' '),
+ encoding: 'UTF-8'
+ )
end
# always return json
res['Content-Type'] = 'application/json'
res['Cache-Control'] = 'no-cache'
+ res['Access-Control-Allow-Origin'] = '*'
res.body = JSON.generate(comments)
end
-trap 'INT' do server.shutdown end
+trap('INT') { server.shutdown }
server.start