From d3b56856bd7e8c222b2f6abe92cae4d74e45b665 Mon Sep 17 00:00:00 2001
From: Adam Modras <25adam@gmail.com>
Date: Wed, 17 Oct 2018 20:38:44 -0700
Subject: [PATCH 1/2] Update package.json to CRA2 and cleanup React Component
 imports

---
 .../exercise/package.json                     |  2 +-
 .../lecture/package.json                      |  2 +-
 .../lecture/src/App.final.js                  |  6 ++---
 .../lecture/src/App.start.js                  |  4 ++--
 .../lecture/src/lib/SineWave.js               |  4 ++--
 02-hocs-render-props/exercise/package.json    |  2 +-
 02-hocs-render-props/lecture/package.json     |  2 +-
 .../lecture/src/App.final.hoc.js              |  6 ++---
 .../lecture/src/App.final.render-props.js     |  8 +++----
 02-hocs-render-props/lecture/src/App.start.js |  4 ++--
 .../lecture/src/lib/LoadingDots.js            |  8 ++++---
 02-hocs-render-props/lecture/src/lib/Map.js   |  4 ++--
 03-clone-element/exercise/package.json        |  2 +-
 03-clone-element/lecture/package.json         |  2 +-
 03-clone-element/lecture/src/App.context.js   |  8 +++----
 04-context/exercise/package.json              |  4 ++--
 04-context/exercise/src/App.solution.js       | 24 +++++++++----------
 04-context/exercise/src/App.start.js          | 16 ++++++-------
 04-context/lecture/package.json               |  4 ++--
 05-portals/exercise/package.json              |  4 ++--
 05-portals/exercise/src/App.solution.js       | 10 ++++----
 05-portals/exercise/src/App.start.js          | 10 ++++----
 05-portals/lecture/package.json               |  4 ++--
 05-portals/lecture/src/App.final.js           |  6 ++---
 05-portals/lecture/src/App.start.js           |  6 ++---
 06-wai-aria/exercise/package.json             |  4 ++--
 06-wai-aria/lecture/package.json              |  4 ++--
 06-wai-aria/lecture/src/App.final.js          |  8 +++----
 06-wai-aria/lecture/src/App.start.js          |  8 +++----
 07-gsbu/exercise/package.json                 |  4 ++--
 07-gsbu/lecture/package.json                  |  4 ++--
 08-gdsfp/exercise/.gitignore                  | 18 ++++++++++----
 08-gdsfp/exercise/package.json                |  4 ++--
 08-gdsfp/exercise/src/App.solution.js         |  2 +-
 08-gdsfp/exercise/src/App.start.js            |  4 ++--
 08-gdsfp/lecture/.gitignore                   | 18 ++++++++++----
 08-gdsfp/lecture/package.json                 |  4 ++--
 09-suspense/exercise/package.json             |  4 ++--
 09-suspense/exercise/src/lib/cache.js         |  1 -
 09-suspense/lecture/package.json              |  4 ++--
 09-suspense/lecture/src/App.js                |  4 ++--
 41 files changed, 134 insertions(+), 113 deletions(-)

diff --git a/01-imperative-to-declarative/exercise/package.json b/01-imperative-to-declarative/exercise/package.json
index 7ccba49..ca5a452 100644
--- a/01-imperative-to-declarative/exercise/package.json
+++ b/01-imperative-to-declarative/exercise/package.json
@@ -7,7 +7,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/01-imperative-to-declarative/lecture/package.json b/01-imperative-to-declarative/lecture/package.json
index 186b911..b2a1d3f 100644
--- a/01-imperative-to-declarative/lecture/package.json
+++ b/01-imperative-to-declarative/lecture/package.json
@@ -7,7 +7,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/01-imperative-to-declarative/lecture/src/App.final.js b/01-imperative-to-declarative/lecture/src/App.final.js
index 047738f..fc81ac8 100644
--- a/01-imperative-to-declarative/lecture/src/App.final.js
+++ b/01-imperative-to-declarative/lecture/src/App.final.js
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { Component } from "react";
 import createOscillator from "./lib/createOscillator";
 import SineWave from "./lib/SineWave";
 
-class Tone extends React.Component {
+class Tone extends Component {
   oscillator = createOscillator();
 
   componentDidMount() {
@@ -29,7 +29,7 @@ class Tone extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   state = {
     isPlaying: false,
     pitch: 0,
diff --git a/01-imperative-to-declarative/lecture/src/App.start.js b/01-imperative-to-declarative/lecture/src/App.start.js
index 9e1bcbb..5e70b6c 100644
--- a/01-imperative-to-declarative/lecture/src/App.start.js
+++ b/01-imperative-to-declarative/lecture/src/App.start.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { Component } from "react";
 import createOscillator from "./lib/createOscillator";
 
-class App extends React.Component {
+class App extends Component {
   oscillator = createOscillator();
 
   play = () => {
diff --git a/01-imperative-to-declarative/lecture/src/lib/SineWave.js b/01-imperative-to-declarative/lecture/src/lib/SineWave.js
index 4ae5073..355a204 100644
--- a/01-imperative-to-declarative/lecture/src/lib/SineWave.js
+++ b/01-imperative-to-declarative/lecture/src/lib/SineWave.js
@@ -1,8 +1,8 @@
 // modified from http://codepen.io/enxaneta/pen/jbVLGb/, see copyright there
 
-import React from "react";
+import React, { Component } from "react";
 
-class SineWave extends React.Component {
+class SineWave extends Component {
   componentDidMount() {
     this.ctx = this.node.getContext("2d");
     const { width, height } = this.node.getBoundingClientRect();
diff --git a/02-hocs-render-props/exercise/package.json b/02-hocs-render-props/exercise/package.json
index 6de512c..27de650 100644
--- a/02-hocs-render-props/exercise/package.json
+++ b/02-hocs-render-props/exercise/package.json
@@ -8,7 +8,7 @@
     "react-transition-group": "^2.4.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/02-hocs-render-props/lecture/package.json b/02-hocs-render-props/lecture/package.json
index 8e7055e..2c0e239 100644
--- a/02-hocs-render-props/lecture/package.json
+++ b/02-hocs-render-props/lecture/package.json
@@ -8,7 +8,7 @@
     "react-google-maps": "^9.4.5"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/02-hocs-render-props/lecture/src/App.final.hoc.js b/02-hocs-render-props/lecture/src/App.final.hoc.js
index f42a90a..d0fc2ac 100644
--- a/02-hocs-render-props/lecture/src/App.final.hoc.js
+++ b/02-hocs-render-props/lecture/src/App.final.hoc.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { Component } from "react";
 import LoadingDots from "./lib/LoadingDots";
 import Map from "./lib/Map";
 
 let withGeo = Comp =>
-  class GeoPosition extends React.Component {
+  class GeoPosition extends Component {
     state = {
       coords: null,
       error: null
@@ -34,7 +34,7 @@ let withGeo = Comp =>
     }
   };
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div className="app">
diff --git a/02-hocs-render-props/lecture/src/App.final.render-props.js b/02-hocs-render-props/lecture/src/App.final.render-props.js
index cbbe372..2745560 100644
--- a/02-hocs-render-props/lecture/src/App.final.render-props.js
+++ b/02-hocs-render-props/lecture/src/App.final.render-props.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { Component } from "react";
 import LoadingDots from "./lib/LoadingDots";
 import Map from "./lib/Map";
 import getAddressFromCoords from "./lib/getAddressFromCoords";
 
-class GeoPosition extends React.Component {
+class GeoPosition extends Component {
   state = {
     coords: null,
     error: null
@@ -34,7 +34,7 @@ class GeoPosition extends React.Component {
   }
 }
 
-class Address extends React.Component {
+class Address extends Component {
   state = {
     address: null
   };
@@ -51,7 +51,7 @@ class Address extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <GeoPosition>
diff --git a/02-hocs-render-props/lecture/src/App.start.js b/02-hocs-render-props/lecture/src/App.start.js
index 5a5cb54..994fe79 100644
--- a/02-hocs-render-props/lecture/src/App.start.js
+++ b/02-hocs-render-props/lecture/src/App.start.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { Component } from "react";
 import LoadingDots from "./lib/LoadingDots";
 import Map from "./lib/Map";
 import getAddressFromCoords from "./lib/getAddressFromCoords";
 
-class App extends React.Component {
+class App extends Component {
   state = {
     coords: null,
     error: null
diff --git a/02-hocs-render-props/lecture/src/lib/LoadingDots.js b/02-hocs-render-props/lecture/src/lib/LoadingDots.js
index 86472e1..ac59e55 100644
--- a/02-hocs-render-props/lecture/src/lib/LoadingDots.js
+++ b/02-hocs-render-props/lecture/src/lib/LoadingDots.js
@@ -1,12 +1,14 @@
-import React from "react";
+import React, { Component } from "react";
 
-class LoadingDots extends React.Component {
+class LoadingDots extends Component {
   static defaultProps = {
     interval: 300,
     dots: 3
   };
 
-  state = { frame: 1 };
+  state = {
+    frame: 1
+  };
 
   componentDidMount() {
     this.interval = setInterval(() => {
diff --git a/02-hocs-render-props/lecture/src/lib/Map.js b/02-hocs-render-props/lecture/src/lib/Map.js
index 341e2e6..758f8cb 100644
--- a/02-hocs-render-props/lecture/src/lib/Map.js
+++ b/02-hocs-render-props/lecture/src/lib/Map.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Component } from "react";
 
 import {
   withGoogleMap,
@@ -29,7 +29,7 @@ const InnerMap = withGoogleMap(({ lat, lng, info }) => (
   </GoogleMap>
 ));
 
-class Map extends React.Component {
+class Map extends Component {
   componentWillMount() {
     if (!window.google) {
       loadMaps(() => {
diff --git a/03-clone-element/exercise/package.json b/03-clone-element/exercise/package.json
index 3960d66..ea4ec7c 100644
--- a/03-clone-element/exercise/package.json
+++ b/03-clone-element/exercise/package.json
@@ -8,7 +8,7 @@
     "react-icons": "2"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/03-clone-element/lecture/package.json b/03-clone-element/lecture/package.json
index 46216f6..751f6e6 100644
--- a/03-clone-element/lecture/package.json
+++ b/03-clone-element/lecture/package.json
@@ -8,7 +8,7 @@
     "react-icons": "^2.2.5"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/03-clone-element/lecture/src/App.context.js b/03-clone-element/lecture/src/App.context.js
index ce26490..e1f2f9c 100644
--- a/03-clone-element/lecture/src/App.context.js
+++ b/03-clone-element/lecture/src/App.context.js
@@ -29,7 +29,7 @@ class Tabs extends Component {
   }
 }
 
-let TabList = props => {
+let TabList = (props) => {
   return (
     <TabsContext.Consumer>
       {context => {
@@ -49,7 +49,7 @@ let TabList = props => {
   );
 };
 
-let Tab = props => {
+let Tab = (props) => {
   const isDisabled = props.isDisabled;
   const isActive = props.isActive;
   return (
@@ -68,7 +68,7 @@ let Tab = props => {
   );
 };
 
-let TabPanels = props => {
+let TabPanels = (props) => {
   return (
     <TabsContext.Consumer>
       {context => (
@@ -80,7 +80,7 @@ let TabPanels = props => {
   );
 };
 
-let TabPanel = props => props.children;
+let TabPanel = (props) => props.children;
 
 class App extends Component {
   render() {
diff --git a/04-context/exercise/package.json b/04-context/exercise/package.json
index 3960d66..dd4d5a4 100644
--- a/04-context/exercise/package.json
+++ b/04-context/exercise/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "03",
+  "name": "04",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,7 @@
     "react-icons": "2"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/04-context/exercise/src/App.solution.js b/04-context/exercise/src/App.solution.js
index dba1fd8..637b392 100644
--- a/04-context/exercise/src/App.solution.js
+++ b/04-context/exercise/src/App.solution.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Component } from "react";
 import podcast from "./lib/podcast.mp4";
 import mario from "./lib/mariobros.mp3";
 import FaPause from "react-icons/lib/fa/pause";
@@ -7,7 +7,7 @@ import FaRepeat from "react-icons/lib/fa/repeat";
 import FaRotateLeft from "react-icons/lib/fa/rotate-left";
 import { object } from "prop-types";
 
-class AudioPlayer extends React.Component {
+class AudioPlayer extends Component {
   static childContextTypes = {
     audio: object
   };
@@ -41,14 +41,14 @@ class AudioPlayer extends React.Component {
     };
   }
 
-  handleTimeUpdate = e => {
+  handleTimeUpdate = (event) => {
     this.setState({
       currentTime: this.audio.currentTime,
       duration: this.audio.duration
     });
   };
 
-  handleAudioLoaded = e => {
+  handleAudioLoaded = (event) => {
     this.setState({
       duration: this.audio.duration,
       loaded: true
@@ -77,7 +77,7 @@ class AudioPlayer extends React.Component {
   }
 }
 
-class Play extends React.Component {
+class Play extends Component {
   static contextTypes = {
     audio: object
   };
@@ -96,7 +96,7 @@ class Play extends React.Component {
   }
 }
 
-class Pause extends React.Component {
+class Pause extends Component {
   static contextTypes = {
     audio: object
   };
@@ -115,7 +115,7 @@ class Pause extends React.Component {
   }
 }
 
-class PlayPause extends React.Component {
+class PlayPause extends Component {
   static contextTypes = {
     audio: object
   };
@@ -126,7 +126,7 @@ class PlayPause extends React.Component {
   }
 }
 
-class JumpForward extends React.Component {
+class JumpForward extends Component {
   static contextTypes = {
     audio: object
   };
@@ -145,7 +145,7 @@ class JumpForward extends React.Component {
   }
 }
 
-class JumpBack extends React.Component {
+class JumpBack extends Component {
   static contextTypes = {
     audio: object
   };
@@ -164,15 +164,15 @@ class JumpBack extends React.Component {
   }
 }
 
-class Progress extends React.Component {
+class Progress extends Component {
   static contextTypes = {
     audio: object
   };
 
-  handleClick = e => {
+  handleClick = (event) => {
     const { audio } = this.context;
     const rect = this.node.getBoundingClientRect();
-    const clientLeft = e.clientX;
+    const clientLeft = event.clientX;
     const relativeLeft = clientLeft - rect.left;
     audio.setTime(relativeLeft / rect.width * audio.duration);
   };
diff --git a/04-context/exercise/src/App.start.js b/04-context/exercise/src/App.start.js
index 9e0a480..39ed2fd 100644
--- a/04-context/exercise/src/App.start.js
+++ b/04-context/exercise/src/App.start.js
@@ -43,7 +43,7 @@ Other notes about the `<audio/>` tag:
 Good luck!
 */
 
-import React from "react";
+import React, { Component } from "react";
 import podcast from "./lib/podcast.mp4";
 import mario from "./lib/mariobros.mp3";
 import FaPause from "react-icons/lib/fa/pause";
@@ -51,7 +51,7 @@ import FaPlay from "react-icons/lib/fa/play";
 import FaRepeat from "react-icons/lib/fa/repeat";
 import FaRotateLeft from "react-icons/lib/fa/rotate-left";
 
-class AudioPlayer extends React.Component {
+class AudioPlayer extends Component {
   render() {
     return (
       <div className="audio-player">
@@ -68,7 +68,7 @@ class AudioPlayer extends React.Component {
   }
 }
 
-class Play extends React.Component {
+class Play extends Component {
   render() {
     return (
       <button
@@ -83,7 +83,7 @@ class Play extends React.Component {
   }
 }
 
-class Pause extends React.Component {
+class Pause extends Component {
   render() {
     return (
       <button
@@ -98,13 +98,13 @@ class Pause extends React.Component {
   }
 }
 
-class PlayPause extends React.Component {
+class PlayPause extends Component {
   render() {
     return null;
   }
 }
 
-class JumpForward extends React.Component {
+class JumpForward extends Component {
   render() {
     return (
       <button
@@ -119,7 +119,7 @@ class JumpForward extends React.Component {
   }
 }
 
-class JumpBack extends React.Component {
+class JumpBack extends Component {
   render() {
     return (
       <button
@@ -134,7 +134,7 @@ class JumpBack extends React.Component {
   }
 }
 
-class Progress extends React.Component {
+class Progress extends Component {
   render() {
     return (
       <div className="progress" onClick={null}>
diff --git a/04-context/lecture/package.json b/04-context/lecture/package.json
index 46216f6..54932c9 100644
--- a/04-context/lecture/package.json
+++ b/04-context/lecture/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "03",
+  "name": "04",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,7 @@
     "react-icons": "^2.2.5"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/05-portals/exercise/package.json b/05-portals/exercise/package.json
index e2e1fec..08df731 100644
--- a/05-portals/exercise/package.json
+++ b/05-portals/exercise/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "04",
+  "name": "05",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/05-portals/exercise/src/App.solution.js b/05-portals/exercise/src/App.solution.js
index 5363796..4ea5c9e 100644
--- a/05-portals/exercise/src/App.solution.js
+++ b/05-portals/exercise/src/App.solution.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { Component } from "react";
 import { createPortal } from "react-dom";
 import PropTypes from "prop-types";
 import Rect from "@reach/rect";
 
-class Portal extends React.Component {
+class Portal extends Component {
   state = {
     mounted: false
   };
@@ -25,7 +25,7 @@ class Portal extends React.Component {
   }
 }
 
-class Select extends React.Component {
+class Select extends Component {
   static propTypes = {
     onChange: PropTypes.func,
     value: PropTypes.any,
@@ -95,7 +95,7 @@ class Select extends React.Component {
   }
 }
 
-class Option extends React.Component {
+class Option extends Component {
   render() {
     return (
       <li className="option" onClick={this.props.onSelect}>
@@ -105,7 +105,7 @@ class Option extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div className="app">
diff --git a/05-portals/exercise/src/App.start.js b/05-portals/exercise/src/App.start.js
index 43405c5..e6f6afe 100644
--- a/05-portals/exercise/src/App.start.js
+++ b/05-portals/exercise/src/App.start.js
@@ -19,17 +19,17 @@ values.  To help out, we've imported `Rect`. Go check the docs for Rect
 
 */
 
-import React from "react";
+import React, { Component } from "react";
 import { createPortal } from "react-dom";
 import Rect from "@reach/rect";
 
-class Portal extends React.Component {
+class Portal extends Component {
   render() {
     return this.props.children;
   }
 }
 
-class Select extends React.Component {
+class Select extends Component {
   state = {
     value: this.props.defaultValue,
     isOpen: false
@@ -72,7 +72,7 @@ class Select extends React.Component {
   }
 }
 
-class Option extends React.Component {
+class Option extends Component {
   render() {
     return (
       <li className="option" onClick={this.props.onSelect}>
@@ -82,7 +82,7 @@ class Option extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div className="app">
diff --git a/05-portals/lecture/package.json b/05-portals/lecture/package.json
index a9996d0..5162191 100644
--- a/05-portals/lecture/package.json
+++ b/05-portals/lecture/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "04",
+  "name": "05",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -7,7 +7,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/05-portals/lecture/src/App.final.js b/05-portals/lecture/src/App.final.js
index b685d10..bf0f82c 100644
--- a/05-portals/lecture/src/App.final.js
+++ b/05-portals/lecture/src/App.final.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { Component } from "react";
 import { createPortal } from "react-dom";
 
 let portalNode = document.createElement("div");
 document.body.appendChild(portalNode);
 
-class Dialog extends React.Component {
+class Dialog extends Component {
   render() {
     return createPortal(
       <div
@@ -44,7 +44,7 @@ let bustthisstuff = {
   position: "absolute"
 };
 
-class App extends React.Component {
+class App extends Component {
   state = {
     showDialog: false
   };
diff --git a/05-portals/lecture/src/App.start.js b/05-portals/lecture/src/App.start.js
index e4b0b58..3c9194b 100644
--- a/05-portals/lecture/src/App.start.js
+++ b/05-portals/lecture/src/App.start.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { Component } from "react";
 
-class Dialog extends React.Component {
+class Dialog extends Component {
   render() {
     return (
       <div
@@ -39,7 +39,7 @@ let bustthisstuff = {
   position: "absolute"
 };
 
-class App extends React.Component {
+class App extends Component {
   state = {
     showDialog: false
   };
diff --git a/06-wai-aria/exercise/package.json b/06-wai-aria/exercise/package.json
index 3960d66..56607b9 100644
--- a/06-wai-aria/exercise/package.json
+++ b/06-wai-aria/exercise/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "03",
+  "name": "06",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,7 @@
     "react-icons": "2"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/06-wai-aria/lecture/package.json b/06-wai-aria/lecture/package.json
index 6559fb2..276eb9c 100644
--- a/06-wai-aria/lecture/package.json
+++ b/06-wai-aria/lecture/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "05",
+  "name": "06",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -9,7 +9,7 @@
     "react-google-maps": "^7.2.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/06-wai-aria/lecture/src/App.final.js b/06-wai-aria/lecture/src/App.final.js
index d4ad4bd..08e68c9 100644
--- a/06-wai-aria/lecture/src/App.final.js
+++ b/06-wai-aria/lecture/src/App.final.js
@@ -19,7 +19,7 @@ values.  To help out, we've imported `Rect`. Go check the docs for Rect
 
 */
 
-import React from "react";
+import React, { Component } from "react";
 import Rect from "@reach/rect";
 
 function findIndexFromValue(children, value) {
@@ -44,7 +44,7 @@ function findValueFromIndex(children, index) {
   );
 }
 
-class Select extends React.Component {
+class Select extends Component {
   state = {
     value: this.props.defaultValue,
     highlightedIndex: findIndexFromValue(
@@ -165,7 +165,7 @@ class Select extends React.Component {
   }
 }
 
-class Option extends React.Component {
+class Option extends Component {
   render() {
     let { isHighlighted } = this.props;
     return (
@@ -181,7 +181,7 @@ class Option extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div className="app">
diff --git a/06-wai-aria/lecture/src/App.start.js b/06-wai-aria/lecture/src/App.start.js
index 8f2d8cb..7ce81c9 100644
--- a/06-wai-aria/lecture/src/App.start.js
+++ b/06-wai-aria/lecture/src/App.start.js
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Rect from "@reach/rect";
 
-class Select extends React.Component {
+class Select extends Component {
   static propTypes = {
     onChange: PropTypes.func,
     value: PropTypes.any,
@@ -70,7 +70,7 @@ class Select extends React.Component {
   }
 }
 
-class Option extends React.Component {
+class Option extends Component {
   render() {
     return (
       <li className="option" onClick={this.props.onSelect}>
@@ -80,7 +80,7 @@ class Option extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   state = {
     selectValue: "dosa"
   };
diff --git a/07-gsbu/exercise/package.json b/07-gsbu/exercise/package.json
index 7ccba49..32cc0c2 100644
--- a/07-gsbu/exercise/package.json
+++ b/07-gsbu/exercise/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "01",
+  "name": "07",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -7,7 +7,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/07-gsbu/lecture/package.json b/07-gsbu/lecture/package.json
index a30892d..96b0ea7 100644
--- a/07-gsbu/lecture/package.json
+++ b/07-gsbu/lecture/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "01",
+  "name": "07",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/08-gdsfp/exercise/.gitignore b/08-gdsfp/exercise/.gitignore
index 8e8b40a..d30f40e 100755
--- a/08-gdsfp/exercise/.gitignore
+++ b/08-gdsfp/exercise/.gitignore
@@ -1,11 +1,21 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
-node_modules
+/node_modules
+
+# testing
+/coverage
 
 # production
-build
+/build
 
 # misc
 .DS_Store
-npm-debug.log
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/08-gdsfp/exercise/package.json b/08-gdsfp/exercise/package.json
index 7ccba49..19db182 100644
--- a/08-gdsfp/exercise/package.json
+++ b/08-gdsfp/exercise/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "01",
+  "name": "08",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -7,7 +7,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/08-gdsfp/exercise/src/App.solution.js b/08-gdsfp/exercise/src/App.solution.js
index ae25578..5bedba6 100644
--- a/08-gdsfp/exercise/src/App.solution.js
+++ b/08-gdsfp/exercise/src/App.solution.js
@@ -27,7 +27,7 @@ class App extends Component {
   }
 }
 
-class PriceDisplay extends React.Component {
+class PriceDisplay extends Component {
   state = {
     price: this.props.price,
     direction: "initial"
diff --git a/08-gdsfp/exercise/src/App.start.js b/08-gdsfp/exercise/src/App.start.js
index c9f0b16..107db7f 100644
--- a/08-gdsfp/exercise/src/App.start.js
+++ b/08-gdsfp/exercise/src/App.start.js
@@ -27,7 +27,7 @@ class App extends Component {
   }
 }
 
-class PriceDisplay extends React.Component {
+class PriceDisplay extends Component {
   render() {
     let direction = "up"; // get this from state instead
     return (
@@ -89,7 +89,7 @@ export default App;
 //   }
 // }
 
-// class PriceDisplay extends React.Component {
+// class PriceDisplay extends Component {
 //   state = {};
 
 //   static getDerivedStateFromProps(props, state, more) {
diff --git a/08-gdsfp/lecture/.gitignore b/08-gdsfp/lecture/.gitignore
index 8e8b40a..a75d301 100755
--- a/08-gdsfp/lecture/.gitignore
+++ b/08-gdsfp/lecture/.gitignore
@@ -1,11 +1,21 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
-node_modules
+/node_modules
+
+# testing
+/coverage
 
 # production
-build
+/build
 
 # misc
 .DS_Store
-npm-debug.log
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
\ No newline at end of file
diff --git a/08-gdsfp/lecture/package.json b/08-gdsfp/lecture/package.json
index c34d7bc..f9c7b93 100644
--- a/08-gdsfp/lecture/package.json
+++ b/08-gdsfp/lecture/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "01",
+  "name": "08",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,7 +8,7 @@
     "react-dom": "^16.5.0"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/09-suspense/exercise/package.json b/09-suspense/exercise/package.json
index a313cb6..b8c1f69 100644
--- a/09-suspense/exercise/package.json
+++ b/09-suspense/exercise/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "01",
+  "name": "09",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -9,7 +9,7 @@
     "simple-cache-provider": "../vendor/simple-cache-provider"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/09-suspense/exercise/src/lib/cache.js b/09-suspense/exercise/src/lib/cache.js
index a66fe24..9c93d6f 100644
--- a/09-suspense/exercise/src/lib/cache.js
+++ b/09-suspense/exercise/src/lib/cache.js
@@ -7,4 +7,3 @@ function initCache() {
 }
 
 initCache();
-
diff --git a/09-suspense/lecture/package.json b/09-suspense/lecture/package.json
index 6382878..96f3273 100644
--- a/09-suspense/lecture/package.json
+++ b/09-suspense/lecture/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "01",
+  "name": "09",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -12,7 +12,7 @@
     "simple-cache-provider": "../vendor/simple-cache-provider"
   },
   "devDependencies": {
-    "react-scripts": "1.0.10"
+    "react-scripts": "2.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/09-suspense/lecture/src/App.js b/09-suspense/lecture/src/App.js
index 30c7b06..3ba9582 100644
--- a/09-suspense/lecture/src/App.js
+++ b/09-suspense/lecture/src/App.js
@@ -1,6 +1,6 @@
 import { createElement } from "glamor/react"; // eslint-disable-line
 /* @jsx createElement */
-import React, { Placeholder, lazy } from "react";
+import React, { Component, Placeholder, lazy } from "react";
 import { Router, Link } from "@reach/router";
 import Component from "@reach/component-component";
 import Spinner from "react-svg-spinner";
@@ -104,7 +104,7 @@ const Exercises = ({ workoutId }) => {
   return <ul>{exercises.map((exercise, i) => <li key={i}>{exercise}</li>)}</ul>;
 };
 
-class Workout extends React.Component {
+class Workout extends Component {
   render() {
     const { workoutId } = this.props;
 

From b5e934742cbff7c7434f4306f94804ad7c3a2136 Mon Sep 17 00:00:00 2001
From: Adam Modras <25adam@gmail.com>
Date: Wed, 17 Oct 2018 20:59:01 -0700
Subject: [PATCH 2/2] Fix the React.Component import statement

---
 04-context/exercise/src/App.solution.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/04-context/exercise/src/App.solution.js b/04-context/exercise/src/App.solution.js
index 3430836..7073785 100644
--- a/04-context/exercise/src/App.solution.js
+++ b/04-context/exercise/src/App.solution.js
@@ -43,7 +43,7 @@ Other notes about the `<audio/>` tag:
 Good luck!
 */
 
-import React from "react";
+import React, { Component } from "react";
 import podcast from "./lib/podcast.mp4";
 import mario from "./lib/mariobros.mp3";
 import FaPause from "react-icons/lib/fa/pause";
@@ -53,7 +53,7 @@ import FaRotateLeft from "react-icons/lib/fa/rotate-left";
 
 let AudioContext = React.createContext();
 
-class AudioPlayer extends React.Component {
+class AudioPlayer extends Component {
   state = {
     isPlaying: false,
     duration: null,
@@ -107,7 +107,7 @@ class AudioPlayer extends React.Component {
   }
 }
 
-class Play extends React.Component {
+class Play extends Component {
   render() {
     return (
       <AudioContext.Consumer>
@@ -126,7 +126,7 @@ class Play extends React.Component {
   }
 }
 
-class Pause extends React.Component {
+class Pause extends Component {
   render() {
     return (
       <AudioContext.Consumer>
@@ -145,7 +145,7 @@ class Pause extends React.Component {
   }
 }
 
-class PlayPause extends React.Component {
+class PlayPause extends Component {
   render() {
     return (
       <AudioContext.Consumer>
@@ -155,7 +155,7 @@ class PlayPause extends React.Component {
   }
 }
 
-class JumpForward extends React.Component {
+class JumpForward extends Component {
   render() {
     return (
       <AudioContext.Consumer>
@@ -174,7 +174,7 @@ class JumpForward extends React.Component {
   }
 }
 
-class JumpBack extends React.Component {
+class JumpBack extends Component {
   render() {
     return (
       <AudioContext.Consumer>
@@ -193,7 +193,7 @@ class JumpBack extends React.Component {
   }
 }
 
-class Progress extends React.Component {
+class Progress extends Component {
   render() {
     return (
       <AudioContext.Consumer>