Add react

package.json

@@ -17,6 +17,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
     "chai": "^4.2.0",
     "css-loader": "^2.1.0",
     "file-loader": "^3.0.1",
@@ -36,10 +39,14 @@
     "workbox-webpack-plugin": "^3.6.3"
   },
   "dependencies": {
+    "babel-loader": "^8.0.5",
     "body-parser": "^1.18.3",
     "chalk": "^2.4.2",
     "express": "^4.16.4",
+    "memory-graph": "^1.0.2",
     "morgan": "^1.9.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "ws": "^6.1.2"
   }
 }

src/index.js

@@ -1,3 +1,6 @@
+const React = require('react')
+const ReactDOM = require('react-dom')
+
 const client = require('./client')
 const serviceWorkerFile = require('file-loader!./service-worker.js')
 
@@ -22,4 +25,9 @@ document.addEventListener('DOMContentLoaded', () => {
   client.addEventListener('message', evt => {
     console.log(evt.data)
   })
+
+  ReactDOM.render(
+    <h1>Hello World!</h1>,
+    document.body
+  )
 })

webpack.config.js

@@ -9,6 +9,20 @@ module.exports = {
   devServer: {
     contentBase: Path.join(__dirname, 'dist')
   },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      }
+    ]
+  },
   plugins: [
     new HtmlWebpackPlugin({
       meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no'}