Add React dev tools

package.json

@@ -20,6 +20,7 @@
     "copy-webpack-plugin": "^4.5.2",
     "electron": "^3.0.2",
     "electron-builder": "^20.28.1",
+    "electron-devtools-installer": "^2.2.4",
     "electron-webpack": "^2.1.2",
     "eslint": "^5.0.1",
     "eslint-config-scratch": "^5.0.0",

src/main/index.js

@@ -2,6 +2,8 @@ import {app, BrowserWindow} from 'electron';
 import * as path from 'path';
 import {format as formatUrl} from 'url';
 
+import installExtension, {REACT_DEVELOPER_TOOLS} from 'electron-devtools-installer';
+
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
 // global reference to mainWindow (necessary to prevent window from being garbage collected)
@@ -16,6 +18,10 @@ const createMainWindow = () => {
 
     if (isDevelopment) {
         window.webContents.openDevTools();
+        installExtension(REACT_DEVELOPER_TOOLS);
+        // TODO: add logging package and bring back the lines below
+        // .then(name => console.log(`Added Extension:  ${name}`))
+        // .catch(err => console.log('An error occurred: ', err));
     }
 
     if (isDevelopment) {

src/renderer/.eslintrc.js

@@ -4,5 +4,10 @@ module.exports = {
         browser: true,
         node: true
     },
-    extends: ['scratch', 'scratch/es6', 'scratch/react']
+    extends: ['scratch', 'scratch/es6', 'scratch/react'],
+    settings: {
+        react: {
+            version: '16.2' // Prevent 16.3 lifecycle method errors
+        }
+    }
 };