First step: copy files from official repo, configure ESLint.

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,rb,css,html}]
+indent_size = 2
+
+[*.go]
+indent_size = 8
+indent_style = tab

.eslintrc.js

@@ -1,33 +1,250 @@
 module.exports = {
-  'rules': {
-    'indent': [
-      2,
-      2
-    ],
-    'quotes': [
-      2,
-      'single'
-    ],
-    'linebreak-style': [
-      2,
-      'unix'
-    ],
-    'semi': [
-      2,
-      'always'
-    ]
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
   },
-  'env': {
-    'es6': true,
-    'browser': true,
-    'node': true
+
+  "globals": {
+    "jQuery": true,
+    "React": true,
   },
-  'extends': 'eslint:recommended',
-  'ecmaFeatures': {
-    'jsx': true,
-    'experimentalObjectRestSpread': true
+
+  "plugins": ["react"],
+
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "binaryLiterals": true,
+    "blockBindings": true,
+    "classes": true,
+    "defaultParams": true,
+    "destructuring": true,
+    "experimentalObjectRestSpread": true,
+    "forOf": true,
+    "generators": true,
+    "globalReturn": true,
+    "jsx": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralDuplicateProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "octalLiterals": true,
+    "regexUFlag": true,
+    "regexYFlag": true,
+    "spread": true,
+    "superInFunctions": true,
+    "templateStrings": true,
+    "unicodeCodePointEscapes": true
   },
-  'plugins': [
-    'react'
-  ]
+
+  "rules": {
+
+    //
+    // Possible Errors
+    //
+    // The following rules point out areas where you might have made mistakes.
+    //
+    "comma-dangle": 2, // disallow or enforce trailing commas
+    "no-cond-assign": 2, // disallow assignment in conditional expressions
+    "no-console": 1, // disallow use of console (off by default in the node environment)
+    "no-constant-condition": 2, // disallow use of constant expressions in conditions
+    "no-control-regex": 2, // disallow control characters in regular expressions
+    "no-debugger": 2, // disallow use of debugger
+    "no-dupe-args": 2, // disallow duplicate arguments in functions
+    "no-dupe-keys": 2, // disallow duplicate keys when creating object literals
+    "no-duplicate-case": 2, // disallow a duplicate case label.
+    "no-empty": 2, // disallow empty statements
+    "no-empty-character-class": 2, // disallow the use of empty character classes in regular expressions
+    "no-ex-assign": 2, // disallow assigning to the exception in a catch block
+    "no-extra-boolean-cast": 2, // disallow double-negation boolean casts in a boolean context
+    "no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
+    "no-extra-semi": 2, // disallow unnecessary semicolons
+    "no-func-assign": 2, // disallow overwriting functions written as function declarations
+    "no-inner-declarations": 2, // disallow function or variable declarations in nested blocks
+    "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor
+    "no-irregular-whitespace": 2, // disallow irregular whitespace outside of strings and comments
+    "no-negated-in-lhs": 2, // disallow negation of the left operand of an in expression
+    "no-obj-calls": 2, // disallow the use of object properties of the global object (Math and JSON) as functions
+    "no-regex-spaces": 2, // disallow multiple spaces in a regular expression literal
+    "no-sparse-arrays": 2, // disallow sparse arrays
+    "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement
+    "quote-props": 0, // disallow reserved words being used as object literal keys (off by default)
+    "use-isnan": 2, // disallow comparisons with the value NaN
+    "valid-jsdoc": 2, // Ensure JSDoc comments are valid (off by default)
+    "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string
+
+    //
+    // Best Practices
+    //
+    // These are rules designed to prevent you from making mistakes.
+    // They either prescribe a better way of doing something or help you avoid footguns.
+    //
+    "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default). 0: deep destructuring is not compatible https://github.com/eslint/eslint/issues/1863
+    "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
+    "consistent-return": 2, // require return statements to either always or never specify values
+    "curly": 2, // specify curly brace conventions for all control statements
+    "default-case": 2, // require default case in switch statements (off by default)
+    "dot-notation": 2, // encourages use of dot notation whenever possible
+    "eqeqeq": 2, // require the use of === and !==
+    "guard-for-in": 2, // make sure for-in loops have an if statement (off by default)
+    "no-alert": 2, // disallow the use of alert, confirm, and prompt
+    "no-caller": 2, // disallow use of arguments.caller or arguments.callee
+    "no-div-regex": 2, // disallow division operators explicitly at beginning of regular expression (off by default)
+    "no-else-return": 2, // disallow else after a return in an if (off by default)
+    "no-empty-label": 2, // disallow use of labels for anything other then loops and switches
+    "no-eq-null": 2, // disallow comparisons to null without a type-checking operator (off by default)
+    "no-eval": 2, // disallow use of eval()
+    "no-extend-native": 2, // disallow adding to native types
+    "no-extra-bind": 2, // disallow unnecessary function binding
+    "no-fallthrough": 2, // disallow fallthrough of case statements
+    "no-floating-decimal": 2, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
+    "no-implied-eval": 2, // disallow use of eval()-like methods
+    "no-iterator": 2, // disallow usage of __iterator__ property
+    "no-labels": 2, // disallow use of labeled statements
+    "no-lone-blocks": 2, // disallow unnecessary nested blocks
+    "no-loop-func": 2, // disallow creation of functions within loops
+    "no-multi-spaces": 2, // disallow use of multiple spaces
+    "no-multi-str": 2, // disallow use of multiline strings
+    "no-native-reassign": 2, // disallow reassignments of native objects
+    "no-new": 2, // disallow use of new operator when not part of the assignment or comparison
+    "no-new-func": 2, // disallow use of new operator for Function object
+    "no-new-wrappers": 2, // disallows creating new instances of String,Number, and Boolean
+    "no-octal": 2, // disallow use of octal literals
+    "no-octal-escape": 2, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
+    "no-param-reassign": 2, // disallow reassignment of function parameters (off by default)
+    "no-process-env": 2, // disallow use of process.env (off by default)
+    "no-proto": 2, // disallow usage of __proto__ property
+    "no-redeclare": 2, // disallow declaring the same variable more then once
+    "no-return-assign": 2, // disallow use of assignment in return statement
+    "no-script-url": 2, // disallow use of javascript: urls.
+    "no-self-compare": 2, // disallow comparisons where both sides are exactly the same (off by default)
+    "no-sequences": 2, // disallow use of comma operator
+    "no-throw-literal": 2, // restrict what can be thrown as an exception (off by default)
+    "no-unused-expressions": 2, // disallow usage of expressions in statement position
+    "no-void": 2, // disallow use of void operator (off by default)
+    "no-warning-comments": [0, {"terms": ["todo", "fixme"], "location": "start"}], // disallow usage of configurable warning terms in comments": 2, // e.g. TODO or FIXME (off by default)
+    "no-with": 2, // disallow use of the with statement
+    "radix": 2, // require use of the second argument for parseInt() (off by default)
+    "vars-on-top": 2, // requires to declare all vars on top of their containing scope (off by default)
+    "wrap-iife": 2, // require immediate function invocation to be wrapped in parentheses (off by default)
+    "yoda": 2, // require or disallow Yoda conditions
+
+    //
+    // Strict Mode
+    //
+    // These rules relate to using strict mode.
+    //
+    "strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint`
+
+    //
+    // Variables
+    //
+    // These rules have to do with variable declarations.
+    //
+    "no-catch-shadow": 2, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
+    "no-delete-var": 2, // disallow deletion of variables
+    "no-label-var": 2, // disallow labels that share a name with a variable
+    "no-shadow": 2, // disallow declaration of variables already declared in the outer scope
+    "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments
+    "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
+    "no-undef-init": 2, // disallow use of undefined when initializing variables
+    "no-undefined": 2, // disallow use of undefined variable (off by default)
+    "no-unused-vars": 2, // disallow declaration of variables that are not used in the code
+    "no-use-before-define": 2, // disallow use of variables before they are defined
+
+    //
+    // Stylistic Issues.
+    //
+    // These rules are purely matters of style and are quite subjective.
+    //
+    "array-bracket-spacing": [2, "never"],
+    "indent": [2, 2], // this option sets a specific tab width for your code (off by default)
+    "brace-style": [2, "stroustrup", {"allowSingleLine": true}],
+    "camelcase": 1, // require camel case names
+    "comma-spacing": [1, {"before": false, "after": true}], // enforce spacing before and after comma
+    "comma-style": [1, "last"], // enforce one true comma style (off by default)
+    "computed-property-spacing": [2, "never"],
+    "consistent-this": [1, "_this"], // enforces consistent naming when capturing the current execution context (off by default)
+    "eol-last": 2, // enforce newline at the end of file, with no multiple empty lines
+    "func-names": 0, // require function expressions to have a name (off by default)
+    "func-style": 0, // enforces use of function declarations or expressions (off by default)
+    "jsx-quotes": [1, "prefer-double"],
+    "key-spacing": [1, {"beforeColon": false, "afterColon": true}], // enforces spacing between keys and values in object literal properties
+    "linebreak-style": [2, "unix"],
+    "max-nested-callbacks": [1, 3], // specify the maximum depth callbacks can be nested (off by default)
+    "new-cap": [1, {"newIsCap": true, "capIsNew": false}], // require a capital letter for constructors
+    "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
+    "newline-after-var": 0, // allow/disallow an empty newline after var statement (off by default)
+    "no-array-constructor": 1, // disallow use of the Array constructor
+    "no-inline-comments": 0, // disallow comments inline after code (off by default)
+    "no-lonely-if": 1, // disallow if as the only statement in an else block (off by default)
+    "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
+    "no-multiple-empty-lines": [1, {"max": 2}], // disallow multiple empty lines (off by default)
+    "no-nested-ternary": 1, // disallow nested ternary expressions (off by default)
+    "no-new-object": 1, // disallow use of the Object constructor
+    "no-spaced-func": 1, // disallow space between function identifier and application
+    "no-ternary": 0, // disallow the use of ternary operators (off by default)
+    "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
+    "no-underscore-dangle": 1, // disallow dangling underscores in identifiers
+    "object-curly-spacing": [2, "never"],
+    "one-var": [2, "never"], // allow just one var statement per function (off by default)
+    "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
+    "padded-blocks": [1, "never"], // enforce padding within blocks (off by default)
+    "quotes": [1, "double"], // specify whether double or single quotes should be used
+    "semi": [2, "always"], // require or disallow use of semicolons instead of ASI
+    "semi-spacing": [1, {"before": false, "after": true}], // enforce spacing before and after semicolons
+    "sort-vars": 0, // sort variables within the same declaration block (off by default)
+    "space-after-keywords": [1, "always"], // require a space after certain keywords (off by default)
+    "space-before-blocks": [1, "always"], // require or disallow space before blocks (off by default)
+    "space-before-function-paren": [1, {"anonymous": "always", "named": "never"}], // require or disallow space before function opening parenthesis (off by default)
+    "space-in-parens": [1, "never"], // require or disallow spaces inside parentheses (off by default)
+    "space-infix-ops": [2, {"int32Hint": true}], // require spaces around operators
+    "space-return-throw-case": [2], // require a space after return, throw, and case
+    "space-unary-ops": [1, {"words": true, "nonwords": false}], // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
+    "spaced-comment": [1, "always"], // require or disallow a space immediately following the // in a line comment (off by default)
+    "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
+
+    //
+    // ECMAScript 6
+    //
+    // These rules are only relevant to ES6 environments and are off by default.
+    //
+    "no-var": 2, // require let or const instead of var (off by default)
+    "generator-star-spacing": [2, "before"], // enforce the spacing around the * in generator functions (off by default)
+
+    //
+    // Legacy
+    //
+    // The following rules are included for compatibility with JSHint and JSLint.
+    // While the names of the rules may not match up with the JSHint/JSLint counterpart,
+    // the functionality is the same.
+    //
+    "max-depth": [2, 3], // specify the maximum depth that blocks can be nested (off by default)
+    "max-len": [2, 200, 2], // specify the maximum length of a line in your program (off by default)
+    "max-params": [2, 5], // limits the number of parameters that can be used in the function declaration. (off by default)
+    "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
+    "no-bitwise": 0, // disallow use of bitwise operators (off by default)
+    "no-plusplus": 2, // disallow use of unary operators, ++ and -- (off by default)
+
+    //
+    // eslint-plugin-react
+    //
+    // React specific linting rules for ESLint
+    //
+    "react/display-name": 0, // Prevent missing displayName in a React component definition
+    "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
+    "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
+    "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
+    "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
+    "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
+    "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
+    "react/no-multi-comp": 0, // Prevent multiple component definition per file
+    "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
+    "react/prop-types": 2, // Prevent missing props validation in a React component definition
+    "react/react-in-jsx-scope": 0, // Prevent missing React when using JSX
+    "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
+    "react/wrap-multilines": 2 // Prevent missing parentheses around multilines JSX
+  }
 };

.gitignore

@@ -28,5 +28,7 @@ build/Release
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
 
-# Webpack build results
-bundle.js
+# Temporary/backup files and OS noise
+*~
+.DS_Store
+Thumbs.db

LICENSE

@@ -1,8 +1,9 @@
-MIT License
-Copyright (c) <year> <copyright holders>
+The examples provided by Facebook are for non-commercial testing and evaluation
+purposes only. Facebook reserves all rights not expressly granted.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-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 THE AUTHORS OR COPYRIGHT HOLDERS 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.
+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.

README.md

@@ -1,17 +1,25 @@
 # react-intro : Learning ReactJS
 
+This is the React comment box example from [the React tutorial](http://facebook.github.io/react/docs/tutorial.html).
+
 ## Installing
 
-- adjust the webpack-dev-server 2 URLs used in `index.html` :  `vm:8090` assumes
-  we want that server to run on a host called `vm`, but most users will want
-  `localhost` instead
-- adjust the `dev` script in `package.json` to match those URLs
-- `npm install`
-- `npm run start`
-- browse to [http://vm:8080/index.html](http://vm:8080/index.html) assuming
-  you didn't change the `serve` URL in `package.json`.
+```sh
+go run server.go
+```
+
+And visit <http://vm:3000/> assuming you host is called `vm`. 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
+```
 
 ## Parts taken from:
 
+- https://facebook.github.io/react/docs/tutorial.html
 - http://jslog.com/2014/10/02/react-with-webpack-part-1/ : much more useful than
   ReactJS "Getting started".

comments.json

@@ -0,0 +1,12 @@
+[
+    {
+        "id": 1388534400000,
+        "author": "Pete Hunt",
+        "text": "Hey there!"
+    },
+    {
+        "id": 1420070400000,
+        "author": "Paul O’Shannessy",
+        "text": "React is *great*!"
+    }
+]

index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Basic Property Grid</title>
-  <!-- include react -->
-  <script src="./node_modules/react/dist/react-with-addons.js"></script>
-  </head>
-
-<body>
-  <div id="content">
-    <!-- this is where the root react component will get rendered -->
-    </div>
-
-  <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
-  <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
-  <script src="http://vm:8090/webpack-dev-server.js"></script>
-
-  <!-- include the bundle that contains all our scripts, produced by webpack -->
-  <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
-  <script type="text/javascript" src="http://vm:8090/assets/bundle.js"></script>
-  </body>
-</html>

main.js

@@ -1,9 +0,0 @@
-// https://facebook.github.io/react/docs/getting-started.html
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-
-ReactDOM.render(
-    <h1>Hello, XMas world!</h1>,
-    document.getElementById('content')
-);

package.json

@@ -1,27 +1,34 @@
 {
-  "name": "gettingstarted",
-  "version": "1.0.0",
-  "description": "",
-  "main": "main.jsx",
+  "name": "react-tutorial",
+  "version": "0.0.0",
+  "description": "Code from the React tutorial.",
+  "main": "server.js",
   "dependencies": {
-    "babel-preset-react": "^6.3.13",
-    "babelify": "^7.2.0",
-    "eslint-plugin-react": "^3.13.0",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "body-parser": "^1.4.3",
+    "express": "^4.4.5"
   },
-  "devDependencies": {
-    "http-server": "^0.8.5",
-    "jsx-loader": "^0.13.2",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
-  },
-  "author": "",
-  "license": "MIT",
-
+  "devDependencies": {},
   "scripts": {
-    "start": "npm run serve | npm run dev",
-    "serve": "./node_modules/.bin/http-server -p 8080",
-    "dev": "webpack-dev-server --progress --colors --port 8090 --host vm"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactjs/react-tutorial.git"
+  },
+  "keywords": [
+    "react",
+    "tutorial",
+    "comment",
+    "example"
+  ],
+  "author": "petehunt",
+  "license": "proprietary",
+  "bugs": {
+    "url": "https://github.com/reactjs/react-tutorial/issues"
+  },
+  "homepage": "https://github.com/reactjs/react-tutorial",
+  "engines" : {
+    "node" : "0.12.x"
   }
 }

public/css/base.css

@@ -0,0 +1,62 @@
+body {
+  background: #fff;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.7;
+  margin: 0;
+  padding: 30px;
+}
+
+a {
+  color: #4183c4;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+  font-size: 12px;
+  margin: 0 2px;
+  padding: 0px 5px;
+}
+
+h1, h2, h3, h4 {
+  font-weight: bold;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+h1 {
+  border-bottom: 1px solid #ddd;
+  font-size: 2.5em;
+  font-weight: bold;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+h2 {
+  border-bottom: 1px solid #eee;
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.2em;
+}
+
+p, ul {
+  margin: 15px 0;
+}
+
+ul {
+  padding-left: 30px;
+}

public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>React Tutorial</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
+  </head>
+
+  <body>
+    <div id="content"></div>
+    <!-- script type="text/babel" src="scripts/example.js"></script -->
+    <script type="text/babel" src="scripts/tutorial.js"></script>
+  </body>
+</html>

public/scripts/example.js

@@ -0,0 +1,146 @@
+/**
+ * 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.
+ */
+
+var Comment = React.createClass({
+  rawMarkup: function() {
+    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
+    return { __html: rawMarkup };
+  },
+
+  render: function() {
+    return (
+      <div className="comment">
+        <h2 className="commentAuthor">
+          {this.props.author}
+        </h2>
+        <span dangerouslySetInnerHTML={this.rawMarkup()} />
+      </div>
+    );
+  }
+});
+
+var CommentBox = React.createClass({
+  loadCommentsFromServer: function() {
+    $.ajax({
+      url: this.props.url,
+      dataType: 'json',
+      cache: false,
+      success: function(data) {
+        this.setState({data: data});
+      }.bind(this),
+      error: function(xhr, status, err) {
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  handleCommentSubmit: function(comment) {
+    var comments = this.state.data;
+    // 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() {
+    return {data: []};
+  },
+  componentDidMount: function() {
+    this.loadCommentsFromServer();
+    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
+  },
+  render: function() {
+    return (
+      <div className="commentBox">
+        <h1>Comments</h1>
+        <CommentList data={this.state.data} />
+        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
+      </div>
+    );
+  }
+});
+
+var CommentList = React.createClass({
+  render: function() {
+    var commentNodes = this.props.data.map(function(comment) {
+      return (
+        <Comment author={comment.author} key={comment.id}>
+          {comment.text}
+        </Comment>
+      );
+    });
+    return (
+      <div className="commentList">
+        {commentNodes}
+      </div>
+    );
+  }
+});
+
+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 = this.state.author.trim();
+    var text = this.state.text.trim();
+    if (!text || !author) {
+      return;
+    }
+    this.props.onCommentSubmit({author: author, text: text});
+    this.setState({author: '', text: ''});
+  },
+  render: function() {
+    return (
+      <form className="commentForm" onSubmit={this.handleSubmit}>
+        <input
+          type="text"
+          placeholder="Your name"
+          value={this.state.author}
+          onChange={this.handleAuthorChange}
+        />
+        <input
+          type="text"
+          placeholder="Say something..."
+          value={this.state.text}
+          onChange={this.handleTextChange}
+        />
+        <input type="submit" value="Post" />
+      </form>
+    );
+  }
+});
+
+ReactDOM.render(
+  <CommentBox url="/api/comments" pollInterval={2000} />,
+  document.getElementById('content')
+);

public/scripts/tutorial.js

@@ -0,0 +1,11 @@
+let CommentBox = React.createClass({
+  render: function () {
+    "use strict";
+
+    return (
+      <div className="commentBox">
+        Hello, world: I am a CommentBox.
+        </div>
+    );
+  }
+});

server.go

@@ -0,0 +1,110 @@
+/**
+ * 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 (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"os"
+	"sync"
+	"time"
+)
+
+type comment struct {
+	ID     int64  `json:"id"`
+	Author string `json:"author"`
+	Text   string `json:"text"`
+}
+
+const dataFile = "./comments.json"
+
+var commentMutex = new(sync.Mutex)
+
+// Handle comments
+func handleComments(w http.ResponseWriter, r *http.Request) {
+	// Since multiple requests could come in at once, ensure we have a lock
+	// around all file operations
+	commentMutex.Lock()
+	defer commentMutex.Unlock()
+
+	// Stat the file, so we can find its current permissions
+	fi, err := os.Stat(dataFile)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("Unable to stat the data file (%s): %s", dataFile, err), http.StatusInternalServerError)
+		return
+	}
+
+	// Read the comments from the file.
+	commentData, err := ioutil.ReadFile(dataFile)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("Unable to read the data file (%s): %s", dataFile, err), http.StatusInternalServerError)
+		return
+	}
+
+	switch r.Method {
+	case "POST":
+		// Decode the JSON data
+		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{ID: time.Now().UnixNano() / 1000000, Author: r.FormValue("author"), Text: r.FormValue("text")})
+
+		// Marshal the comments to indented json.
+		commentData, err = json.MarshalIndent(comments, "", "    ")
+		if err != nil {
+			http.Error(w, fmt.Sprintf("Unable to marshal comments to json: %s", err), http.StatusInternalServerError)
+			return
+		}
+
+		// Write out the comments to the file, preserving permissions
+		err := ioutil.WriteFile(dataFile, commentData, fi.Mode())
+		if err != nil {
+			http.Error(w, fmt.Sprintf("Unable to write comments to data file (%s): %s", dataFile, err), http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		w.Header().Set("Cache-Control", "no-cache")
+		io.Copy(w, bytes.NewReader(commentData))
+
+	case "GET":
+		w.Header().Set("Content-Type", "application/json")
+		w.Header().Set("Cache-Control", "no-cache")
+		// stream the contents of the file to the response
+		io.Copy(w, bytes.NewReader(commentData))
+
+	default:
+		// Don't know the method, so error
+		http.Error(w, fmt.Sprintf("Unsupported method: %s", r.Method), http.StatusMethodNotAllowed)
+	}
+}
+
+func main() {
+	port := os.Getenv("PORT")
+	if port == "" {
+		port = "3000"
+	}
+	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))
+}

webpack.config.js

@@ -1,24 +0,0 @@
-module.exports = {
-  entry: './main.js',
-  output: {
-    filename: 'bundle.js', // default, skippable
-    publicPath: 'http://localhost/assets'
-  },
-  module: {
-    loaders: [
-      {
-        // Tell webpack to use jsx-loader for all *.js/*.jsx files
-        test: /\.jsx?$/,
-        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
-      }
-    ]
-  },
-  externals: {
-    // Don't bundle the "react" npm package with our bundle.js,
-    // but get it from a global React variable.
-    react: 'React'
-  },
-  resolve: {
-    extensions: ['', '.js', '.jsx']
-  }
-};