12-02 JSX

Author: Satyam

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015", "react"]
 }

client/.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "extends": "airbnb",
   "env": {
     "browser": true
   }

client/data.js

@@ -0,0 +1,50 @@
+module.exports = {
+  25: {
+    name: 'Writing a Book on Web Dev Tools',
+    descr: 'Tasks required to write a book on the tools required to develop a web application',
+    tasks: {
+      1: {
+        descr: 'Figure out what kind of application to develop',
+        completed: true,
+      },
+      2: {
+        descr: 'Decide what tools to use',
+        completed: false,
+      },
+      3: {
+        descr: 'Create repositories for text and samples',
+        completed: true,
+      },
+    },
+  },
+  34: {
+    name: 'Cook a Spanish omelette',
+    descr: 'Steps to cook a Spanish omelette or \'tortilla\'',
+    tasks: {
+      4: {
+        descr: 'Peel and dice the potatoes',
+        completed: true,
+      },
+      5: {
+        descr: 'Fry the potatoes',
+        completed: true,
+      },
+      6: {
+        descr: 'Peel and chop the onions',
+        completed: false,
+      },
+      7: {
+        descr: 'Saute the onions',
+        completed: false,
+      },
+      8: {
+        descr: 'Beat the eggs',
+        completed: false,
+      },
+      9: {
+        descr: 'Mix everything and fry',
+        completed: false,
+      },
+    },
+  },
+};

client/index.js

@@ -1,13 +1,29 @@
-const axios = require('axios');
-module.exports = function (contentEl) {
-  axios.get('/data/v1/projects')
-    .then((response) => {
-      contentEl.innerHTML =
-      `<h1>Projects:</h1><ul>${
-        response.data.map((item) =>
-          `<li><a href="project.html?${item.pid}">${item.name}</a></li>`
-        ).join('\n')
-      }</ul>`;
-      document.title = 'Projects';
-    });
+import React from 'react';
+import { Link } from 'react-router';
+const data = require('./data.js');
+
+const PrjItem = ({ pid, name }) => (
+  <li>
+    <Link to={`project/${pid}`}>
+      {name}
+    </Link>
+  </li>
+);
+
+PrjItem.propTypes = {
+  pid: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string.isRequired,
 };
+
+const ProjectList = () => (
+  <div className="index">
+    <h1>Projects:</h1>
+    <ul>{
+      Object.keys(data).map(pid =>
+        (<PrjItem key={pid} pid={pid} name={data[pid].name} />)
+      )
+    }</ul>
+  </div>
+);
+
+export default ProjectList;

client/project.js

@@ -1,17 +1,42 @@
-const axios = require('axios');
-module.exports = function (contentEl) {
-  axios.get(`/data/v1/projects/${window.location.search.substr(1)}`)
-    .then((response) => {
-      const prj = response.data;
-      contentEl.innerHTML =
-        `<h1>${prj.name}</h1><p>${prj.descr}</p><ul>${
-          Object.keys(prj.tasks).map((tid) => {
-            const task = prj.tasks[tid];
-            return `<li><input type="checkbox" ${
-              task.completed ? 'checked' : ''
-            } /> &nbsp; ${task.descr}</li>`;
-          }).join('\n')
-        }</ul>`;
-      document.title = `Project ${prj.pid}: ${prj.name}`;
-    });
+import React from 'react';
+const data = require('./data.js');
+
+const Task = ({ descr, complete }) => (
+  <li>
+    <input type="checkbox" defaultChecked={complete} /> &nbsp; {descr}
+  </li>
+);
+
+Task.propTypes = {
+  complete: React.PropTypes.bool,
+  descr: React.PropTypes.string,
 };
+
+const TaskList = ({ tasks }) => (
+  <ul className="task-list">{
+    Object.keys(tasks).map(tid => (
+      <Task key={tid} complete={tasks[tid].complete} descr={tasks[tid].descr} />
+    ))
+  }</ul>
+);
+
+TaskList.propTypes = {
+  tasks: React.PropTypes.object,
+};
+
+const Project = ({ params: { pid } }) => {
+  const prj = data[pid];
+  return (<div className="project">
+    <h1>{prj.name}</h1>
+    <p>{prj.descr}</p>
+    <TaskList tasks={prj.tasks} />
+  </div>);
+};
+
+Project.propTypes = {
+  params: React.PropTypes.shape({
+    pid: React.PropTypes.string.isRequired,
+  }),
+};
+
+export default Project;

client/router.js

@@ -1,29 +1,20 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Router, browserHistory  } from 'react-router';
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
-const Index = require('./index.js');
-const Project = require('./project.js');
+import Index from './index.js';
+import Project from './project.js';
 
 const App = (props) => props.children;
+const NotFound = () => (<h1>Not found</h1>);
 
-const routeConfig = {
-  path: '/',
-  component: App,
-  indexRoute: { component: Index },
-  childRoutes: [
-    { path: 'index', component: Index },
-    { path: 'project/:pid', component: Project }
-  ]
-};
-
-render(
-  React.createElement(
-    Router,
-    {
-      routes: routeConfig,
-      history: browserHistory
-    }
-  ),
-  document.getElementById('contents')
-);
+render((
+  <Router history={browserHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Index} />
+      <Route path="index" component={Index} />
+      <Route path="project/:pid" component={Project} />
+      <Route path="*" component={NotFound} />
+    </Route>
+  </Router>
+), document.getElementById('contents'));

package.json

@@ -8,7 +8,9 @@
     "lint": "eslint . || exit 0",
     "test": "mocha",
     "coverage": "istanbul cover node_modules/.bin/_mocha",
-    "build": "webpack"
+    "build": "webpack -d",
+    "watch": "webpack --watch &",
+    "production": "webpack -p --config webpack.production.config.js"
   },
   "myWebServer": {
     "port": 8080,
@@ -35,20 +37,23 @@
     "body-parser": "^1.15.0",
     "cookie-parser": "^1.4.1",
     "express": "^4.13.4",
+    "history": "^2.1.1",
     "react": "^15.0.2",
     "react-dom": "^15.0.2",
     "react-router": "^2.4.0",
     "sqlite3": "^3.1.3"
   },
   "devDependencies": {
-    "babel-core": "^6.8.0",
+    "babel-core": "^6.9.0",
     "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
     "chai": "^3.5.0",
-    "eslint": "^2.7.0",
-    "eslint-config-standard": "^5.1.0",
+    "eslint": "^2.10.2",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-config-standard": "^5.3.1",
     "eslint-plugin-promise": "^1.1.0",
-    "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-react": "^5.1.1",
     "istanbul": "^1.0.0-alpha.2",
     "mocha": "^2.4.5",
     "webpack": "^1.13.0"

public/index.html

@@ -7,6 +7,6 @@
   <body>
     <div id="contents"></div>
     <script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Promise" defer async></script>
-    <script src="lib/bundle.js"></script>
+    <script src="/lib/bundle.js"></script>
   </body>
 </html>

webpack.production.config.js

@@ -0,0 +1,11 @@
+const webpack = require('webpack');
+
+module.exports = Object.assign(require('./webpack.config.js'), {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
+      }
+    })
+  ]
+});