finsihed the eighth lesson

also had to revamp dependencies in package.json because of incompatibilities
with the official solution being written for an older version of react (???)

see: workshopper/learnyoureact#103

isomorphic/app.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TodoBox from './views/index.jsx';
+
+let data = JSON.parse(document.getElementById('initial-data').getAttribute('data-json'));
+ReactDOM.render(<TodoBox data={data} />, document.getElementById("app"));

isomorphic/program.js

@@ -0,0 +1,62 @@
+var React = require('react');
+var ReactDOMServer = require('react-dom/server');
+var DOM = React.DOM;
+var body = DOM.body;
+var div = DOM.div;
+var script = DOM.script;
+
+var browserify = require('browserify');
+var babelify = require("babelify");
+
+var express = require('express');
+var app = express();
+
+app.set('port', (process.argv[2] || 3030));
+app.set('view engine', 'jsx');
+app.set('views', __dirname + '/views');
+app.engine('jsx', require('express-react-views').createEngine({ transformViews: false }));
+
+require('babel/register')({
+  ignore: false
+});
+
+var TodoBox = require('./views/index.jsx');
+
+var data = [
+	{ title: 'Shopping', detail: process.argv[3]},
+	{ title: 'Hair cut', detail: process.argv[4]}
+];
+
+app.use('/bundle.js', function (req, res) {
+    res.setHeader('content-type', 'application/javascript');
+
+    browserify({ debug: true })
+        .transform(babelify.configure({
+            presets: ["react", "es2015"],
+            compact: false
+        }))
+        .require("./app.js", { entry: true })
+        .bundle()
+        .pipe(res);
+});
+
+app.use('/', function (req, res) {
+    var initialData = JSON.stringify(data);
+    var markup = ReactDOMServer.renderToString(React.createElement(TodoBox, {data: data}));
+
+    res.setHeader('Content-Type', 'text/html');
+
+    var html = ReactDOMServer.renderToStaticMarkup(body(null,
+        div({id: 'app', dangerouslySetInnerHTML: {__html: markup}}),
+        script({
+            id: 'initial-data',
+            type: 'text/plain',
+            'data-json': initialData
+        }),
+        script({src: '/bundle.js'})
+    ));
+
+    res.end(html);
+});
+
+app.listen(app.get('port'), function() {});

isomorphic/views/index.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+export default class TodoBox extends React.Component {
+    render() {
+        return (
+            <div className="todoBox">
+                <h1>Todos</h1>
+                <TodoList data = {this.props.data} />
+                <TodoForm />
+            </div>
+        );
+    }
+}
+
+class TodoList extends React.Component {
+    render() {
+      var todos = this.props.data.map(function(obj) {
+        return <Todo title={obj.title} key={obj.title}>{obj.detail}</Todo>
+      });
+
+      return (
+        <div className = "todoList">
+          <table style={{border: "2px solid black"}}>
+            <tbody>
+              {todos}
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+}
+
+class Todo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      checked: false
+    };
+  }
+
+  handleChange(e) {
+    console.log('check event handled');
+    this.setState({checked: e.target.checked});
+  }
+
+  render() {
+    return (
+      <tr>
+        <td style={style.tableContent}>
+          <input type="checkbox" checked={this.state.checked} onChange={this.handleChange.bind(this)}/>
+        </td>
+        <td style={style.tableContent}>{this.props.title}</td>
+        <td style={style.tableContent}>{this.props.children}</td>
+      </tr>
+    );
+  }
+}
+Todo.propTypes = {
+  title: React.PropTypes.string.isRequired
+};
+
+class TodoForm extends React.Component {
+  render() {
+    return (
+      <div className="todoForm">
+        I am a TodoForm.
+      </div>
+    );
+  }
+}
+
+let style = {
+  tableContent: {
+    border: '1px solid black'
+  }
+};

package.json

@@ -19,10 +19,15 @@
   "homepage": "https://github.com/kgraves/learnyoureact-lessons#readme",
   "dependencies": {
     "babel": "^5.8.23",
-    "body-parser": "^1.15.2",
-    "express": "^4.14.0",
-    "express-react-views": "^0.9.0",
-    "react": "^15.3.1",
-    "react-dom": "^15.3.1"
+    "babelify": "~7.2.0",
+    "babel-preset-react": "~6.1.18",
+    "babel-preset-es2015": "~6.1.18",
+    "body-parser": "~1.12.3",
+    "browserify": "~10.1.3",
+    "express": "~4.12.3",
+    "express-react-views": "~0.9.0",
+    "react": "~0.14.0",
+    "reactify": "~1.1.1",
+    "react-dom": "~0.14.0"
   }
 }