2016: React v15, ES6, Node.js v6

package.json

@@ -10,20 +10,22 @@
   },
   "homepage": "https://github.com/i-like-robots/react-through-time",
   "engines": {
-    "node": "0.10.x"
+    "node": "^6.7.0"
   },
   "scripts": {
     "start": "node src/server/start.js",
-    "build": "browserify -e src/browser/bootstrap.js -t reactify -g uglifyify -o public/bundle.js --debug"
+    "build": "webpack --config webpack.config.js"
   },
   "dependencies": {
-    "express": "~4.5.0",
-    "react": "~0.12.2",
-    "node-jsx": "~0.12.2"
+    "babel-preset-env": "~1.1.0",
+    "babel-preset-react": "~6.16.0",
+    "babel-register": "~6.16.0",
+    "express": "~4.14.0",
+    "react": "~15.4.0",
+    "react-dom": "~15.4.0"
   },
   "devDependencies": {
-    "browserify": "^10.0.0",
-    "reactify": "^1.1.0",
-    "uglifyify": "^3.0.4"
+    "babel-loader": "^6.2.6",
+    "webpack": "^2.1.0"
   }
 }

src/browser/bootstrap.js

@@ -1,9 +1,10 @@
-var React = require("react");
-var TubeTracker = require("../components/TubeTracker.jsx");
+import React from "react";
+import ReactDOM from "react-dom";
+import TubeTracker from "../components/TubeTracker.jsx";
 
-var data = JSON.parse(document.getElementById("initialData").innerHTML);
+const data = JSON.parse(document.getElementById("initialData").innerHTML);
 
-React.render(
+ReactDOM.render(
   React.createElement(TubeTracker, data),
   document.getElementById("app")
 );

src/components/Departures.jsx

@@ -1,33 +1,28 @@
-var React = require("react");
-var Trains = require("./Trains.jsx");
+import React from "react";
+import Trains from "./Trains.jsx";
 
-var Departures = React.createClass({
-  render: function () {
-    var station = this.props.predictionData.station;
-    var platforms = this.props.predictionData.platforms;
+function Departures(props) {
+  const { station, platforms } = props.predictionData;
 
-    var trains = Object.keys(platforms).map(function (platform) {
-      return (
-        <div className="Platform" key={platform}>
-          <h2 className="Platform-heading">{platform}</h2>
-          <Trains trains={platforms[platform]} />
-        </div>
-      );
-    });
+  const trains = Object.keys(platforms).map((platform) => (
+    <div className="Platform" key={platform}>
+      <h2 className="Platform-heading">{platform}</h2>
+      <Trains trains={platforms[platform]} />
+    </div>
+  ));
 
-    return (
-      <div className="Departures">
-        <h1 className="Departures-heading">
-          {station.stationName + " Station, " + station.lineName + " Line"}
-        </h1>
-        {trains.length ? (
-          trains
-        ) : (
-          <p className="Departures-noData">No train arrivals due.</p>
-        )}
-      </div>
-    );
-  },
-});
+  return (
+    <div className="Departures">
+      <h1 className="Departures-heading">
+        {`${station.stationName} Station, ${station.lineName} Line`}
+      </h1>
+      {trains.length ? (
+        trains
+      ) : (
+        <p className="Departures-noData">No train arrivals due.</p>
+      )}
+    </div>
+  );
+}
 
-module.exports = Departures;
+export default Departures;

src/components/Footer.jsx

@@ -1,21 +1,19 @@
-var React = require("react");
+import React from "react";
 
-var Footer = React.createClass({
-  render: function () {
-    return (
-      <footer className="Footer">
-        <p>
-          <small>
-            © Matt Hinchliffe {new Date().getUTCFullYear()}, view the
-            <a href="https://github.com/i-like-robots/react-through-time">
-              source code on GitHub
-            </a>
-            .
-          </small>
-        </p>
-      </footer>
-    );
-  },
-});
+function Footer() {
+  return (
+    <footer className="Footer">
+      <p>
+        <small>
+          © Matt Hinchliffe {new Date().getUTCFullYear()}, view the
+          <a href="https://github.com/i-like-robots/react-through-time">
+            source code on GitHub
+          </a>
+          .
+        </small>
+      </p>
+    </footer>
+  );
+}
 
-module.exports = Footer;
+export default Footer;

src/components/Network.jsx

@@ -1,17 +1,14 @@
-var React = require("react");
-var NetworkLine = require("./NetworkLine.jsx");
+import React from "react";
+import NetworkLine from "./NetworkLine.jsx";
 
-var Network = React.createClass({
-  render: function () {
-    var networkData = this.props.networkData;
-    var lineCodes = Object.keys(networkData.lines);
+function Network(props) {
+  const lineCodes = Object.keys(props.networkData.lines);
 
-    var lines = lineCodes.map(function (line) {
-      return <NetworkLine networkData={networkData} line={line} key={line} />;
-    });
+  const lines = lineCodes.map((line) => (
+    <NetworkLine networkData={props.networkData} line={line} key={line} />
+  ));
 
-    return <div className="Network">{lines}</div>;
-  },
-});
+  return <div className="Network">{lines}</div>;
+}
 
-module.exports = Network;
+export default Network;

src/components/NetworkLine.jsx

@@ -1,40 +1,46 @@
-var React = require("react");
+import React from "react";
 
-var NetworkLine = React.createClass({
-  handleSubmit: function (e) {
+class NetworkLine extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(e) {
     e.preventDefault();
 
     // Dispatch an event for other components to capture
-    var updateEvent = new CustomEvent("station-select", {
+    const updateEvent = new CustomEvent("station-select", {
       detail: {
-        station: this.refs.station.getDOMNode().value,
+        station: this.station.value,
         line: this.props.line,
       },
       bubbles: true,
     });
 
-    this.refs.form.getDOMNode().dispatchEvent(updateEvent);
-  },
+    this.form.dispatchEvent(updateEvent);
+  }
 
-  render: function () {
-    var line = this.props.line;
-    var networkData = this.props.networkData;
-    var stationsOnLine = networkData.stationsOnLines[line];
+  render() {
+    const { line, networkData } = this.props;
+    const stationsOnLine = networkData.stationsOnLines[line];
 
-    var options = stationsOnLine.map(function (stationCode) {
-      return (
-        <option value={stationCode} key={stationCode}>
-          {networkData.stations[stationCode]}
-        </option>
-      );
-    });
+    const options = stationsOnLine.map((stationCode) => (
+      <option value={stationCode} key={stationCode}>
+        {networkData.stations[stationCode]}
+      </option>
+    ));
 
     return (
-      <form ref="form" method="GET" onSubmit={this.handleSubmit}>
-        <fieldset className={"Network-line Network-line--" + line}>
+      <form
+        ref={(c) => (this.form = c)}
+        method="GET"
+        onSubmit={this.handleSubmit}
+      >
+        <fieldset className={`Network-line Network-line--${line}`}>
           <legend>{networkData.lines[line]}</legend>
           <input type="hidden" name="line" value={line} />
-          <select name="station" ref="station">
+          <select name="station" ref={(c) => (this.station = c)}>
             {options}
           </select>
           <button type="submit" title="View train times">
@@ -43,7 +49,7 @@ var NetworkLine = React.createClass({
         </fieldset>
       </form>
     );
-  },
-});
+  }
+}
 
-module.exports = NetworkLine;
+export default NetworkLine;

src/components/Notice.jsx

@@ -1,19 +1,17 @@
-var React = require("react");
+import React from "react";
 
-var typeToText = {
+const typeToText = {
   error: "Sorry an error occurred, please try again.",
   loading: "Loading predictions…",
   welcome: "Please choose a station.",
 };
 
-var Notice = React.createClass({
-  render: function () {
-    return (
-      <div className={"Notice Notice--" + this.props.type}>
-        <p>{typeToText[this.props.type]}</p>
-      </div>
-    );
-  },
-});
+function Notice(props) {
+  return (
+    <div className={`Notice Notice--${props.type}`}>
+      <p>{typeToText[props.type]}</p>
+    </div>
+  );
+}
 
-module.exports = Notice;
+export default Notice;