From 270bfbd2c3e017ec20f659ff5f9a6a47a3653977 Mon Sep 17 00:00:00 2001
From: Eve Porcello <eve@moonhighway.com>
Date: Fri, 29 Sep 2017 11:56:10 -0700
Subject: [PATCH 01/10] Localizes Samples & Updates JSBin Links (#16)

* Updates readme with React 16 CDN details
* Updates all samples to React 16
* Removes createClass from samples
* Localizes JSBin samples
* Adds Sample Demo Links
* Adds Sample Source Links
---
 chapter-01/readme.md                          |  28 ++-
 .../01-declaring-variables/01-const.html      |  22 ++
 .../01-declaring-variables/02-const.html      |  21 ++
 chapter-02/01-declaring-variables/03-let.html |  27 +++
 chapter-02/01-declaring-variables/04-let.html |  27 +++
 chapter-02/01-declaring-variables/05-let.html |  41 ++++
 chapter-02/01-declaring-variables/06-let.html |  42 ++++
 .../07-template-strings.html                  |  24 ++
 .../08-template-strings.html                  |  24 ++
 .../09-template-strings.html                  |  46 ++++
 .../10-template-strings.html                  |  41 ++++
 .../01-default-parameters.html                |  22 ++
 .../02-default-parameters.html                |  30 +++
 chapter-02/03-arrow-functions/01-arrows.html  |  25 ++
 chapter-02/03-arrow-functions/02-arrows.html  |  23 ++
 chapter-02/03-arrow-functions/03-arrows.html  |  25 ++
 chapter-02/03-arrow-functions/04-arrows.html  |  23 ++
 chapter-02/03-arrow-functions/05-arrows.html  |  34 +++
 chapter-02/03-arrow-functions/06-arrows.html  |  33 +++
 chapter-02/03-arrow-functions/07-arrows.html  |  31 +++
 chapter-02/03-arrow-functions/08-arrows.html  |  31 +++
 chapter-02/03-arrow-functions/09-arrows.html  |  32 +++
 chapter-02/03-arrow-functions/10-arrows.html  |  31 +++
 chapter-02/03-arrow-functions/11-arrows.html  |  31 +++
 .../01-destructuring.html                     |  35 +++
 .../02-destructuring.html                     |  29 +++
 .../03-destructuring.html                     |  28 +++
 .../04-destructuring.html                     |  22 ++
 .../05-destructuring.html                     |  22 ++
 .../06-object-literal-enhancement.html        |  25 ++
 .../07-object-literal-enhancement.html        |  28 +++
 .../08-object-literal-enhancement.html        |  38 +++
 .../09-object-literal-enhancement.html        |  38 +++
 .../10-spread-operator.html                   |  24 ++
 .../11-spread-operator.html                   |  24 ++
 .../12-spread-operator.html                   |  24 ++
 .../13-spread-operator.html                   |  24 ++
 .../14-spread-operator.html                   |  31 +++
 .../15-spread-operator.html                   |  32 +++
 chapter-02/05-promises/01-promises.html       |  34 +++
 chapter-02/05-promises/02-promises.html       |  21 ++
 .../06-es6-class-syntax/01-classes.html       |  31 +++
 .../06-es6-class-syntax/02-classes.html       |  35 +++
 .../06-es6-class-syntax/03-classes.html       |  50 ++++
 chapter-02/babel-inline-transpiler.html       |   2 +-
 chapter-02/readme.md                          | 140 ++++++-----
 .../01-functional.html                        |  22 ++
 .../02-functional.html                        |  20 ++
 .../03-functional.html                        |  25 ++
 .../04-functional.html                        |  26 ++
 .../05-functional.html                        |  22 ++
 .../06-functional.html                        |  28 +++
 .../07-functional.html                        |  23 ++
 .../01-imperative-declarative.html            |  31 +++
 .../02-imperative-declarative.html            |  21 ++
 .../populate-united-states.html               |   0
 .../populate-united-states.js                 |   0
 .../04-immutability/01-immutability.html      |  34 +++
 .../04-immutability/02-immutability.html      |  34 +++
 .../04-immutability/03-immutability.html      |  35 +++
 .../04-immutability/04-immutability.html      |  34 +++
 .../04-immutability/05-immutability.html      |  31 +++
 .../04-immutability/06-immutability.html      |  31 +++
 .../05-pure-functions/01-pure-functions.html  |  36 +++
 .../05-pure-functions/02-pure-functions.html  |  35 +++
 .../05-pure-functions/03-pure-functions.html  |  37 +++
 .../05-pure-functions/04-pure-functions.html  |  23 ++
 .../05-pure-functions/05-pure-functions.html  |  25 ++
 chapter-03/06-transforming-data/01-data.html  |  25 ++
 chapter-03/06-transforming-data/02-data.html  |  26 ++
 chapter-03/06-transforming-data/03-data.html  |  28 +++
 chapter-03/06-transforming-data/04-data.html  |  27 +++
 chapter-03/06-transforming-data/05-data.html  |  26 ++
 chapter-03/06-transforming-data/06-data.html  |  40 ++++
 chapter-03/06-transforming-data/07-data.html  |  36 +++
 chapter-03/06-transforming-data/08-data.html  |  31 +++
 chapter-03/06-transforming-data/09-data.html  |  29 +++
 chapter-03/06-transforming-data/10-data.html  |  27 +++
 chapter-03/06-transforming-data/11-data.html  |  49 ++++
 chapter-03/06-transforming-data/12-data.html  |  28 +++
 .../01-higher-order-fns.html                  |  28 +++
 .../02-higher-order-fns.html                  |  40 ++++
 chapter-03/08-recursion/01-recursion.html     |  23 ++
 chapter-03/08-recursion/02-recursion.html     |  26 ++
 chapter-03/08-recursion/03-recursion.html     |  40 ++++
 chapter-03/09-composition/01-composition.html |  24 ++
 chapter-03/09-composition/02-composition.html |  53 ++++
 chapter-03/09-composition/03-composition.html |  58 +++++
 .../04-imperative-clock.html}                 |   4 +-
 .../04-imperative-clock.js}                   |   0
 .../05-declarative-clock.html}                |   6 +-
 .../05-declarative-clock.js}                  |   0
 chapter-03/readme.md                          | 137 ++++++-----
 .../01-page-setup.html}                       |   6 +-
 .../02-baked-salmon.html}                     |   0
 chapter-04/02-react-elements/01-elements.html |  30 +++
 chapter-04/02-react-elements/02-elements.html |  34 +++
 chapter-04/02-react-elements/03-elements.html |  46 ++++
 chapter-04/02-react-elements/04-elements.html |  45 ++++
 chapter-04/02-react-elements/05-elements.html |  45 ++++
 .../03-react-components/01-components.html    |  41 ++++
 .../03-react-components/02-components.html    |  45 ++++
 .../03-react-components/03-components.html    |  49 ++++
 .../03-react-components/04-components.html    |  42 ++++
 .../DOM-rendering-moods.css                   |   0
 .../DOM-rendering-moods.html                  |   0
 .../DOM-rendering-moods.js                    |   0
 chapter-04/05-factories/01-factories.html     |  26 ++
 chapter-04/05-factories/02-factories.html     |  33 +++
 chapter-04/05-factories/03-factories.html     |  43 ++++
 chapter-04/05-factories/04-factories.html     |  46 ++++
 chapter-04/readme.md                          |  47 ++--
 chapter-05/page-setup.html                    |   8 +-
 chapter-05/readme.md                          |   2 +-
 chapter-05/recipes.html                       |   6 +-
 .../01-incorrect-props-no-error.html          |  47 ++++
 .../02-introducing-prop-types-npm.html        |  53 ++++
 .../03-prop-types-success.html                |  67 ++++++
 ...04-cryptic-problems-when-prop-missing.html |  51 ++++
 .../05-better-errors-with-is-required.html    |  51 ++++
 .../06-successful-validation.html             |  53 ++++
 .../07-default-properties.html                |  57 +++++
 .../08-custom-validation.html                 |  62 +++++
 .../09-stateless-prop-validation.html         |  54 +++++
 .../10-stateless-default-props.html           |  48 ++++
 .../01-color-component-before-refs.html       |  40 ++++
 .../02-refs/02-color-component-with-refs.html |  58 +++++
 .../02-refs/03-Color-Component-binding.html   |  57 +++++
 chapter-06/02-refs/04-two-way-data-todo.html  |  59 +++++
 .../02-refs/05-without-default-function.html  |  58 +++++
 chapter-06/02-refs/06-check-for-property.html |  65 +++++
 chapter-06/02-refs/07-default-property.html   |  71 ++++++
 .../02-refs/08-stateless-default-prop.html    |  62 +++++
 .../02-refs/09-stateless-default-arg.html     |  57 +++++
 .../01-the-star-component.html                |  38 +++
 .../02-the-star-rating-component.html         |  78 ++++++
 .../03-setting-state-from-props.html          |  78 ++++++
 chapter-06/03-component-state/styles.css      |  41 ++++
 chapter-06/readme.md                          |  89 ++++---
 .../01-mounting-lifecycle/01-mounting.html    |  34 +++
 .../01-mounting-lifecycle/02-mounting.html    |  90 +++++++
 .../02-updating-lifecycle/01-updating.html    |  99 ++++++++
 .../02-updating-lifecycle/02-updating.html    | 103 ++++++++
 chapter-07/03-children/01-children.html       |  34 +++
 chapter-07/03-children/02-children.html       |  49 ++++
 chapter-07/03-children/03-children.html       |  49 ++++
 .../04-library-integration/01-libraries.html  |  35 +++
 .../04-library-integration/02-libraries.html  |  57 +++++
 .../04-library-integration/03-libraries.html  | 226 ++++++++++++++++++
 .../04-library-integration/04-libraries.html  | 105 ++++++++
 .../05-higher-order-components/01-hocs.html   |  60 +++++
 .../05-higher-order-components/02-hocs.html   |  74 ++++++
 .../05-higher-order-components/03-hocs.html   |  72 ++++++
 .../05-higher-order-components/04-hocs.html   |  59 +++++
 .../05-higher-order-components/05-hocs.html   |  78 ++++++
 .../01-state.html                             | 156 ++++++++++++
 chapter-07/readme.md                          |  60 ++---
 chapter-08/01-reducers/01-reducers.html       |  61 +++++
 chapter-08/01-reducers/02-reducers.html       | 101 ++++++++
 chapter-08/01-reducers/03-reducers.html       |  52 ++++
 chapter-08/02-the-store/01-store.html         |  44 ++++
 chapter-08/02-the-store/02-store.html         |  76 ++++++
 chapter-08/02-the-store/03-store.html         | 104 ++++++++
 chapter-08/02-the-store/04-store.html         | 142 +++++++++++
 chapter-08/02-the-store/05-store.html         | 106 ++++++++
 chapter-08/02-the-store/06-store.html         | 108 +++++++++
 chapter-08/02-the-store/07-store.html         |  94 ++++++++
 .../01-action-creators.html                   | 121 ++++++++++
 .../02-action-creators.html                   | 132 ++++++++++
 chapter-08/04-middleware/01-middleware.html   | 140 +++++++++++
 chapter-08/04-middleware/02-middleware.html   | 153 ++++++++++++
 chapter-08/readme.md                          |  42 ++--
 172 files changed, 7487 insertions(+), 252 deletions(-)
 create mode 100644 chapter-02/01-declaring-variables/01-const.html
 create mode 100644 chapter-02/01-declaring-variables/02-const.html
 create mode 100644 chapter-02/01-declaring-variables/03-let.html
 create mode 100644 chapter-02/01-declaring-variables/04-let.html
 create mode 100644 chapter-02/01-declaring-variables/05-let.html
 create mode 100644 chapter-02/01-declaring-variables/06-let.html
 create mode 100644 chapter-02/01-declaring-variables/07-template-strings.html
 create mode 100644 chapter-02/01-declaring-variables/08-template-strings.html
 create mode 100644 chapter-02/01-declaring-variables/09-template-strings.html
 create mode 100644 chapter-02/01-declaring-variables/10-template-strings.html
 create mode 100644 chapter-02/02-es6-functions/01-default-parameters.html
 create mode 100644 chapter-02/02-es6-functions/02-default-parameters.html
 create mode 100644 chapter-02/03-arrow-functions/01-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/02-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/03-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/04-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/05-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/06-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/07-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/08-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/09-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/10-arrows.html
 create mode 100644 chapter-02/03-arrow-functions/11-arrows.html
 create mode 100644 chapter-02/04-objects-and-arrays/01-destructuring.html
 create mode 100644 chapter-02/04-objects-and-arrays/02-destructuring.html
 create mode 100644 chapter-02/04-objects-and-arrays/03-destructuring.html
 create mode 100644 chapter-02/04-objects-and-arrays/04-destructuring.html
 create mode 100644 chapter-02/04-objects-and-arrays/05-destructuring.html
 create mode 100644 chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html
 create mode 100644 chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html
 create mode 100644 chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html
 create mode 100644 chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html
 create mode 100644 chapter-02/04-objects-and-arrays/10-spread-operator.html
 create mode 100644 chapter-02/04-objects-and-arrays/11-spread-operator.html
 create mode 100644 chapter-02/04-objects-and-arrays/12-spread-operator.html
 create mode 100644 chapter-02/04-objects-and-arrays/13-spread-operator.html
 create mode 100644 chapter-02/04-objects-and-arrays/14-spread-operator.html
 create mode 100644 chapter-02/04-objects-and-arrays/15-spread-operator.html
 create mode 100644 chapter-02/05-promises/01-promises.html
 create mode 100644 chapter-02/05-promises/02-promises.html
 create mode 100644 chapter-02/06-es6-class-syntax/01-classes.html
 create mode 100644 chapter-02/06-es6-class-syntax/02-classes.html
 create mode 100644 chapter-02/06-es6-class-syntax/03-classes.html
 create mode 100644 chapter-03/01-functional-javascript/01-functional.html
 create mode 100644 chapter-03/01-functional-javascript/02-functional.html
 create mode 100644 chapter-03/01-functional-javascript/03-functional.html
 create mode 100644 chapter-03/01-functional-javascript/04-functional.html
 create mode 100644 chapter-03/01-functional-javascript/05-functional.html
 create mode 100644 chapter-03/01-functional-javascript/06-functional.html
 create mode 100644 chapter-03/01-functional-javascript/07-functional.html
 create mode 100644 chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html
 create mode 100644 chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html
 rename chapter-03/{ => 03-populate-the-us}/populate-united-states.html (100%)
 rename chapter-03/{ => 03-populate-the-us}/populate-united-states.js (100%)
 create mode 100644 chapter-03/04-immutability/01-immutability.html
 create mode 100644 chapter-03/04-immutability/02-immutability.html
 create mode 100644 chapter-03/04-immutability/03-immutability.html
 create mode 100644 chapter-03/04-immutability/04-immutability.html
 create mode 100644 chapter-03/04-immutability/05-immutability.html
 create mode 100644 chapter-03/04-immutability/06-immutability.html
 create mode 100644 chapter-03/05-pure-functions/01-pure-functions.html
 create mode 100644 chapter-03/05-pure-functions/02-pure-functions.html
 create mode 100644 chapter-03/05-pure-functions/03-pure-functions.html
 create mode 100644 chapter-03/05-pure-functions/04-pure-functions.html
 create mode 100644 chapter-03/05-pure-functions/05-pure-functions.html
 create mode 100644 chapter-03/06-transforming-data/01-data.html
 create mode 100644 chapter-03/06-transforming-data/02-data.html
 create mode 100644 chapter-03/06-transforming-data/03-data.html
 create mode 100644 chapter-03/06-transforming-data/04-data.html
 create mode 100644 chapter-03/06-transforming-data/05-data.html
 create mode 100644 chapter-03/06-transforming-data/06-data.html
 create mode 100644 chapter-03/06-transforming-data/07-data.html
 create mode 100644 chapter-03/06-transforming-data/08-data.html
 create mode 100644 chapter-03/06-transforming-data/09-data.html
 create mode 100644 chapter-03/06-transforming-data/10-data.html
 create mode 100644 chapter-03/06-transforming-data/11-data.html
 create mode 100644 chapter-03/06-transforming-data/12-data.html
 create mode 100644 chapter-03/07-higher-order-functions/01-higher-order-fns.html
 create mode 100644 chapter-03/07-higher-order-functions/02-higher-order-fns.html
 create mode 100644 chapter-03/08-recursion/01-recursion.html
 create mode 100644 chapter-03/08-recursion/02-recursion.html
 create mode 100644 chapter-03/08-recursion/03-recursion.html
 create mode 100644 chapter-03/09-composition/01-composition.html
 create mode 100644 chapter-03/09-composition/02-composition.html
 create mode 100644 chapter-03/09-composition/03-composition.html
 rename chapter-03/{imperative-clock.html => 09-composition/04-imperative-clock.html} (83%)
 rename chapter-03/{imperative-clock.js => 09-composition/04-imperative-clock.js} (100%)
 rename chapter-03/{declarative-clock.html => 09-composition/05-declarative-clock.html} (64%)
 rename chapter-03/{declarative-clock.js => 09-composition/05-declarative-clock.js} (100%)
 rename chapter-04/{page-setup.html => 01-page-setup/01-page-setup.html} (56%)
 rename chapter-04/{baked-salmon.html => 01-page-setup/02-baked-salmon.html} (100%)
 create mode 100644 chapter-04/02-react-elements/01-elements.html
 create mode 100644 chapter-04/02-react-elements/02-elements.html
 create mode 100644 chapter-04/02-react-elements/03-elements.html
 create mode 100644 chapter-04/02-react-elements/04-elements.html
 create mode 100644 chapter-04/02-react-elements/05-elements.html
 create mode 100644 chapter-04/03-react-components/01-components.html
 create mode 100644 chapter-04/03-react-components/02-components.html
 create mode 100644 chapter-04/03-react-components/03-components.html
 create mode 100644 chapter-04/03-react-components/04-components.html
 rename chapter-04/{ => 04-dom-rendering-moods}/DOM-rendering-moods.css (100%)
 rename chapter-04/{ => 04-dom-rendering-moods}/DOM-rendering-moods.html (100%)
 rename chapter-04/{ => 04-dom-rendering-moods}/DOM-rendering-moods.js (100%)
 create mode 100644 chapter-04/05-factories/01-factories.html
 create mode 100644 chapter-04/05-factories/02-factories.html
 create mode 100644 chapter-04/05-factories/03-factories.html
 create mode 100644 chapter-04/05-factories/04-factories.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/03-prop-types-success.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/06-successful-validation.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/07-default-properties.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/08-custom-validation.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html
 create mode 100644 chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html
 create mode 100644 chapter-06/02-refs/01-color-component-before-refs.html
 create mode 100644 chapter-06/02-refs/02-color-component-with-refs.html
 create mode 100644 chapter-06/02-refs/03-Color-Component-binding.html
 create mode 100644 chapter-06/02-refs/04-two-way-data-todo.html
 create mode 100644 chapter-06/02-refs/05-without-default-function.html
 create mode 100644 chapter-06/02-refs/06-check-for-property.html
 create mode 100644 chapter-06/02-refs/07-default-property.html
 create mode 100644 chapter-06/02-refs/08-stateless-default-prop.html
 create mode 100644 chapter-06/02-refs/09-stateless-default-arg.html
 create mode 100644 chapter-06/03-component-state/01-the-star-component.html
 create mode 100644 chapter-06/03-component-state/02-the-star-rating-component.html
 create mode 100644 chapter-06/03-component-state/03-setting-state-from-props.html
 create mode 100644 chapter-06/03-component-state/styles.css
 create mode 100644 chapter-07/01-mounting-lifecycle/01-mounting.html
 create mode 100644 chapter-07/01-mounting-lifecycle/02-mounting.html
 create mode 100644 chapter-07/02-updating-lifecycle/01-updating.html
 create mode 100644 chapter-07/02-updating-lifecycle/02-updating.html
 create mode 100644 chapter-07/03-children/01-children.html
 create mode 100644 chapter-07/03-children/02-children.html
 create mode 100644 chapter-07/03-children/03-children.html
 create mode 100644 chapter-07/04-library-integration/01-libraries.html
 create mode 100644 chapter-07/04-library-integration/02-libraries.html
 create mode 100644 chapter-07/04-library-integration/03-libraries.html
 create mode 100644 chapter-07/04-library-integration/04-libraries.html
 create mode 100644 chapter-07/05-higher-order-components/01-hocs.html
 create mode 100644 chapter-07/05-higher-order-components/02-hocs.html
 create mode 100644 chapter-07/05-higher-order-components/03-hocs.html
 create mode 100644 chapter-07/05-higher-order-components/04-hocs.html
 create mode 100644 chapter-07/05-higher-order-components/05-hocs.html
 create mode 100644 chapter-07/06-managing-state-outside-react/01-state.html
 create mode 100644 chapter-08/01-reducers/01-reducers.html
 create mode 100644 chapter-08/01-reducers/02-reducers.html
 create mode 100644 chapter-08/01-reducers/03-reducers.html
 create mode 100644 chapter-08/02-the-store/01-store.html
 create mode 100644 chapter-08/02-the-store/02-store.html
 create mode 100644 chapter-08/02-the-store/03-store.html
 create mode 100644 chapter-08/02-the-store/04-store.html
 create mode 100644 chapter-08/02-the-store/05-store.html
 create mode 100644 chapter-08/02-the-store/06-store.html
 create mode 100644 chapter-08/02-the-store/07-store.html
 create mode 100644 chapter-08/03-action-creators/01-action-creators.html
 create mode 100644 chapter-08/03-action-creators/02-action-creators.html
 create mode 100644 chapter-08/04-middleware/01-middleware.html
 create mode 100644 chapter-08/04-middleware/02-middleware.html

diff --git a/chapter-01/readme.md b/chapter-01/readme.md
index e987681f..81c82956 100644
--- a/chapter-01/readme.md
+++ b/chapter-01/readme.md
@@ -53,9 +53,8 @@ optionally install one of these version mangers:
 
 Installing the React Tools
 --------------------------------
-Next, there are some Chrome developer extensions or Firefox add-ons that you will need to install in order to debug React:
+Next, install the React developer tools:
 
-* Detector ([Chrome](https://chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh?hl=en-US))
 * Development Tools ([Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) |
 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/))
 
@@ -64,8 +63,23 @@ Working with JSBin
 This repository links to samples hosted on JSBin so that you can immediately begin changing each sample and checking
 output to see how each sample has changed.
 
-Here is a Hello World sample that JSBin has assigned the identifier __gosabo__. There are 3 available versions of this
-sample in JSBin under the same identifier.
+Here is a Hello World sample that JSBin has assigned the identifier __gosabo__. There are 3 available versions of this sample in JSBin under the same identifier.
+
+Note: All JSBin links throughout this repository use React 15. To update, change the script tag CDN links to version 16.
+
+Change
+
+```html
+  <script src="https://fb.me/react-with-addons-15.1.0.js"></script>
+  <script src="https://fb.me/react-dom-15.1.0.js"></script>
+```
+
+To
+
+```html
+  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+```
 
 ##### A preview of the latest version in a sample:
 [http://output.jsbin.com/gosabo](http://output.jsbin.com/gosabo)
@@ -89,9 +103,9 @@ CDN's for JavaScript libraries
 Ultimately, we will be working with webpack and npms, but to get running quickly, here are some CDN links that
 can be included in JSBin with this syntax: `<script src="https://[CDN LINK]"></script>`
 
-* [React](https://unpkg.com/react@15.4.2/dist/react.js)
-* [React DOM](https://unpkg.com/react-dom@15.4.2/dist/react-dom.js)
-* [Babel Inline Transpiller](https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js)
+* [React](https://unpkg.com/react@16/umd/react.development.js)
+* [React DOM](https://unpkg.com/react-dom@16/umd/react-dom.development.js)
+* [Babel Inline Transpiler](https://unpkg.com/babel-standalone@6.15.0/babel.min.js)
 * [fetch](https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js)
 * [Redux](https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js)
 * [React Router Source](https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0/react-router.min.js)
diff --git a/chapter-02/01-declaring-variables/01-const.html b/chapter-02/01-declaring-variables/01-const.html
new file mode 100644
index 00000000..890efc5b
--- /dev/null
+++ b/chapter-02/01-declaring-variables/01-const.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Const</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Const</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // The value of a variable can change
+
+    var pizza = true
+    pizza = false
+    console.log(pizza)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/02-const.html b/chapter-02/01-declaring-variables/02-const.html
new file mode 100644
index 00000000..a632e6cd
--- /dev/null
+++ b/chapter-02/01-declaring-variables/02-const.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Const</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Const</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // ES6 introduces constants
+
+    const pizza = true
+    pizza = false
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/03-let.html b/chapter-02/01-declaring-variables/03-let.html
new file mode 100644
index 00000000..48c4f071
--- /dev/null
+++ b/chapter-02/01-declaring-variables/03-let.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Let</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Let</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Variables cannot be scoped to code blocks
+
+    var topic = "JavaScript"
+
+    if (topic) {
+      var topic = "React"
+      console.log('block', topic)
+    }
+
+    console.log('global', topic)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/04-let.html b/chapter-02/01-declaring-variables/04-let.html
new file mode 100644
index 00000000..c035c59d
--- /dev/null
+++ b/chapter-02/01-declaring-variables/04-let.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Let</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Let</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // ES6 lexical variable scoping with let
+
+    var topic = "JavaScript"
+
+    if (topic) {
+      let topic = "React"
+      console.log('block', topic)
+    }
+
+    console.log('global', topic)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/05-let.html b/chapter-02/01-declaring-variables/05-let.html
new file mode 100644
index 00000000..27ac9141
--- /dev/null
+++ b/chapter-02/01-declaring-variables/05-let.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <style media="screen">
+      #container {
+          display: flex;
+          justify-content: space-around;
+      }
+
+      #container>div {
+          height: 5em;
+          width: 5em;
+          background-color: purple;
+      }
+    </style>
+    <title>Let</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Click on a Box</h1>
+  <div id="container"></div>
+<script type="text/babel">
+
+    // Problem, counters are not scoped to for loop blocks
+
+    var div,
+        container = document.getElementById('container')
+
+    for (var i=0; i<5; i++) {
+      div = document.createElement('div')
+      div.onclick = function() {
+        alert('This is box #' + i)
+      }
+      container.appendChild(div)
+    }
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/06-let.html b/chapter-02/01-declaring-variables/06-let.html
new file mode 100644
index 00000000..fcf7fdd7
--- /dev/null
+++ b/chapter-02/01-declaring-variables/06-let.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <style media="screen">
+      #container {
+          display: flex;
+          justify-content: space-around;
+      }
+
+      #container>div {
+          height: 5em;
+          width: 5em;
+          background-color: purple;
+      }
+    </style>
+    <title>Let</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Click on a Box</h1>
+  <div id="container"></div>
+
+<script type="text/babel">
+
+  // Solution, lexical variable scope
+
+  var div,
+      container = document.getElementById('container')
+
+  for (let i=0; i<5; i++) {
+    div = document.createElement('div')
+    div.onclick = function() {
+      alert('This is box #' + i)
+    }
+    container.appendChild(div)
+  }
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/07-template-strings.html b/chapter-02/01-declaring-variables/07-template-strings.html
new file mode 100644
index 00000000..53e7da39
--- /dev/null
+++ b/chapter-02/01-declaring-variables/07-template-strings.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Template Strings</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Template Strings</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const lastName = "Ferrell"
+    const middleName = "William"
+    const firstName = "John"
+
+    // string concatenation
+
+    console.log(lastName + ", " + firstName + " " + middleName)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/08-template-strings.html b/chapter-02/01-declaring-variables/08-template-strings.html
new file mode 100644
index 00000000..50424145
--- /dev/null
+++ b/chapter-02/01-declaring-variables/08-template-strings.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Template Strings</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Template Strings</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const lastName = "Ferrell"
+    const middleName = "William"
+    const firstName = "John"
+
+    // ES6 template strings
+
+    console.log(`${lastName}, ${firstName} ${middleName}`)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/09-template-strings.html b/chapter-02/01-declaring-variables/09-template-strings.html
new file mode 100644
index 00000000..01d9f22d
--- /dev/null
+++ b/chapter-02/01-declaring-variables/09-template-strings.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Template Strings</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Template Strings</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var lastName = "Ferrell"
+    var middleName = "William"
+    var firstName = "John"
+
+    var ticketAgent = "The iO Theater"
+    var event = "TJ & Dave"
+    var qty = 2
+    var price = 10
+
+    // ES6 template strings do not ignore whitespace
+
+    console.log(`
+
+    Hello ${firstName},
+
+    Thanks for ordering ${qty} tickets to ${event}.
+
+    Order Details
+     ${firstName} ${middleName} ${lastName}
+     ${qty} x $${price} = $${qty*price} to ${event}
+
+    You can pick your tickets up at will call 30 minutes before
+    the show.
+
+    Thanks,
+
+    ${ticketAgent}
+
+    `)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/01-declaring-variables/10-template-strings.html b/chapter-02/01-declaring-variables/10-template-strings.html
new file mode 100644
index 00000000..f3e668fd
--- /dev/null
+++ b/chapter-02/01-declaring-variables/10-template-strings.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Template Strings</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Template Strings</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var article = {
+      title: "Template Strings",
+      body: `
+        <div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
+          <p> laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </div>
+      `
+    }
+
+    document.body.innerHTML = `
+    <section>
+      <header>
+          <h1>The HTML5 Blog</h1>
+      </header>
+      <article>
+          <h2>${article.title}</h2>
+          ${article.body}
+      </article>
+      <footer>
+          <p>copyright ${new Date().getYear()} | The HTML5 Blog</p>
+      </footer>
+    </section>
+    `
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/02-es6-functions/01-default-parameters.html b/chapter-02/02-es6-functions/01-default-parameters.html
new file mode 100644
index 00000000..256e1c1c
--- /dev/null
+++ b/chapter-02/02-es6-functions/01-default-parameters.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Default Parameters</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Default Parameters</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    function logActivity(name="Shane McConkey", activity="skiing") {
+    console.log( `${name} loves ${activity}` )
+    }
+
+    logActivity()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/02-es6-functions/02-default-parameters.html b/chapter-02/02-es6-functions/02-default-parameters.html
new file mode 100644
index 00000000..9f2f31c6
--- /dev/null
+++ b/chapter-02/02-es6-functions/02-default-parameters.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Default Parameters</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Default Parameters</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var defaultPerson = {
+      name: {
+        first: "Shane",
+        last: "McConkey"
+      },
+      favActivity: "skiing"
+    }
+
+    function logActivity(p=defaultPerson) {
+      console.log(`${p.name.first} loves ${p.favActivity}`)
+    }
+
+    logActivity()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/01-arrows.html b/chapter-02/03-arrow-functions/01-arrows.html
new file mode 100644
index 00000000..34af1b79
--- /dev/null
+++ b/chapter-02/03-arrow-functions/01-arrows.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Regular Function
+
+    var lordify = function(firstname) {
+      return `${firstname} of Canterbury`
+    }
+
+    console.log( lordify("Dale") )
+    console.log( lordify("Daryle") )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/02-arrows.html b/chapter-02/03-arrow-functions/02-arrows.html
new file mode 100644
index 00000000..bd3423ff
--- /dev/null
+++ b/chapter-02/03-arrow-functions/02-arrows.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Arrow Function
+
+    var lordify = firstname => `${firstname} of Canterbury`
+
+    console.log( lordify("Dana") )
+    console.log( lordify("Daphne") )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/03-arrows.html b/chapter-02/03-arrow-functions/03-arrows.html
new file mode 100644
index 00000000..b1412fce
--- /dev/null
+++ b/chapter-02/03-arrow-functions/03-arrows.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Function
+
+    var lordify = function(firstName, land) {
+      return `${firstName} of ${land}`
+    }
+
+    console.log( lordify("Dale", "Maryland") )
+    console.log( lordify("Daryle", "Culpeper") )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/04-arrows.html b/chapter-02/03-arrow-functions/04-arrows.html
new file mode 100644
index 00000000..b6d5da84
--- /dev/null
+++ b/chapter-02/03-arrow-functions/04-arrows.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Arrow Function
+
+    var lordify = (firstName, land) => `${firstName} of ${land}`
+
+    console.log( lordify("Debbie", "Texas") )
+    console.log( lordify("Daphne", "Susanville") )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/05-arrows.html b/chapter-02/03-arrow-functions/05-arrows.html
new file mode 100644
index 00000000..da569916
--- /dev/null
+++ b/chapter-02/03-arrow-functions/05-arrows.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Function
+
+    var lordify = function(firstName, land) {
+
+      if (!firstName) {
+        throw new Error('A firstName is required to lordify')
+      }
+
+      if (!land) {
+        throw new Error('A lord must have a land')
+      }
+
+      return `${firstName} of ${land}`
+    }
+
+    console.log( lordify("Kelly", "Sonoma") )
+    console.log( lordify("Dave") )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/06-arrows.html b/chapter-02/03-arrow-functions/06-arrows.html
new file mode 100644
index 00000000..a2326991
--- /dev/null
+++ b/chapter-02/03-arrow-functions/06-arrows.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Arrow Function
+
+    var lordify = (firstName, land) => {
+
+      if (!firstName) {
+        throw new Error('A firstName is required to lordify')
+      }
+
+      if (!land) {
+        throw new Error('A lord must have a land')
+      }
+
+      return `${firstName} of ${land}`
+    }
+
+    console.log( lordify() )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/07-arrows.html b/chapter-02/03-arrow-functions/07-arrows.html
new file mode 100644
index 00000000..425d0836
--- /dev/null
+++ b/chapter-02/03-arrow-functions/07-arrows.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Function
+
+    var tahoe = {
+      resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
+      print: function(delay=1000) {
+
+        setTimeout(function() {
+          console.log(this.resorts.join(","))
+        }, delay)
+
+      }
+    }
+
+    tahoe.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/08-arrows.html b/chapter-02/03-arrow-functions/08-arrows.html
new file mode 100644
index 00000000..16b138c5
--- /dev/null
+++ b/chapter-02/03-arrow-functions/08-arrows.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Function Solution with bind
+
+    var tahoe = {
+      resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
+      print: function(delay=1000) {
+
+        setTimeout(function() {
+          console.log(this.resorts.join(","))
+        }.bind(this), delay)
+
+      }
+    }
+
+    tahoe.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/09-arrows.html b/chapter-02/03-arrow-functions/09-arrows.html
new file mode 100644
index 00000000..19d63274
--- /dev/null
+++ b/chapter-02/03-arrow-functions/09-arrows.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Arrow Function 
+
+    var tahoe = {
+      resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
+      print: function(delay=1000) {
+
+        setTimeout(
+          () => console.log(this.resorts.join(",")),
+          delay
+        )
+
+      }
+    }
+
+    tahoe.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/10-arrows.html b/chapter-02/03-arrow-functions/10-arrows.html
new file mode 100644
index 00000000..55930a34
--- /dev/null
+++ b/chapter-02/03-arrow-functions/10-arrows.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Arrow Functions gone too far, this means window
+
+    var tahoe = {
+      resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
+      print: (delay=1000) => {
+
+        setTimeout(() => {
+          console.log(this.resorts.join(","))
+        }, delay)
+
+      }
+    }
+
+    tahoe.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/03-arrow-functions/11-arrows.html b/chapter-02/03-arrow-functions/11-arrows.html
new file mode 100644
index 00000000..21c780a9
--- /dev/null
+++ b/chapter-02/03-arrow-functions/11-arrows.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Arrow Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Arrow Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Arrow Functions know when to use them.
+
+    var tahoe = {
+      resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"],
+      print: function(delay=1000) {
+
+        setTimeout(() => {
+          console.log(this === window)
+        }, delay)
+
+      }
+    }
+
+    tahoe.print(); // true
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/01-destructuring.html b/chapter-02/04-objects-and-arrays/01-destructuring.html
new file mode 100644
index 00000000..20faa849
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/01-destructuring.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Destructuring</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Destructuring</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Destructuring Assignment
+
+    var sandwich =  {
+      bread: "dutch crunch",
+      meat: "tuna",
+      cheese: "swiss",
+      toppings: ["lettuce", "tomato", "mustard"]
+    }
+
+    var {bread, meat} = sandwich
+
+    console.log(bread, meat)
+
+    bread = "garlic"
+    meat = "turkey"
+
+    console.log(bread,meat)
+    console.log(sandwich.bread, sandwich.meat)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/02-destructuring.html b/chapter-02/04-objects-and-arrays/02-destructuring.html
new file mode 100644
index 00000000..d423a863
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/02-destructuring.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Destructuring</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Destructuring</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Function with object arguments
+
+    var lordify = regularPerson => {
+    console.log(`${regularPerson.firstname} of Canterbury`)
+    }
+
+    var regularPerson = {
+    firstname: "Bill",
+    lastname: "Wilson"
+    }
+
+    lordify(regularPerson)
+    
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/03-destructuring.html b/chapter-02/04-objects-and-arrays/03-destructuring.html
new file mode 100644
index 00000000..74502bc7
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/03-destructuring.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Destructuring</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Destructuring</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Destructuring object arguments
+
+    var lordify = ({firstname}) =>
+      console.log(`${firstname} of canterbury`)
+
+    var regularPerson = {
+      firstname: "Dale",
+      lastname: "Smith"
+    }
+
+    lordify(regularPerson)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/04-destructuring.html b/chapter-02/04-objects-and-arrays/04-destructuring.html
new file mode 100644
index 00000000..a203e608
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/04-destructuring.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Destructuring</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Destructuring</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Destructuring Arrays
+
+    var [firstResort] = ["Kirkwood", "Squaw", "Alpine"]
+
+    console.log(firstResort)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/05-destructuring.html b/chapter-02/04-objects-and-arrays/05-destructuring.html
new file mode 100644
index 00000000..882988b9
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/05-destructuring.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Destructuring</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Destructuring</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // More Array Destructuring
+
+    var [,,thirdResort] = ["Kirkwood", "Squaw", "Alpine"]
+
+    console.log(thirdResort)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html
new file mode 100644
index 00000000..218aa128
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Literal Enhancements</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Literal Enhancements</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Literal Enhancements
+
+    var name = "Tallac"
+    var elevation = 9738
+
+    var funHike = { name,elevation }
+
+    console.log(funHike)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html
new file mode 100644
index 00000000..78150b03
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Literal Enhancements</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Literal Enhancements</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Literal Enhancements with functions
+
+    var name = "Tallac"
+    var elevation = 9738
+    var print = function() {
+      console.log(`Mt. ${this.name} is ${this.elevation} feet tall`)
+    }
+
+    var funHike = { name,elevation,print }
+
+    funHike.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html
new file mode 100644
index 00000000..28a491d5
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Literal Enhancements</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Literal Enhancements</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Object literals... the old way
+
+    var name = "Léo Taillefer"
+    var sound = "Kahh"
+
+    var skier = {
+      name: name,
+      sound: sound,
+      powderYell: function() {
+      var yell = this.sound.toUpperCase()
+      console.log(`${yell} ${yell} ${yell}!!!`)
+    },
+      speed: function(mph) {
+        this.speed = mph
+        console.log('speed:', mph)
+      }
+    }
+
+    skier.powderYell()
+    skier.speed("hair on fire")
+    console.log(JSON.stringify(skier))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html b/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html
new file mode 100644
index 00000000..4ab2a3c3
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Literal Enhancements</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Literal Enhancements</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Object literal enhancements
+
+    var name = "Julia Mancuso"
+    var sound = "go fast"
+
+    const skier = {
+      name,
+      sound,
+      powderYell() {
+        let yell = this.sound.toUpperCase()
+        console.log(`${yell} ${yell} ${yell}!!!`)
+      },
+      speed(mph) {
+        this.speed = mph
+        console.log('speed:', mph)
+      }
+    }
+
+    skier.powderYell()
+    skier.speed(350)
+    console.log(JSON.stringify(skier))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/10-spread-operator.html b/chapter-02/04-objects-and-arrays/10-spread-operator.html
new file mode 100644
index 00000000..95869107
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/10-spread-operator.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Spread Operator</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Spread Operator</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Spread Operator
+
+    var peaks = ["Tallac", "Ralston", "Rose"]
+    var canyons = ["Ward", "Blackwood"]
+    var tahoe = [...peaks, ...canyons]
+
+    console.log(tahoe.join(', '))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/11-spread-operator.html b/chapter-02/04-objects-and-arrays/11-spread-operator.html
new file mode 100644
index 00000000..fc9bab05
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/11-spread-operator.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Spread Operator</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Spread Operator</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // .reverse() mutates the peaks array
+
+    var peaks = ["Tallac", "Ralston", "Rose"]
+    var [last] = peaks.reverse()
+
+    console.log(last)
+    console.log(peaks.join(', '))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/12-spread-operator.html b/chapter-02/04-objects-and-arrays/12-spread-operator.html
new file mode 100644
index 00000000..cce7f90b
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/12-spread-operator.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Spread Operator</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Spread Operator</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // duplicate peaks with spread and revers the duplicate
+
+    var peaks = ["Tallac", "Ralston", "Rose"]
+    var [last] = [...peaks].reverse()
+
+    console.log(last) // Rose
+    console.log(peaks.join(', '))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/13-spread-operator.html b/chapter-02/04-objects-and-arrays/13-spread-operator.html
new file mode 100644
index 00000000..4cf451b5
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/13-spread-operator.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Spread Operator</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Spread Operator</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Destructuring with the spread operator
+
+    var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]
+
+    var [first, ...rest] = lakes
+
+    console.log(rest.join(", "))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/14-spread-operator.html b/chapter-02/04-objects-and-arrays/14-spread-operator.html
new file mode 100644
index 00000000..52d7594a
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/14-spread-operator.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Spread Operator</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Spread Operator</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Convert arguments to an array with the spread operator
+    //    pick an array apart with spreads
+
+    function directions(...args) {
+      var [start, ...remaining] = args
+      var [finish, ...stops] = remaining.reverse()
+
+      console.log(`drive through ${args.length} towns`)
+      console.log(`start in ${start}`)
+      console.log(`the destination is ${finish}`)
+      console.log(`stopping ${stops.length} times in between`)
+    }
+
+    directions("Truckee", "Tahoe City", "Sunnyside", "Homewood", "Tahoma")
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/04-objects-and-arrays/15-spread-operator.html b/chapter-02/04-objects-and-arrays/15-spread-operator.html
new file mode 100644
index 00000000..acfac0f8
--- /dev/null
+++ b/chapter-02/04-objects-and-arrays/15-spread-operator.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Spread Operator</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Spread Operator</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Spread operator works with objects too
+
+    var morning = {
+      breakfast: "oatmeal",
+      lunch: "peanut butter and jelly"
+    }
+
+    var dinner = "mac and cheese"
+
+    var backpackingMeals = {
+      ...morning,
+      dinner
+    }
+
+    console.log(backpackingMeals)
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/05-promises/01-promises.html b/chapter-02/05-promises/01-promises.html
new file mode 100644
index 00000000..b7b686d8
--- /dev/null
+++ b/chapter-02/05-promises/01-promises.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Promises</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Promises</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const getFakeMembers = count => new Promise((resolves, rejects) => {
+      const api = `https://api.randomuser.me/?nat=US&results=${count}`
+      const request = new XMLHttpRequest()
+      request.open('GET', api)
+      request.onload = () =>
+           (request.status === 200) ?
+            resolves(JSON.parse(request.response).results) :
+            reject(Error(request.statusText))
+      request.onerror = (err) => rejects(err)
+      request.send()
+    })
+
+    getFakeMembers(5).then(
+      members => console.log(members),
+      err => console.error(
+          new Error("cannot load members from randomuser.me"))
+    )
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/05-promises/02-promises.html b/chapter-02/05-promises/02-promises.html
new file mode 100644
index 00000000..1fb6e852
--- /dev/null
+++ b/chapter-02/05-promises/02-promises.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Promises with fetch</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Promises with fetch</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    fetch("https://api.randomuser.me/?nat=US&results=10")
+      .then(response => response.json())
+      .then(members => console.log(members))
+      .catch(err => console.error(err))
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/06-es6-class-syntax/01-classes.html b/chapter-02/06-es6-class-syntax/01-classes.html
new file mode 100644
index 00000000..b522f66a
--- /dev/null
+++ b/chapter-02/06-es6-class-syntax/01-classes.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Classes</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Classes</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Constructor and the prototype, the old way
+
+    function Vacation(destination, length) {
+      this.destination = destination
+      this.length = length
+    }
+
+    Vacation.prototype.print = function() {
+      console.log(this.destination + " will take " + this.length + " days")
+    }
+
+    var maui = new Vacation("Maui", 7)
+
+    maui.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/06-es6-class-syntax/02-classes.html b/chapter-02/06-es6-class-syntax/02-classes.html
new file mode 100644
index 00000000..7c7f1eaf
--- /dev/null
+++ b/chapter-02/06-es6-class-syntax/02-classes.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Classes</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Classes</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // The new way... with classes
+
+    class Vacation {
+
+    constructor(destination, length) {
+      this.destination = destination
+      this.length = length
+    }
+
+    print() {
+      console.log(`${this.destination} will take ${this.length} days.`)
+    }
+
+    }
+
+    const trip = new Vacation("Santiago, Chile", 9)
+
+    trip.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/06-es6-class-syntax/03-classes.html b/chapter-02/06-es6-class-syntax/03-classes.html
new file mode 100644
index 00000000..437ae908
--- /dev/null
+++ b/chapter-02/06-es6-class-syntax/03-classes.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Classes</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Classes</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    // Inheritance
+
+    class Vacation {
+      constructor(destination, length) {
+        this.destination = destination
+        this.length = length
+      }
+
+      print() {
+        console.log(`${this.destination} will take ${this.length} days.`)
+      }
+
+    }
+
+    class Expedition extends Vacation {
+      constructor(destination, length, gear) {
+        super(destination, length)
+        this.gear = gear
+      }
+
+      print() {
+        super.print()
+        console.log(`bring your ${this.gear.join(" and your ")}`)
+      }
+    }
+
+    const trip = new Expedition(
+      "Mt. Whitney",
+      3,
+      ["sunglasses", "prayer flags", "camera"]
+    )
+
+    trip.print()
+
+</script>
+</body>
+</html>
diff --git a/chapter-02/babel-inline-transpiler.html b/chapter-02/babel-inline-transpiler.html
index 3864343f..8c5a60d8 100644
--- a/chapter-02/babel-inline-transpiler.html
+++ b/chapter-02/babel-inline-transpiler.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
     <meta charset="utf-8">
     <title>Transpiling Inline with Babel</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 </head>
 <body>
 <h1>Babel Inline Transpiler</h1>
diff --git a/chapter-02/readme.md b/chapter-02/readme.md
index 6f1fbd30..050ee90a 100644
--- a/chapter-02/readme.md
+++ b/chapter-02/readme.md
@@ -5,57 +5,89 @@ If you haven't made the switch to the latest JavaScript syntax yet, now is a goo
 Samples
 --------
 
-#### Declaring Variables in ES6
-* const ([1](http://jsbin.com/gapoxa/1/edit?js,console),[2](http://jsbin.com/gapoxa/2/edit?js,console))
-* let ([3](http://jsbin.com/gapoxa/3/edit?js,console),[4](http://jsbin.com/gapoxa/4/edit?js,console))
-* template strings ([5](http://jsbin.com/gapoxa/5/edit?js,output),
-[6](http://jsbin.com/gapoxa/6/edit?js,output),
-[7](http://jsbin.com/gapoxa/7/edit?js,console),
-[8](http://jsbin.com/gapoxa/8/edit?js,console),
-[9](http://jsbin.com/gapoxa/9/edit?js,console),
-[10](http://jsbin.com/gapoxa/10/edit?js,output))
-
-#### ES6 Functions
-* default parameters ([1](http://jsbin.com/yeqexu/1/edit?js,console),
-[2](http://jsbin.com/yeqexu/2/edit?js,console))
-* arrow functions ([1](http://jsbin.com/tegefa/1/edit?js,console),
-[2](http://jsbin.com/tegefa/2/edit?js,console),
-[3](http://jsbin.com/tegefa/3/edit?js,console),
-[4](http://jsbin.com/tegefa/4/edit?js,console),
-[5](http://jsbin.com/tegefa/5/edit?js,console),
-[6](http://jsbin.com/tegefa/6/edit?js,console),
-[7](http://jsbin.com/tegefa/7/edit?js,console),
-[8](http://jsbin.com/tegefa/8/edit?js,console),
-[9](http://jsbin.com/tegefa/9/edit?js,console),
-[10](http://jsbin.com/tegefa/10/edit?js,console),
-[11](http://jsbin.com/tegefa/11/edit?js,console))
-
-#### Transpiling ES6
-* transpiling in jsbin ([1](http://jsbin.com/puraror/1/edit?js,console),
-[2](http://jsbin.com/puraror/2/edit?js,console))
-* transpiling locally ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-02/babel-inline-transpiler.html),
-[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-02/babel-inline-transpiler.html))
-
-#### Objects and Arrays
-* destructuring assignment ([1](http://jsbin.com/jukokaf/1/edit?js,console),
-[2](http://jsbin.com/jukokaf/2/edit?js,console),
-[3](http://jsbin.com/jukokaf/3/edit?js,console),
-[4](http://jsbin.com/jukokaf/4/edit?js,console),
-[5](http://jsbin.com/jukokaf/5/edit?js,console))
-* object literal enhancement ([6](http://jsbin.com/jukokaf/6/edit?js,console),
-[7](http://jsbin.com/jukokaf/7/edit?js,console),
-[8](http://jsbin.com/jukokaf/8/edit?js,console),
-[9](http://jsbin.com/jukokaf/9/edit?js,console))
-* the spread operator ([10](http://jsbin.com/jukokaf/10/edit?js,console),
-[11](http://jsbin.com/jukokaf/11/edit?js,console),
-[12](http://jsbin.com/jukokaf/12/edit?js,console),
-[13](http://jsbin.com/jukokaf/13/edit?js,console),
-[14](http://jsbin.com/jukokaf/14/edit?js,console),
-[15](http://jsbin.com/jukokaf/15/edit?js,console))
-* getFakeMembers ([1](http://jsbin.com/pupojik/1/edit?js,console))
-* fetch members ([1](http://jsbin.com/haguhe/1/edit?js,console))
-
-#### ES6 Class Syntax
-* classes ([1](http://jsbin.com/hoqileh/1/edit?js,console),
-[2](http://jsbin.com/hoqileh/2/edit?js,console))
-* inheritance ([3](http://jsbin.com/hoqileh/3/edit?js,console))
+### Declaring Variables in ES6
+
+#### const
+
+  1. Without const ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/01-const.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/01-const.html), [bin](http://jsbin.com/gapoxa/1/edit?js,output))
+  2. With const ❌
+   ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/02-const.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/02-const.html), [bin](http://jsbin.com/gapoxa/2/edit?js,output))
+
+#### let
+
+  3. Without let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/03-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/03-let.html), [bin](http://jsbin.com/gapoxa/3/edit?js,output))
+  4. With let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/04-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/04-let.html), [bin](http://jsbin.com/gapoxa/4/edit?js,output))
+  5. Loops with var ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/05-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/05-let.html), [bin](http://jsbin.com/gapoxa/5/edit?js,output))
+  6. Loops with const ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/06-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/06-let.html), [bin](http://jsbin.com/gapoxa/6/edit?js,output))
+
+#### template strings
+  7. Without Template Strings - Simple Concatenation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/07-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/07-template-strings.html), [bin](http://jsbin.com/gapoxa/7/edit?js,output))
+  8. With Template Strings - Simple concatenation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/08-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/08-template-strings.html), [bin](http://jsbin.com/gapoxa/8/edit?js,output))
+  9. Template Strings - Email ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/09-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/09-template-strings.html), [bin](http://jsbin.com/gapoxa/9/edit?js,output))
+  10. Template Strings - HTML ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/10-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/10-template-strings.html), [bin](http://jsbin.com/gapoxa/10/edit?js,output))
+
+### Default Parameters
+
+  1. Default Parameters ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/02-es6-functions/01-default-parameters.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/02-es6-functions/01-default-parameters.html), [bin](http://jsbin.com/yeqexu/1/edit?js,console))
+  2. Default Parameters with Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/02-es6-functions/02-default-parameters.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/02-es6-functions/02-default-parameters.html), [bin](http://jsbin.com/yeqexu/2/edit?js,console))
+
+### Arrow functions
+
+  1. Regular Function
+  ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/01-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/01-arrows.html), [bin](http://jsbin.com/tegefa/1/edit?js,console))
+  2. Arrow Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/02-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/02-arrows.html), [bin](http://jsbin.com/tegefa/2/edit?js,console))
+  3. Arrow Function - Multiple Args ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/03-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/03-arrows.html), [bin](http://jsbin.com/tegefa/3/edit?js,console))
+  4. Multiple Args - One Line ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/04-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/04-arrows.html), [bin](http://jsbin.com/tegefa/4/edit?js,console))
+  5. Arrow Functions with if statements ❌  ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/05-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/05-arrows.html), [bin](http://jsbin.com/tegefa/5/edit?js,console))
+  6. Arrow Functions with errors ❌  ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/06-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/06-arrows.html), [bin](http://jsbin.com/tegefa/6/edit?js,console))
+  7. setTimeout ❌  ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/07-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/07-arrows.html), [bin](http://jsbin.com/tegefa/7/edit?js,console))
+  8. setTimeout with .bind ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/08-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/08-arrows.html), [bin](http://jsbin.com/tegefa/8/edit?js,console))
+  9. setTimeout with Arrow Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/09-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/09-arrows.html), [bin](http://jsbin.com/tegefa/9/edit?js,console))
+  10. setTimeout with 'this' problem ❌  ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/10-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/10-arrows.html), [bin](http://jsbin.com/tegefa/10/edit?js,console))
+  11. Showing 'this' problem ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/03-arrow-functions/11-arrows.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/03-arrow-functions/11-arrows.html), [bin](http://jsbin.com/tegefa/11/edit?js,console))
+
+### Transpiling ES6
+
+#### Transpiling in JSBin
+
+  1. JavaScript Tab ([bin](http://jsbin.com/puraror/1/edit?js,console))
+  2. ES6/Babel Tab ([bin](http://jsbin.com/puraror/2/edit?js,console))
+  3. Transpiling Locally ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-02/babel-inline-transpiler.html),
+  [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-02/babel-inline-transpiler.html))
+
+### Objects and Arrays
+
+#### Destructuring Assignment
+
+  1. Destructuring Assignment ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/01-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/01-destructuring.html), [bin](http://jsbin.com/jukokaf/1/edit?js,console))
+  2. Destructuring with Arguments ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/02-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/02-destructuring.html), [bin](http://jsbin.com/jukokaf/2/edit?js,console))
+  3. Destructured Object Arguments ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/03-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/03-destructuring.html), [bin](http://jsbin.com/jukokaf/3/edit?js,console))
+  4. Destructuring Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/04-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/04-destructuring.html), [bin](http://jsbin.com/jukokaf/4/edit?js,console))
+  5. Destructuring with Comma Placeholders ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/05-destructuring.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/05-destructuring.html), [bin](http://jsbin.com/jukokaf/5/edit?js,console))
+
+#### Object Literal Enhancement
+
+  6. Object Literal Enhancement ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/6/edit?js,console))
+  7. Object Literal Enhancements with Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/7/edit?js,console))
+  8. Literal Enhancements: The Old Way ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/8/edit?js,console))
+  9. Literal Enhancements Now ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/9/edit?js,console))
+
+#### The Spread Operator
+
+  10. Spread Operator with Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/10-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/10-spread-operator.html), [bin](http://jsbin.com/jukokaf/10/edit?js,console))
+  11. Array Destructuring with .reverse() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/11-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/11-spread-operator.html), [bin](http://jsbin.com/jukokaf/11/edit?js,console))
+  12. Spread Operator with Destructuring and .reverse() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/12-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/12-spread-operator.html), [bin](http://jsbin.com/jukokaf/12/edit?js,console))
+  13. Destructuring and the Spread Operator ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/13-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/13-spread-operator.html), [bin](http://jsbin.com/jukokaf/13/edit?js,console))
+  14. Directions Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/14-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/14-spread-operator.html), [bin](http://jsbin.com/jukokaf/14/edit?js,console))
+  15. Spread Operator with Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/15-spread-operator.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/15-spread-operator.html), [bin](http://jsbin.com/jukokaf/15/edit?js,console))
+
+### Promises
+
+  1. getFakeMembers ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/05-promises/01-promises.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/05-promises/01-promises.html), [bin](http://jsbin.com/pupojik/1/edit?js,console))
+  2. fetch members ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/05-promises/02-promises.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/05-promises/02-promises.html), [bin](http://jsbin.com/haguhe/1/edit?js,console))
+
+### ES6 Class Syntax
+
+  1. The Constructor and the Prototype ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/06-es6-class-syntax/01-classes.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/06-es6-class-syntax/01-classes.html), [bin](http://jsbin.com/hoqileh/1/edit?js,console))
+  2. Classes ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/06-es6-class-syntax/02-classes.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/06-es6-class-syntax/02-classes.html), [bin](http://jsbin.com/hoqileh/2/edit?js,console))
+  3. Class Inheritance ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/06-es6-class-syntax/03-classes.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/06-es6-class-syntax/03-classes.html), [bin](http://jsbin.com/hoqileh/3/edit?js,console))
diff --git a/chapter-03/01-functional-javascript/01-functional.html b/chapter-03/01-functional-javascript/01-functional.html
new file mode 100644
index 00000000..656a7241
--- /dev/null
+++ b/chapter-03/01-functional-javascript/01-functional.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var log = function(message) {
+      console.log(message)
+    }
+
+    log("In JavaScript functions are variables")
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/01-functional-javascript/02-functional.html b/chapter-03/01-functional-javascript/02-functional.html
new file mode 100644
index 00000000..45665bd2
--- /dev/null
+++ b/chapter-03/01-functional-javascript/02-functional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const log = message => console.log(message)
+
+    log("ES6 arrow function")
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/01-functional-javascript/03-functional.html b/chapter-03/01-functional-javascript/03-functional.html
new file mode 100644
index 00000000..6caf6c53
--- /dev/null
+++ b/chapter-03/01-functional-javascript/03-functional.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const obj = {
+        message: "They can be added to objects like variables",
+        log(message) {
+            console.log(message)
+        }
+    }
+
+    obj.log(obj.message)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/01-functional-javascript/04-functional.html b/chapter-03/01-functional-javascript/04-functional.html
new file mode 100644
index 00000000..efb438b7
--- /dev/null
+++ b/chapter-03/01-functional-javascript/04-functional.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const messages = [
+      "They can be inserted into arrays",
+      message => console.log(message),
+      "like variables",
+      message => console.log(message)
+    ]
+
+    messages[1](messages[0])
+    messages[3](messages[2])
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/01-functional-javascript/05-functional.html b/chapter-03/01-functional-javascript/05-functional.html
new file mode 100644
index 00000000..ee7516c3
--- /dev/null
+++ b/chapter-03/01-functional-javascript/05-functional.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const insideFn = logger => 
+      logger("They can be sent to other functions as arguments")
+
+
+    insideFn(message => console.log(message))
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/01-functional-javascript/06-functional.html b/chapter-03/01-functional-javascript/06-functional.html
new file mode 100644
index 00000000..2d34e2d3
--- /dev/null
+++ b/chapter-03/01-functional-javascript/06-functional.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var createScream = function(logger) {
+        return function(message) {
+            logger(message.toUpperCase() + "!!!")
+        }
+    }
+
+    const scream = createScream(message => console.log(message))
+
+    scream('functions can be returned from other functions')
+    scream('createScream returns a function')
+    scream('scream invokes that returned function')
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/01-functional-javascript/07-functional.html b/chapter-03/01-functional-javascript/07-functional.html
new file mode 100644
index 00000000..c5dbe176
--- /dev/null
+++ b/chapter-03/01-functional-javascript/07-functional.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>What It Means to Be Functional</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Functional JavaScript</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const createScream = logger => message => 
+        logger(message.toUpperCase() + "!!!")
+
+    const scream = createScream(message => console.log(message))
+
+    scream('ES6 can createScream with less')
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html b/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html
new file mode 100644
index 00000000..227a436d
--- /dev/null
+++ b/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Imperative vs. Declarative</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Imperative vs. Declarative</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var string = "This is the mid day show with Cheryl Waters"
+    var urlFriendly = ""
+
+    for (var i=0; i<string.length; i++) {
+      if (string[i] === " ") {
+        urlFriendly += "-"
+      } else {
+        urlFriendly += string[i]
+      }
+    }
+
+    urlFriendly = urlFriendly.toLowerCase()
+
+    console.log(urlFriendly)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html b/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html
new file mode 100644
index 00000000..3179b590
--- /dev/null
+++ b/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Imperative vs. Declarative</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Imperative vs. Declarative</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    const string = "This is the mid day show with Cheryl Waters"
+    const urlFriendly = string.replace(/ /g, "-").toLowerCase()
+
+    console.log(urlFriendly)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/populate-united-states.html b/chapter-03/03-populate-the-us/populate-united-states.html
similarity index 100%
rename from chapter-03/populate-united-states.html
rename to chapter-03/03-populate-the-us/populate-united-states.html
diff --git a/chapter-03/populate-united-states.js b/chapter-03/03-populate-the-us/populate-united-states.js
similarity index 100%
rename from chapter-03/populate-united-states.js
rename to chapter-03/03-populate-the-us/populate-united-states.js
diff --git a/chapter-03/04-immutability/01-immutability.html b/chapter-03/04-immutability/01-immutability.html
new file mode 100644
index 00000000..7f0af097
--- /dev/null
+++ b/chapter-03/04-immutability/01-immutability.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Immutability</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Immutability</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    let color_lawn = {
+      title: "lawn",
+      color: "#00FF00",
+      rating: 0
+    }
+
+    function rateColor(color, rating) {
+      color.rating = rating
+      return color
+    }
+
+    //
+    // rateColor mutates the original color
+    //
+
+    console.log(rateColor(color_lawn, 5).rating)
+    console.log(color_lawn.rating)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/04-immutability/02-immutability.html b/chapter-03/04-immutability/02-immutability.html
new file mode 100644
index 00000000..32fd3e74
--- /dev/null
+++ b/chapter-03/04-immutability/02-immutability.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Immutability</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Immutability</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    let color_lawn = {
+      title: "lawn",
+      color: "#00FF00",
+      rating: 0
+    }
+
+    var rateColor = function(color, rating) {
+      return Object.assign({}, color, {rating:rating})
+    }
+
+    //
+    // Using Object.assign to create a copy and rate that
+    //
+
+    console.log(rateColor(color_lawn, 5).rating)
+    console.log(color_lawn.rating)
+
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/04-immutability/03-immutability.html b/chapter-03/04-immutability/03-immutability.html
new file mode 100644
index 00000000..ac17c46e
--- /dev/null
+++ b/chapter-03/04-immutability/03-immutability.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Immutability</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Immutability</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    let color_lawn = {
+        title: "lawn",
+        color: "#00FF00",
+        rating: 0
+    }
+
+    const rateColor = (color, rating) =>
+        ({
+            ...color,
+            rating
+        })
+
+    //
+    // Or the ...spread operator, even better
+    //
+
+    console.log(rateColor(color_lawn, 5).rating)
+    console.log(color_lawn.rating)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/04-immutability/04-immutability.html b/chapter-03/04-immutability/04-immutability.html
new file mode 100644
index 00000000..ef592595
--- /dev/null
+++ b/chapter-03/04-immutability/04-immutability.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Immutability</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Immutability</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    let list = [
+        { title: "Rad Red"},
+        { title: "Lawn"},
+        { title: "Party Pink"}
+    ]
+
+    var addColor = function(title, colors) {
+      colors.push({ title: title })
+      return colors
+    }
+
+    //
+    // Add Color is mutating the original list
+    //
+
+    console.log(addColor("Glam Green", list).length)
+    console.log(list.length)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/04-immutability/05-immutability.html b/chapter-03/04-immutability/05-immutability.html
new file mode 100644
index 00000000..6eafdd85
--- /dev/null
+++ b/chapter-03/04-immutability/05-immutability.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Immutability</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Immutability</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    let list = [
+      { title: "Rad Red"},
+      { title: "Lawn"},
+      { title: "Party Pink"}
+    ]
+
+    const addColor = (title, array) => array.concat({title})
+
+    //
+    // Use array.concat instead, it does not mutate the list
+    //
+
+    console.log(addColor("Glam Green", list).length)
+    console.log(list.length)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/04-immutability/06-immutability.html b/chapter-03/04-immutability/06-immutability.html
new file mode 100644
index 00000000..11207301
--- /dev/null
+++ b/chapter-03/04-immutability/06-immutability.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Immutability</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Immutability</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    let list = [
+        { title: "Rad Red"},
+        { title: "Lawn"},
+        { title: "Party Pink"}
+    ]
+
+    const addColor = (title, list) => [...list, {title}]
+
+    //
+    // Even Better, ...spread operator
+    //
+
+    console.log(addColor("Glam Green", list).length)
+    console.log(list.length)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/05-pure-functions/01-pure-functions.html b/chapter-03/05-pure-functions/01-pure-functions.html
new file mode 100644
index 00000000..b8d4dbdf
--- /dev/null
+++ b/chapter-03/05-pure-functions/01-pure-functions.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Pure Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Pure Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var frederick = {
+      name: "Frederick Douglass",
+      canRead: false,
+      canWrite: false
+    }
+
+    function selfEducate() {
+      frederick.canRead = true
+      frederick.canWrite = true
+    }
+
+    //
+    // Impure function, no arguments, no returns,
+    //   and it mutates the original object
+    //
+
+    selfEducate()
+
+    console.log( frederick )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/05-pure-functions/02-pure-functions.html b/chapter-03/05-pure-functions/02-pure-functions.html
new file mode 100644
index 00000000..15d67d9f
--- /dev/null
+++ b/chapter-03/05-pure-functions/02-pure-functions.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Pure Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Pure Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var frederick = {
+      name: "Frederick Douglass",
+      canRead: false,
+      canWrite: false
+    }
+
+    const selfEducate = person => {
+      person.canRead = true
+      person.canWrite = true
+      return person
+    }
+
+    //
+    // still impure, mutates the original object
+    //
+
+    console.log( selfEducate(frederick) )
+    console.log( frederick )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/05-pure-functions/03-pure-functions.html b/chapter-03/05-pure-functions/03-pure-functions.html
new file mode 100644
index 00000000..5c8454c8
--- /dev/null
+++ b/chapter-03/05-pure-functions/03-pure-functions.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Pure Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Pure Functions</h1>
+<p>Open the console</p>
+<script type="text/babel">
+
+    var frederick = {
+      name: "Frederick Douglass",
+      canRead: false,
+      canWrite: false
+    }
+
+    const selfEducate = person =>
+        ({
+            ...person,
+            canRead: true,
+            canWrite: true
+        })
+
+    //
+    // Pure Function, takes an argument, returns an object,
+    //    and causes zero side effects
+    //
+
+    console.log( selfEducate(frederick) )
+    console.log( frederick )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/05-pure-functions/04-pure-functions.html b/chapter-03/05-pure-functions/04-pure-functions.html
new file mode 100644
index 00000000..c20a665e
--- /dev/null
+++ b/chapter-03/05-pure-functions/04-pure-functions.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Pure Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Pure Functions</h1>
+<script type="text/babel">
+
+    function Header(text) {
+        let h1 = document.createElement('h1')
+        h1.innerText = text
+        document.body.appendChild(h1)
+    }
+
+    Header("Header() caused side effects")
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/05-pure-functions/05-pure-functions.html b/chapter-03/05-pure-functions/05-pure-functions.html
new file mode 100644
index 00000000..f43cfb1d
--- /dev/null
+++ b/chapter-03/05-pure-functions/05-pure-functions.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Pure Functions</title>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Pure Functions</h1>
+<div id="react-container"></div>
+<script type="text/babel">
+
+    const Header = (props) => <h1>{props.title}</h1>
+
+    ReactDOM.render(
+        <Header title="React uses pure functions" />,
+        document.getElementById('react-container')
+    )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/01-data.html b/chapter-03/06-transforming-data/01-data.html
new file mode 100644
index 00000000..a5d1a3b3
--- /dev/null
+++ b/chapter-03/06-transforming-data/01-data.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const schools = [
+        "Yorktown",
+        "Washington & Lee",
+        "Wakefield"
+    ]
+
+    console.log( schools.join(", ") )
+
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/02-data.html b/chapter-03/06-transforming-data/02-data.html
new file mode 100644
index 00000000..6833a911
--- /dev/null
+++ b/chapter-03/06-transforming-data/02-data.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const schools = [
+      "Yorktown",
+      "Washington & Lee",
+      "Wakefield"
+    ]
+
+    const wSchools = schools.filter(school => school[0] === "W")
+
+    console.log( wSchools )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/03-data.html b/chapter-03/06-transforming-data/03-data.html
new file mode 100644
index 00000000..4de5e6a6
--- /dev/null
+++ b/chapter-03/06-transforming-data/03-data.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const schools = [
+      "Yorktown",
+      "Washington & Lee",
+      "Wakefield"
+    ]
+
+    const cutSchool = (cut, list) =>
+        list.filter(school => school !== cut)
+
+    console.log(cutSchool("Washington & Lee", schools).join(" * "))
+    console.log(schools.join("\n"))
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/04-data.html b/chapter-03/06-transforming-data/04-data.html
new file mode 100644
index 00000000..7bc0f40c
--- /dev/null
+++ b/chapter-03/06-transforming-data/04-data.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const schools = [
+      "Yorktown",
+      "Washington & Lee",
+      "Wakefield"
+    ]
+
+    const highSchools = schools.map(school => `${school} High School`)
+
+    console.log(highSchools.join("\n"))
+    console.log(schools.join("\n"))
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/05-data.html b/chapter-03/06-transforming-data/05-data.html
new file mode 100644
index 00000000..a4807d58
--- /dev/null
+++ b/chapter-03/06-transforming-data/05-data.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const schools = [
+      "Yorktown",
+      "Washington & Lee",
+      "Wakefield"
+    ]
+
+    const highSchools = schools.map(school => ({ name: school }))
+
+    console.log(highSchools)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/06-data.html b/chapter-03/06-transforming-data/06-data.html
new file mode 100644
index 00000000..b17dcd27
--- /dev/null
+++ b/chapter-03/06-transforming-data/06-data.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    let schools = [
+        { name: "Yorktown"},
+        { name: "Stratford" },
+        { name: "Washington & Lee"},
+        { name: "Wakefield"}
+    ]
+
+    const editName = (oldName, name, arr) =>
+        arr.map(item => {
+            if (item.name === oldName) {
+                return {
+                    ...item,
+                    name
+                }
+            } else {
+                return item
+            }
+        })
+
+    let updatedSchools = editName("Stratford", "HB Woodlawn", schools)
+
+    console.log( updatedSchools[1] )
+    console.log( schools[1] )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/07-data.html b/chapter-03/06-transforming-data/07-data.html
new file mode 100644
index 00000000..e90b3c19
--- /dev/null
+++ b/chapter-03/06-transforming-data/07-data.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    let schools = [
+        { name: "Yorktown"},
+        { name: "Stratford" },
+        { name: "Washington & Lee"},
+        { name: "Wakefield"}
+    ]
+
+    // Edit Name with less syntax
+
+    const editName = (oldName, name, arr) =>
+        arr.map(item => (item.name === oldName) ?
+            ({...item,name}) :
+            item
+        )
+
+    let updatedSchools = editName("Stratford", "HB Woodlawn", schools)
+
+    console.log( updatedSchools[1] )
+    console.log( schools[1] )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/08-data.html b/chapter-03/06-transforming-data/08-data.html
new file mode 100644
index 00000000..7d75c2fe
--- /dev/null
+++ b/chapter-03/06-transforming-data/08-data.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const schools = {
+      "Yorktown": 10,
+      "Washington & Lee": 2,
+      "Wakefield": 5
+    }
+
+    const schoolArray = Object.keys(schools).map(key =>
+        ({
+            name: key,
+            wins: schools[key]
+        })
+    )
+
+    console.log(schoolArray)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/09-data.html b/chapter-03/06-transforming-data/09-data.html
new file mode 100644
index 00000000..7edff597
--- /dev/null
+++ b/chapter-03/06-transforming-data/09-data.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const ages = [21,18,42,40,64,63,34]
+
+    const maxAge = ages.reduce((max, age) => {
+      console.log(`${age} > ${max} = ${age > max}`)
+      if (age > max) {
+          return age
+      } else {
+          return max
+      }
+    }, 0)
+
+    console.log('maxAge', maxAge)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/10-data.html b/chapter-03/06-transforming-data/10-data.html
new file mode 100644
index 00000000..8f0cd0be
--- /dev/null
+++ b/chapter-03/06-transforming-data/10-data.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const ages = [21,18,42,40,64,63,34];
+
+    // less syntax
+
+    const max = ages.reduce(
+        (max, value) => (value > max) ? value : max,
+        0
+    )
+
+    console.log('max', max)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/11-data.html b/chapter-03/06-transforming-data/11-data.html
new file mode 100644
index 00000000..ac3e44d9
--- /dev/null
+++ b/chapter-03/06-transforming-data/11-data.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+<h1>Transforming Data</h1>
+<p>Open the Console</p>
+<script type="text/babel">
+
+    const colors = [
+        {
+            id: '-xekare',
+            title: "rad red",
+            rating: 3
+        },
+        {
+            id: '-jbwsof',
+            title: "big blue",
+            rating: 2
+        },
+        {
+            id: '-prigbj',
+            title: "grizzly grey",
+            rating: 5
+        },
+        {
+            id: '-ryhbhsl',
+            title: "banana",
+            rating: 1
+        }
+    ]
+
+    const hashColors = colors.reduce(
+        (hash, {id, title, rating}) => {
+            hash[id] = {title, rating}
+            return hash
+        },
+        {}
+    )
+
+    console.log(hashColors)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/06-transforming-data/12-data.html b/chapter-03/06-transforming-data/12-data.html
new file mode 100644
index 00000000..f0ca89e9
--- /dev/null
+++ b/chapter-03/06-transforming-data/12-data.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Transforming Data</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Transforming Data</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const colors = ["red", "red", "green", "blue", "green"];
+
+    const distinctColors = colors.reduce(
+        (distinct, color) =>
+            (distinct.indexOf(color) !== -1) ?
+                distinct :
+                [...distinct, color],
+        []
+    )
+
+    console.log(distinctColors)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/07-higher-order-functions/01-higher-order-fns.html b/chapter-03/07-higher-order-functions/01-higher-order-fns.html
new file mode 100644
index 00000000..d34bd054
--- /dev/null
+++ b/chapter-03/07-higher-order-functions/01-higher-order-fns.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Higher Order Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Higher Order Functions</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const invokeIf = (condition, fnTrue, fnFalse) => 
+        (condition) ? fnTrue() : fnFalse()
+
+    const showWelcome = () =>
+        console.log("Welcome!!!")
+
+    const showUnauthorized = () =>
+        console.log("Unauthorized!!!")
+
+    invokeIf(true, showWelcome, showUnauthorized)
+    invokeIf(false, showWelcome, showUnauthorized)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/07-higher-order-functions/02-higher-order-fns.html b/chapter-03/07-higher-order-functions/02-higher-order-fns.html
new file mode 100644
index 00000000..e80eb3b2
--- /dev/null
+++ b/chapter-03/07-higher-order-functions/02-higher-order-fns.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Higher Order Functions</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Higher Order Functions</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const getFakeMembers = count => new Promise((resolves, rejects) => {
+      const api = `https://api.randomuser.me/?nat=US&results=${count}`
+      const request = new XMLHttpRequest()
+      request.open('GET', api)
+      request.onload = () =>
+           (request.status === 200) ?
+            resolves(JSON.parse(request.response).results) :
+            reject(Error(request.statusText))
+      request.onerror = (err) => rejects(err)
+      request.send()
+    })
+
+    const userLogs = userName => message =>
+        console.log(`${userName} -> ${message}`)
+
+    const log = userLogs("grandpa23")
+
+    log("attempted to load 20 fake members")
+    getFakeMembers(20).then(
+        members => log(`successfully loaded ${members.length} members`),
+        error => log("encountered an error loading members")
+    )
+
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/08-recursion/01-recursion.html b/chapter-03/08-recursion/01-recursion.html
new file mode 100644
index 00000000..3b20b3e3
--- /dev/null
+++ b/chapter-03/08-recursion/01-recursion.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Recursion</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Recursion</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const countdown = (value, fn) => {
+        fn(value)
+        return (value > 0) ? countdown(value-1, fn) : value
+    }
+
+    countdown(10, value => console.log(value))
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/08-recursion/02-recursion.html b/chapter-03/08-recursion/02-recursion.html
new file mode 100644
index 00000000..539d5d9e
--- /dev/null
+++ b/chapter-03/08-recursion/02-recursion.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Recursion</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Recursion</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const countdown = (value, fn, delay=1000) => {
+        fn(value)
+        return (value > 0) ?
+            setTimeout(() => countdown(value-1, fn), delay) :
+            value
+    }
+
+    const log = value => console.log(value)
+    countdown(10, log)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/08-recursion/03-recursion.html b/chapter-03/08-recursion/03-recursion.html
new file mode 100644
index 00000000..a8d64439
--- /dev/null
+++ b/chapter-03/08-recursion/03-recursion.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Recursion</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Recursion</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const dan = {
+        type: "person",
+        data: {
+          gender: "male",
+          info: {
+            id: 22,
+            fullname: {
+              first: "Dan",
+              last: "Deacon"
+            }
+          }
+        }
+      }
+
+    const deepPick = (fields, object={}) => {
+       const [first, ...remaining] = fields.split(".")
+       return (remaining.length) ?
+           deepPick(remaining.join("."), object[first]) :
+           object[first]
+    }
+
+    console.log( deepPick("type", dan) )
+    console.log( deepPick("data.info.fullname.first", dan) )
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/09-composition/01-composition.html b/chapter-03/09-composition/01-composition.html
new file mode 100644
index 00000000..bcafbd33
--- /dev/null
+++ b/chapter-03/09-composition/01-composition.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Composition</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Composition</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const template = "hh:mm:ss tt"
+    const clockTime = template.replace("hh", "03")
+          .replace("mm", "33")
+          .replace("ss", "33")
+          .replace("tt", "PM")
+
+    console.log(clockTime)
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/09-composition/02-composition.html b/chapter-03/09-composition/02-composition.html
new file mode 100644
index 00000000..d2d363ae
--- /dev/null
+++ b/chapter-03/09-composition/02-composition.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Composition</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Composition</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const createClockTime = date => ({date})
+
+    const appendAMPM = ({date}) =>
+        ({
+            date,
+            ampm: (date.getHours() >= 12) ? "PM" : "AM"
+        })
+
+    const civilianHours = clockTime => {
+      const hours = clockTime.date.getHours()
+      return {
+        ...clockTime,
+        hours: (hours > 12) ?
+          hours - 12 :
+          hours
+      }
+    }
+
+    const removeDate = clockTime => {
+      let newTime = {...clockTime}
+      delete newTime.date
+      return newTime
+    }
+
+    // Not the best way to compose all of these into one function
+
+    const oneFunction = date =>
+        removeDate(
+            civilianHours(
+                appendAMPM(
+                    createClockTime(date)
+                )
+            )
+        )
+
+    console.log(oneFunction(new Date()))
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/09-composition/03-composition.html b/chapter-03/09-composition/03-composition.html
new file mode 100644
index 00000000..90bad192
--- /dev/null
+++ b/chapter-03/09-composition/03-composition.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <title>Composition</title>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+<body>
+  <h1>Composition</h1>
+  <p>Open the Console</p>
+<script type="text/babel">
+
+    const createClockTime = date => ({date})
+
+    const appendAMPM = ({date}) =>
+      ({
+          date,
+          ampm: (date.getHours() >= 12) ? "PM" : "AM"
+      })
+
+    const civilianHours = clockTime => {
+    const hours = clockTime.date.getHours()
+      return {
+        ...clockTime,
+        hours: (hours > 12) ?
+          hours - 12 :
+          hours
+      }
+    }
+
+    const removeDate = clockTime => {
+      let newTime = {...clockTime}
+      delete newTime.date
+      return newTime
+    }
+
+    // A more elegant approach to composition
+
+    const compose = (...fns) =>
+      (arg) =>
+      fns.reduce(
+        (composed, f) => f(composed),
+        arg
+    )
+
+    const oneFunction = compose(
+      createClockTime,
+      appendAMPM,
+      civilianHours,
+      removeDate
+    )
+
+    console.log(oneFunction(new Date()))
+
+</script>
+</body>
+</html>
diff --git a/chapter-03/imperative-clock.html b/chapter-03/09-composition/04-imperative-clock.html
similarity index 83%
rename from chapter-03/imperative-clock.html
rename to chapter-03/09-composition/04-imperative-clock.html
index 48ab7789..b2e8a6fd 100644
--- a/chapter-03/imperative-clock.html
+++ b/chapter-03/09-composition/04-imperative-clock.html
@@ -8,6 +8,6 @@
 <body>
     <h1>Imperative Clock</h1>
     <p>Open the console to check the time.</p>
-    <script src="imperative-clock.js"></script>
+    <script src="./04-imperative-clock.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/chapter-03/imperative-clock.js b/chapter-03/09-composition/04-imperative-clock.js
similarity index 100%
rename from chapter-03/imperative-clock.js
rename to chapter-03/09-composition/04-imperative-clock.js
diff --git a/chapter-03/declarative-clock.html b/chapter-03/09-composition/05-declarative-clock.html
similarity index 64%
rename from chapter-03/declarative-clock.html
rename to chapter-03/09-composition/05-declarative-clock.html
index 0cb727ca..a7d40726 100644
--- a/chapter-03/declarative-clock.html
+++ b/chapter-03/09-composition/05-declarative-clock.html
@@ -4,11 +4,11 @@
     <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
     <meta charset="utf-8">
     <title>Declarative Clock</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 </head>
 <body>
 <h1>Declarative Clock</h1>
 <p>Open the console to check the time.</p>
-<script src="declarative-clock.js" type="text/babel"></script>
+<script src="./05-declarative-clock.js" type="text/babel"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/chapter-03/declarative-clock.js b/chapter-03/09-composition/05-declarative-clock.js
similarity index 100%
rename from chapter-03/declarative-clock.js
rename to chapter-03/09-composition/05-declarative-clock.js
diff --git a/chapter-03/readme.md b/chapter-03/readme.md
index 3b3201bc..0c134f15 100644
--- a/chapter-03/readme.md
+++ b/chapter-03/readme.md
@@ -1,67 +1,84 @@
 Chapter 3 : Functional Programming with JavaScript
 ==================
-React, Flux, and Redux all fit within the functional JavaScript paradigm. Understanding the basic concepts of 
+React, Flux, and Redux all fit within the functional JavaScript paradigm. Understanding the basic concepts of
 functional programming will make you better at structuring React applications.
 
 Samples
 --------
 
-#### Introduction
-* what it means to be functional ([1](http://jsbin.com/pimixu/1/edit?js,console),
-[2](http://jsbin.com/pimixu/2/edit?js,console),
-[3](http://jsbin.com/pimixu/3/edit?js,console),
-[4](http://jsbin.com/pimixu/4/edit?js,console),
-[5](http://jsbin.com/pimixu/5/edit?js,console),
-[6](http://jsbin.com/pimixu/6/edit?js,console),
-[7](http://jsbin.com/pimixu/7/edit?js,console))
-* imperative vs. declarative ([1](http://jsbin.com/cuqapu/1/edit?js,console),
-[2](http://jsbin.com/cuqapu/2/edit?js,console))
-* Populate The United States ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/populate-united-states.html),
-[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/populate-united-states.js))
-
-#### Immutability
-* rating colors ([1](http://jsbin.com/kemimi/1/edit?js,console),
-[2](http://jsbin.com/kemimi/2/edit?js,console),
-[3](http://jsbin.com/kemimi/3/edit?js,console))
-* adding colors ([4](http://jsbin.com/kemimi/4/edit?js,console),
-[5](http://jsbin.com/kemimi/5/edit?js,console),
-[6](http://jsbin.com/kemimi/6/edit?js,console))
-
-#### Pure Functions
-* self educate ([1](http://jsbin.com/kosogo/1/edit?js,console), 
-[2](http://jsbin.com/kosogo/2/edit?js,console),
-[3](http://jsbin.com/kosogo/3/edit?js,console))
-* DOM ([4](http://jsbin.com/kosogo/4/edit?js,output), 
-[5](http://jsbin.com/kosogo/5/edit?js,output))
-
-#### Transforming Data
-* filtering arrays ([1](http://jsbin.com/qehige/1/edit?js,console),
-[2](http://jsbin.com/qehige/2/edit?js,console),
-[3](http://jsbin.com/qehige/3/edit?js,console))
-* mapping arrays ([4](http://jsbin.com/qehige/4/edit?js,console),
-[5](http://jsbin.com/qehige/5/edit?js,console),
-[6](http://jsbin.com/qehige/6/edit?js,console),
-[7](http://jsbin.com/qehige/7/edit?js,console))
-* object to array ([8](http://jsbin.com/qehige/8/edit?js,console))
-* array to number ([9](http://jsbin.com/qehige/9/edit?js,console),
-[10](http://jsbin.com/qehige/10/edit?js,console))
-* array to object ([11](http://jsbin.com/qehige/11/edit?js,console),
-[12](http://jsbin.com/qehige/12/edit?js,console))
-
-#### Higher Order Functions
-* invokeIf ([1](http://jsbin.com/tolewi/1/edit?js,console))
-* userLogs ([2](http://jsbin.com/tolewi/2/edit?js,console))
-
-#### Recursion
-* counting down ([1](http://jsbin.com/romezi/1/edit?js,console),
-[2](http://jsbin.com/romezi/2/edit?js,console))
-* deep pick ([3](http://jsbin.com/romezi/3/edit?js,console))
-
-#### Composition
-* compose ([1](http://jsbin.com/zivevu/1/edit?js,console),
-[2](http://jsbin.com/zivevu/2/edit?js,console),
-[3](http://jsbin.com/zivevu/3/edit?js,console))
-* imperative clock ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/imperative-clock.html),
-[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/imperative-clock.js))
-* declarative clock ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/declarative-clock.html),
-[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/declarative-clock.js))
\ No newline at end of file
+### Introduction
+
+#### What it means to be Functional
+
+  1. Functions as Variables ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/01-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/01-functional.html), [bin](http://jsbin.com/pixmu/1/edit?js,output))
+  2. Arrow Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/02-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/02-functional.html), [bin](http://jsbin.com/pixmu/2/edit?js,output))
+  3. Object Methods ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/03-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/03-functional.html), [bin](http://jsbin.com/pixmu/3/edit?js,output))
+  4. Functions within Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/04-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/04-functional.html), [bin](http://jsbin.com/pixmu/4/edit?js,output))
+  5. Functions as Arguments ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/05-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/05-functional.html), [bin](http://jsbin.com/pixmu/5/edit?js,output))
+  6. Returned Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/06-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/06-functional.html), [bin](http://jsbin.com/pixmu/6/edit?js,output))
+  7. ES6 Enhancements ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/01-functional-javascript/07-functional.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/01-functional-javascript/07-functional.html), [bin](http://jsbin.com/pixmu/7/edit?js,output))
+
+#### Imperative vs. Declarative
+
+  1. Imperative ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html), [bin](http://jsbin.com/cuqapu/1/edit?js,output))
+  2. Declarative ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html), [bin](http://jsbin.com/cuqapu/2/edit?js,output))
+
+
+#### Populate the US
+
+  1. Populate the US ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-03/03-populate-the-us/populate-united-states.html),
+  [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/03-populate-the-us/populate-united-states.js), [bin](http://jsbin.com/gesimonadi/1/edit?html,js,output))
+
+
+### Immutability
+
+  1. Mutations ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/01-immutability.html),
+  [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/01-immutability.html), [bin](http://jsbin.com/kemimi/1/edit?js,output))
+  2. Object.assign() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/02-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/02-immutability.html), [bin](http://jsbin.com/kemimi/2/edit?js,output))
+  3. Spread Operator with Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/03-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/03-immutability.html), [bin](http://jsbin.com/kemimi/3/edit?js,output))
+  4. Array.push() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/04-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/04-immutability.html), [bin](http://jsbin.com/kemimi/4/edit?js,output))
+  5. Array.concat() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/05-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/05-immutability.html), [bin](http://jsbin.com/kemimi/5/edit?js,output))
+  6. Spread Operator with Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/04-immutability/06-immutability.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/04-immutability/06-immutability.html), [bin](http://jsbin.com/kemimi/6/edit?js,output))
+
+### Pure Functions
+
+  1. Impure Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/01-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/01-pure-functions.html), [bin](http://jsbin.com/kosogo/1/edit?js,output))
+  2. Object Mutation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/02-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/02-pure-functions.html), [bin](http://jsbin.com/kosogo/2/edit?js,output))
+  3. Pure Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/03-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/03-pure-functions.html), [bin](http://jsbin.com/kosogo/3/edit?js,output))
+  4. Side Effects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/04-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/04-pure-functions.html), [bin](http://jsbin.com/kosogo/4/edit?js,output))
+  5. React Component ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/05-pure-functions/05-pure-functions.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/05-pure-functions/05-pure-functions.html), [bin](http://jsbin.com/kosogo/5/edit?js,output))
+
+### Transforming Data  
+
+  1. Joining Array Items ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/01-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/01-data.html), [bin](http://jsbin.com/qehige/1/edit?js,output))
+  2. Filtering Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/02-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/02-data.html), [bin](http://jsbin.com/qehige/2/edit?js,output))
+  3. Filtering Array Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/03-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/03-data.html), [bin](http://jsbin.com/qehige/3/edit?js,output))
+  4. Mapping Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/04-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/04-data.html), [bin](http://jsbin.com/qehige/4/edit?js,output))
+  5. Creating Objects with .map() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/05-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/05-data.html), [bin](http://jsbin.com/qehige/5/edit?js,output))
+  6. Updating Array of Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/06-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/06-data.html), [bin](http://jsbin.com/qehige/6/edit?js,output))
+  7. Editing Arrays of Objects ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/07-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/07-data.html), [bin](http://jsbin.com/qehige/7/edit?js,output))
+  8. Object.keys() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/08-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/08-data.html), [bin](http://jsbin.com/qehige/8/edit?js,output))
+  9. Reducing Arrays ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/09-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/09-data.html), [bin](http://jsbin.com/qehige/9/edit?js,output))
+  10. Array.reduce() Shorter Syntax ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/10-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/10-data.html), [bin](http://jsbin.com/qehige/10/edit?js,output))
+  11. Colors Hash ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/11-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/11-data.html), [bin](http://jsbin.com/qehige/11/edit?js,output))
+  12. distinctColors() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/06-transforming-data/12-data.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/06-transforming-data/12-data.html), [bin](http://jsbin.com/qehige/12/edit?js,output))
+
+
+### Higher Order Functions  
+
+  1. invokeIf ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/07-higher-order-functions/01-higher-order-fns.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/07-higher-order-functions/01-higher-order-fns.html), [bin](http://jsbin.com/raxuyew/1/edit?js,output))
+  2. userLogs ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/07-higher-order-functions/02-higher-order-fns.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/07-higher-order-functions/02-higher-order-fns.html), [bin](http://jsbin.com/raxuyew/2/edit?js,output))
+
+### Recursion  
+
+  1. Countdown ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/08-recursion/01-recursion.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/08-recursion/01-recursion.html), [bin](http://jsbin.com/romezi/1/edit?js,output))
+  2. Countdown with setTimeout ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/08-recursion/02-recursion.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/08-recursion/02-recursion.html), [bin](http://jsbin.com/romezi/2/edit?js,output))
+  3. deepPick() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/08-recursion/03-recursion.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/08-recursion/03-recursion.html), [bin](http://jsbin.com/romezi/3/edit?js,output))
+
+### Composition  
+
+  1. Clock Template with .replace() ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/01-composition.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/01-composition.html), [bin](http://jsbin.com/zivevu/1/edit?js,output))
+  2. Clock with Composition ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/02-composition.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/02-composition.html), [bin](http://jsbin.com/zivevu/2/edit?js,output))
+  3. Click with Compose Function ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/03-composition.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/03-composition.html), [bin](http://jsbin.com/zivevu/3/edit?js,output))
+  4. Imperative Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/04-imperative-clock.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/04-imperative-clock.js))
+  5. Declarative Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-03/09-composition/05-declarative-clock.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-03/09-composition/05-declarative-clock.js))
diff --git a/chapter-04/page-setup.html b/chapter-04/01-page-setup/01-page-setup.html
similarity index 56%
rename from chapter-04/page-setup.html
rename to chapter-04/01-page-setup/01-page-setup.html
index 91e90648..5284e851 100644
--- a/chapter-04/page-setup.html
+++ b/chapter-04/01-page-setup/01-page-setup.html
@@ -7,11 +7,11 @@
 <body>
 
 <!-- Target Container -->
-<div class="react-container"></div>
+<div id="react-container"></div>
 
 <!-- React Library & React DOM-->
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 
 <script>
 
diff --git a/chapter-04/baked-salmon.html b/chapter-04/01-page-setup/02-baked-salmon.html
similarity index 100%
rename from chapter-04/baked-salmon.html
rename to chapter-04/01-page-setup/02-baked-salmon.html
diff --git a/chapter-04/02-react-elements/01-elements.html b/chapter-04/02-react-elements/01-elements.html
new file mode 100644
index 00000000..6b874695
--- /dev/null
+++ b/chapter-04/02-react-elements/01-elements.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Elements</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const dish = React.createElement("h1", null, "Baked Salmon")
+
+    ReactDOM.render(
+        dish,
+        document.getElementById('react-container')
+    )
+
+    console.log('dish', dish)
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/02-react-elements/02-elements.html b/chapter-04/02-react-elements/02-elements.html
new file mode 100644
index 00000000..4eab3e7f
--- /dev/null
+++ b/chapter-04/02-react-elements/02-elements.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Elements</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const dish = React.createElement(
+      "h1",
+      {id: "recipe-0", 'data-type': "title"},
+      "Baked Salmon"
+    )
+
+    ReactDOM.render(
+      dish,
+      document.getElementById('react-container')
+    )
+
+    console.log('dish', dish)
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/02-react-elements/03-elements.html b/chapter-04/02-react-elements/03-elements.html
new file mode 100644
index 00000000..43940d18
--- /dev/null
+++ b/chapter-04/02-react-elements/03-elements.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Elements</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const dish = React.createElement("section", {id: "baked-salmon"},
+        React.createElement("h1", null, "Baked Salmon"),
+        React.createElement("ul", {"className": "ingredients"},
+            React.createElement("li", null, "1 lb Salmon"),
+            React.createElement("li", null, "1 cup Pine Nuts"),
+            React.createElement("li", null, "2 cups Butter Lettuce"),
+            React.createElement("li", null, "1 Yellow Squash"),
+            React.createElement("li", null, "1/2 cup Olive Oil"),
+            React.createElement("li", null, "3 cloves of Garlic")
+        ),
+        React.createElement("section", {"className": "instructions"},
+            React.createElement("h2", null, "Cooking Instructions"),
+            React.createElement("p", null, "Preheat the oven to 350 degrees."),
+            React.createElement("p", null, "Spread the olive oil around a glass baking dish."),
+            React.createElement("p", null, "Add the salmon, Garlic, and pine..."),
+            React.createElement("p", null, "Bake for 15 minutes."),
+            React.createElement("p", null, "Add the Butternut Squash and put..."),
+            React.createElement("p", null, "Remove from oven and let cool for 15 ....")
+        )
+    )
+
+    ReactDOM.render(dish, document.getElementById('react-container'))
+
+    console.log('dish element', dish)
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/02-react-elements/04-elements.html b/chapter-04/02-react-elements/04-elements.html
new file mode 100644
index 00000000..cc45ba10
--- /dev/null
+++ b/chapter-04/02-react-elements/04-elements.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Elements</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const items = [
+        "1 lb Salmon",
+        "1 cup Pine Nuts",
+        "2 cups Butter Lettuce",
+        "1 Yellow Squash",
+        "1/2 cup Olive Oil",
+        "3 cloves of Garlic"
+    ]
+
+    const ingredients = React.createElement(
+        "ul",
+        { className: "ingredients" },
+        items.map((ingredient, i) =>
+            React.createElement("li", null, ingredient)
+        )
+    )
+
+    ReactDOM.render(
+      ingredients,
+      document.getElementById('react-container')
+    )
+
+    console.log('ingredients', ingredients)
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/02-react-elements/05-elements.html b/chapter-04/02-react-elements/05-elements.html
new file mode 100644
index 00000000..f6ad9d8a
--- /dev/null
+++ b/chapter-04/02-react-elements/05-elements.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Elements</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const items = [
+        "1 lb Salmon",
+        "1 cup Pine Nuts",
+        "2 cups Butter Lettuce",
+        "1 Yellow Squash",
+        "1/2 cup Olive Oil",
+        "3 cloves of Garlic"
+    ]
+
+    const ingredients = React.createElement(
+        "ul",
+        { className: "ingredients" },
+        items.map((ingredient, i) =>
+            React.createElement("li", { key: i }, ingredient)
+        )
+    )
+
+    ReactDOM.render(
+        ingredients,
+        document.getElementById('react-container')
+    )
+
+    console.log('ingredients', ingredients)
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/03-react-components/01-components.html b/chapter-04/03-react-components/01-components.html
new file mode 100644
index 00000000..28f3d8ef
--- /dev/null
+++ b/chapter-04/03-react-components/01-components.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Components</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    class IngredientsList extends React.Component {
+      render() {
+        return React.createElement("ul", {"className": "ingredients"},
+            React.createElement("li", null, "1 lb Salmon"),
+            React.createElement("li", null, "1 cup Pine Nuts"),
+            React.createElement("li", null, "2 cups Butter Lettuce"),
+            React.createElement("li", null, "1 Yellow Squash"),
+            React.createElement("li", null, "1/2 cup Olive Oil"),
+            React.createElement("li", null, "3 cloves of Garlic")
+        )
+      }
+    }
+
+    const list = React.createElement(IngredientsList, null, null)
+
+    ReactDOM.render(
+        list,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/03-react-components/02-components.html b/chapter-04/03-react-components/02-components.html
new file mode 100644
index 00000000..d8c9a798
--- /dev/null
+++ b/chapter-04/03-react-components/02-components.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Components</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    class IngredientsList extends React.Component {
+        render() {
+          return React.createElement("ul", {className: "ingredients"},
+              this.props.items.map((ingredient, i) =>
+                  React.createElement("li", { key: i }, ingredient)
+              )
+          )
+        }
+    }
+
+    const items = [
+      "1 lb Salmon",
+      "1 cup Pine Nuts",
+      "2 cups Butter Lettuce",
+      "1 Yellow Squash",
+      "1/2 cup Olive Oil",
+      "3 cloves of Garlic"
+    ]
+
+    ReactDOM.render(
+        React.createElement(IngredientsList, {items}, null),
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/03-react-components/03-components.html b/chapter-04/03-react-components/03-components.html
new file mode 100644
index 00000000..62c21455
--- /dev/null
+++ b/chapter-04/03-react-components/03-components.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Components</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    class IngredientsList extends React.Component {
+
+      renderListItem(ingredient, i) {
+        return React.createElement("li", { key: i }, ingredient)
+      }
+
+      render() {
+        return React.createElement("ul", {className: "ingredients"},
+            this.props.items.map(this.renderListItem)
+        )
+      }
+
+    }
+
+    const items = [
+        "1 lb Salmon",
+        "1 cup Pine Nuts",
+        "2 cups Butter Lettuce",
+        "1 Yellow Squash",
+        "1/2 cup Olive Oil",
+        "3 cloves of Garlic"
+    ]
+
+    ReactDOM.render(
+      React.createElement(IngredientsList, {items}, null),
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/03-react-components/04-components.html b/chapter-04/03-react-components/04-components.html
new file mode 100644
index 00000000..a4985f29
--- /dev/null
+++ b/chapter-04/03-react-components/04-components.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>React Components</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const IngredientsList = ({items}) =>
+        React.createElement("ul", {className: "ingredients"},
+            items.map((ingredient, i) =>
+                React.createElement("li", { key: i }, ingredient)
+            )
+        )
+
+    const items = [
+        "1 lb Salmon",
+        "1 cup Pine Nuts",
+        "2 cups Butter Lettuce",
+        "1 Yellow Squash",
+        "1/2 cup Olive Oil",
+        "3 cloves of Garlic"
+    ]
+
+    ReactDOM.render(
+      React.createElement(IngredientsList, {items}, null),
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/DOM-rendering-moods.css b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.css
similarity index 100%
rename from chapter-04/DOM-rendering-moods.css
rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.css
diff --git a/chapter-04/DOM-rendering-moods.html b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html
similarity index 100%
rename from chapter-04/DOM-rendering-moods.html
rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html
diff --git a/chapter-04/DOM-rendering-moods.js b/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js
similarity index 100%
rename from chapter-04/DOM-rendering-moods.js
rename to chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js
diff --git a/chapter-04/05-factories/01-factories.html b/chapter-04/05-factories/01-factories.html
new file mode 100644
index 00000000..820877a8
--- /dev/null
+++ b/chapter-04/05-factories/01-factories.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Factories</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/react-dom-factories@1.0.2/index.js"></script>
+
+<script>
+
+    const el = ReactDOMFactories.h1(null, "Baked Salmon")
+
+    ReactDOM.render(el, document.getElementById('react-container'))
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/05-factories/02-factories.html b/chapter-04/05-factories/02-factories.html
new file mode 100644
index 00000000..2adeb7fa
--- /dev/null
+++ b/chapter-04/05-factories/02-factories.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Factories</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/react-dom-factories@1.0.2/index.js"></script>
+
+<script>
+
+    const list = ReactDOMFactories.ul({"className": "ingredients"},
+      ReactDOMFactories.li(null, "1 lb Salmon"),
+      ReactDOMFactories.li(null, "1 cup Pine Nuts"),
+      ReactDOMFactories.li(null, "2 cups Butter Lettuce"),
+      ReactDOMFactories.li(null, "1 Yellow Squash"),
+      ReactDOMFactories.li(null, "1/2 cup Olive Oil"),
+      ReactDOMFactories.li(null, "3 cloves of Garlic")
+    )
+
+    ReactDOM.render(list, document.getElementById('react-container'))
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/05-factories/03-factories.html b/chapter-04/05-factories/03-factories.html
new file mode 100644
index 00000000..5952f762
--- /dev/null
+++ b/chapter-04/05-factories/03-factories.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Factories</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/react-dom-factories@1.0.2/index.js"></script>
+
+<script>
+
+    var items = [
+      "1 lb salmon",
+      "1 cup Pine Nuts",
+      "2 cups Butter Lettuce",
+      "1 Yellow Squash",
+      "1/2 cup Olive Oil",
+      "3 cloves of Garlic"
+    ]
+
+    var list = ReactDOMFactories.ul(
+        { className: "ingredients" },
+        items.map((ingredient, key) =>
+            ReactDOMFactories.li({key}, ingredient)
+        )
+    )
+
+    ReactDOM.render(
+        list,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/05-factories/04-factories.html b/chapter-04/05-factories/04-factories.html
new file mode 100644
index 00000000..c022b40c
--- /dev/null
+++ b/chapter-04/05-factories/04-factories.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Factories</title>
+</head>
+<body>
+
+<!-- Target Container -->
+<div id="react-container"></div>
+
+<!-- React Library & React DOM-->
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+<script>
+
+    const { render } = ReactDOM
+
+    const IngredientsList = ({ list }) =>
+        React.createElement('ul', null,
+            list.map((ingredient, i) =>
+                React.createElement('li', {key: i}, ingredient)
+            )
+    )
+
+    const Ingredients = React.createFactory(IngredientsList)
+
+    const list = [
+        "1 lb salmon",
+        "1 cup Pine Nuts",
+        "2 cups Butter Lettuce",
+        "1 Yellow Squash",
+        "1/2 cup Olive Oil",
+        "3 cloves of Garlic"
+    ]
+
+    render(
+        Ingredients({list}),
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-04/readme.md b/chapter-04/readme.md
index b5f637fc..6cb9c2a4 100644
--- a/chapter-04/readme.md
+++ b/chapter-04/readme.md
@@ -6,36 +6,35 @@ it comes time to debug.
 Samples
 --------
 
-#### Page Setup
+### Page Setup
 
-* HTML Document Setup ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/page-setup.html))
+  1. HTML Document Setup ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/01-page-setup.html))
+  2. HTML for a Recipe ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/01-page-setup/02-baked-salmon.html),
+[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/02-baked-salmon.html))
 
-#### React Elements
+### React Elements
 
-* HTML for a Recipe ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/baked-salmon.html),
-[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/baked-salmon.html))
-* React Elements ([1](http://jsbin.com/fumiyu/1/edit?js,output),
-[2](http://jsbin.com/fumiyu/2/edit?js,output),
-[3](http://jsbin.com/fumiyu/3/edit?js,output))
-* Constructing Elements with Data ([4](http://jsbin.com/fumiyu/4/edit?js,output),
-[5](http://jsbin.com/fumiyu/5/edit?js,output))
+  1. Rendering an Element ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/01-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/01-elements.html), [bin](http://jsbin.com/polufak/1/edit?js,output))
+  2. Rendering an Element with Properties ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/02-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/02-elements.html), [bin](http://jsbin.com/polufak/2/edit?js,output))
+  3. Rendering Lists ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/03-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/03-elements.html), [bin](http://jsbin.com/polufak/3/edit?js,output))
+  4. Mapping over Elements ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/04-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/04-elements.html), [bin](http://jsbin.com/polufak/4/edit?js,output))
+  5. Adding Keys ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/02-react-elements/05-elements.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/02-react-elements/05-elements.html), [bin](http://jsbin.com/polufak/5/edit?js,output))
 
-#### React Components
+### React Components
 
-* React.createClass ([1](http://jsbin.com/cezotew/1/edit?js,output),
-[2](http://jsbin.com/cezotew/2/edit?js,output),
-[3](http://jsbin.com/cezotew/3/edit?js,output))
-* React.Component ([4](http://jsbin.com/cezotew/4/edit?js,output))
-* Stateless Functional Component ([5](http://jsbin.com/cezotew/5/edit?js,output))
+  1. Rendering createElement  ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/01-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/01-components.html), [bin](http://jsbin.com/hutobus/1/edit?js,output))
+  2. Rendering List Items ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/02-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/02-components.html), [bin](http://jsbin.com/hutobus/2/edit?js,output))
+  3. Adding Class Methods ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/03-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/03-components.html), [bin](http://jsbin.com/hutobus/3/edit?js,output))
+  4. Stateless Functional Components ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/03-react-components/04-components.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/04-components.html), [bin](http://jsbin.com/hutobus/4/edit?js,output))
 
-#### DOM Rendering
+### DOM Rendering
 
-* team moods ([demo (firefox only)](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/DOM-rendering-moods.html),
-[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/DOM-rendering-moods.js))
+  1. team moods ([demo (firefox only)](http://rawgit.com/MoonHighway/learning-react/master/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.html),
+[code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/04-dom-rendering-moods/DOM-rendering-moods.js))
 
-#### Factories
+### Factories
 
-* DOM Factories ([1](http://jsbin.com/mebahe/1/edit?js,output),
-[2](http://jsbin.com/mebahe/2/edit?js,output),
-[3](http://jsbin.com/mebahe/3/edit?js,output))
-* Component Factories ([4](http://jsbin.com/mebahe/4/edit?js,output))
+  1. DOM Factories - h1 ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/01-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/01-factories.html), [bin](http://jsbin.com/sobubox/1/edit?js,output))
+  2. DOM Factories - ul ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/02-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/02-factories.html), [bin](http://jsbin.com/sobubox/2/edit?js,output))
+  3. DOM Factories - props ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/03-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/03-factories.html), [bin](http://jsbin.com/sobubox/3/edit?js,output))
+  4. Component Factories ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-04/05-factories/04-factories.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/05-factories/04-factories.html), [bin](http://jsbin.com/sobubox/4/edit?js,output))
diff --git a/chapter-05/page-setup.html b/chapter-05/page-setup.html
index 75f9a747..d45c9b74 100644
--- a/chapter-05/page-setup.html
+++ b/chapter-05/page-setup.html
@@ -5,11 +5,11 @@
     <title>React with JSX Samples</title>
 </head>
 <body>
-<div class="react-container"></div>
+<div id="react-container"></div>
 
-<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 
 <script type="text/babel">
 
diff --git a/chapter-05/readme.md b/chapter-05/readme.md
index 5c1270d1..9f73785d 100644
--- a/chapter-05/readme.md
+++ b/chapter-05/readme.md
@@ -17,7 +17,7 @@ Samples
 
 #### Recipes App with JSX and Webpack
 
-* Full App ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-05/recipe-app/dist/) 
+* Full App ([demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-05/recipe-app/dist/)
 [code](https://github.com/MoonHighway/learning-react/tree/master/chapter-05/recipe-app))
 * Instructions Component ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-05/recipe-app/src/components/Instructions.js))
 * Ingredient Component ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-05/recipe-app/src/components/Ingredient.js))
diff --git a/chapter-05/recipes.html b/chapter-05/recipes.html
index 9acb62de..a06b2961 100644
--- a/chapter-05/recipes.html
+++ b/chapter-05/recipes.html
@@ -3,9 +3,9 @@
 <head>
     <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
     <meta charset="utf-8">
-    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
-    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
     <title>React Recipes</title>
 </head>
 <body>
diff --git a/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html b/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html
new file mode 100644
index 00000000..d2e696e8
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>01 - Incorrect Properties don't always show errors</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients.length} Ingredients | </span>
+                  <span>{steps.length} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+      <Summary title="Peanut Butter and Jelly"
+               ingredients="peanut butter, jelly, bread"
+               steps="spread peanut butter and jelly between bread" />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html b/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html
new file mode 100644
index 00000000..7d27fea4
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>02 - createClass PropTypes with validation errors</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.array,
+            steps: PropTypes.array,
+            title: PropTypes.string
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients.length} Ingredients | </span>
+                  <span>{steps.length} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+        <Summary title="Peanut Butter and Jelly"
+               ingredients="peanut butter, jelly, bread"
+               steps="spread peanut butter and jelly between bread" />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html b/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html
new file mode 100644
index 00000000..8ffdee48
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>03 - createClass with PropTypes success</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.array,
+            steps: PropTypes.array,
+            title: PropTypes.string
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients.length} Ingredients | </span>
+                  <span>{steps.length} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    const ingredients = [
+        "Peanut Butter",
+        "Jelly",
+        "Bread"
+    ]
+
+    const steps = [
+        "Spread Peanut Butter on one slice of Bread",
+        "Spread Jelly on other slice of Bread",
+        "Put the bread together",
+        "Set out for 5 minutes to cool",
+        "Plate the dish on a paper towel"
+    ]
+
+    render(
+        <Summary title="Peanut Butter and Jelly"
+               ingredients={ingredients}
+               steps={steps} />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html b/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html
new file mode 100644
index 00000000..f51d89e7
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>04 - cryptic problems when props are missing</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.array,
+            steps: PropTypes.array,
+            title: PropTypes.string
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients.length} Ingredients | </span>
+                  <span>{steps.length} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+        <Summary />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html b/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html
new file mode 100644
index 00000000..3cc34821
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>05 - Better Errors with .isRequired</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.array.isRequired,
+            steps: PropTypes.array.isRequired,
+            title: PropTypes.string
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients.length} Ingredients | </span>
+                  <span>{steps.length} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+        <Summary />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/06-successful-validation.html b/chapter-06/01-property-validation-and-default-props/06-successful-validation.html
new file mode 100644
index 00000000..e01fbfee
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/06-successful-validation.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>06-successful-validation</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.number,
+            steps: PropTypes.number,
+            title: PropTypes.string
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients} Ingredients | </span>
+                  <span>{steps} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+        <Summary title="Peanut Butter and Jelly"
+            ingredients={3}
+            steps={5} />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/07-default-properties.html b/chapter-06/01-property-validation-and-default-props/07-default-properties.html
new file mode 100644
index 00000000..342c65c3
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/07-default-properties.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>07 - default props</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.number,
+            steps: PropTypes.number,
+            title: PropTypes.string
+        }
+
+        static defaultProps = {
+            ingredients: 0,
+            steps: 0,
+            title: "[untitled recipe]"
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients} Ingredients | </span>
+                  <span>{steps} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+        <Summary />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/08-custom-validation.html b/chapter-06/01-property-validation-and-default-props/08-custom-validation.html
new file mode 100644
index 00000000..6caf981b
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/08-custom-validation.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>08 - custom validation</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class Summary extends Component {
+
+        static propTypes = {
+            ingredients: PropTypes.number,
+            steps: PropTypes.number,
+            title: (props, propName) =>
+                (typeof props[propName] !== 'string') ?
+                    new Error("A title must be a string") :
+                    (props[propName].length > 20) ?
+                        new Error(`title is over 20 characters`) :
+                        null
+        }
+
+        static defaultProps = {
+          ingredients: 0,
+          steps: 0,
+          title: '[Untitled Recipe]'
+        }
+
+        render() {
+            const {ingredients, steps, title} = this.props
+            return (
+              <div className="summary">
+                <h1>{title}</h1>
+                <p>
+                  <span>{ingredients} Ingredients | </span>
+                  <span>{steps} Steps</span>
+                </p>
+              </div>
+            )
+        }
+
+    }
+
+    render(
+        <Summary title="really delicious eggs and biscuits" />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html b/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html
new file mode 100644
index 00000000..633926c6
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>09 - stateless prop validation</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const Summary = ({ingredients, steps, title}) =>
+        <div className="summary">
+            <h1>{title}</h1>
+            <p>
+                <span>{ingredients} Ingredients | </span>
+                <span>{steps} Steps</span>
+            </p>
+        </div>
+
+    Summary.propTypes = {
+        ingredients: PropTypes.number,
+        steps: PropTypes.number,
+        title: (props, propName) =>
+            (typeof props[propName] !== 'string') ?
+                new Error("A title must be a string") :
+                (props[propName].length > 20) ?
+                    new Error(`title is over 20 characters`) :
+                    null
+    }
+
+    Summary.defaultProps = {
+        ingredients: 0,
+        steps: 0,
+        title: '[Untitled Recipe]'
+    }
+
+    render(
+        <Summary title="really delicous eggs and biscuits" />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html b/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html
new file mode 100644
index 00000000..e2a795ba
--- /dev/null
+++ b/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>10 stateless default props</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const Summary = ({ingredients=0, steps=0, title='[Untitled Recipe]'}) =>
+        <div className="summary">
+            <h1>{title}</h1>
+            <p>
+                <span>{ingredients} Ingredients | </span>
+                <span>{steps} Steps</span>
+            </p>
+        </div>
+
+    Summary.propTypes = {
+        ingredients: PropTypes.number,
+        steps: PropTypes.number,
+        title: (props, propName) =>
+            (typeof props[propName] !== 'string') ?
+                new Error("A title must be a string") :
+                (props[propName].length > 20) ?
+                    new Error(`title is over 20 characters`) :
+                    null
+    }
+
+    render(
+        <Summary title="PB & J"  />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/01-color-component-before-refs.html b/chapter-06/02-refs/01-color-component-before-refs.html
new file mode 100644
index 00000000..f9d567b9
--- /dev/null
+++ b/chapter-06/02-refs/01-color-component-before-refs.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>01 - Color Component</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+      render() {
+          return (
+              <form onSubmit={e=>e.preventDefault()}>
+                  <input type="text"
+                         placeholder="color title..." required/>
+                  <input type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+    }
+
+    render(
+      <AddColorForm />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/02-color-component-with-refs.html b/chapter-06/02-refs/02-color-component-with-refs.html
new file mode 100644
index 00000000..cbb64313
--- /dev/null
+++ b/chapter-06/02-refs/02-color-component-with-refs.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>02 - Color Component with refs</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+
+      constructor(props) {
+        super(props)
+        this.submit = this.submit.bind(this)
+      }
+
+      submit(e) {
+        const { _title, _color } = this.refs
+        e.preventDefault()
+        alert(`New Color: ${_title.value} ${_color.value}`)
+        _title.value = ''
+        _color.value = '#000000'
+        _title.focus()
+      }
+
+      render() {
+          return (
+              <form onSubmit={this.submit}>
+                  <input ref="_title"
+                         type="text"
+                         placeholder="color title..." required/>
+                  <input ref="_color"
+                         type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+
+    }
+
+    render(
+      <AddColorForm />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/03-Color-Component-binding.html b/chapter-06/02-refs/03-Color-Component-binding.html
new file mode 100644
index 00000000..4a19ba56
--- /dev/null
+++ b/chapter-06/02-refs/03-Color-Component-binding.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>03 - Two way data binding</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+      constructor(props) {
+        super(props)
+        this.submit = this.submit.bind(this)
+      }
+      submit(e) {
+        const { _title, _color } = this.refs
+        e.preventDefault();
+        this.props.onNewColor(_title.value, _color.value)
+        _title.value = '';
+        _color.value = '#000000';
+        _title.focus();
+      }
+      render() {
+          return (
+              <form onSubmit={this.submit}>
+                  <input ref="_title"
+                         type="text"
+                         placeholder="color title..." required/>
+                  <input ref="_color"
+                         type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+    }
+
+    const logColor = (title, color) =>
+        console.log(`New Color: ${title} | ${color}`)
+
+    render(
+      <AddColorForm onNewColor={logColor} />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/04-two-way-data-todo.html b/chapter-06/02-refs/04-two-way-data-todo.html
new file mode 100644
index 00000000..e8999a8e
--- /dev/null
+++ b/chapter-06/02-refs/04-two-way-data-todo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>02 - Color Component with refs</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+      constructor(props) {
+        super(props)
+        this.submit = this.submit.bind(this)
+      }
+      submit(e) {
+        const { _title, _color } = this.refs
+        e.preventDefault();
+        this.props.onNewColor(_title.value, _color.value)
+        _title.value = '';
+        _color.value = '#000000';
+        _title.focus();
+      }
+      render() {
+          return (
+              <form onSubmit={this.submit}>
+                  <input ref="_title"
+                         type="text"
+                         placeholder="color title..." required/>
+                  <input ref="_color"
+                         type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+    }
+
+    render(
+      <AddColorForm onNewColor={
+          (title, color) => {
+              console.log(`TODO: add ${title} and ${color} to the list`)
+              console.log(`TODO: render UI with new Color`)
+          }}
+      />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/05-without-default-function.html b/chapter-06/02-refs/05-without-default-function.html
new file mode 100644
index 00000000..474f8a28
--- /dev/null
+++ b/chapter-06/02-refs/05-without-default-function.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>05 - without default props error!</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+
+      constructor(props) {
+        super(props)
+        this.submit = this.submit.bind(this)
+      }
+
+      submit(e) {
+        const { _title, _color } = this.refs
+        e.preventDefault();
+        this.props.onNewColor(_title.value, _color.value)
+        _title.value = '';
+        _color.value = '#000000';
+        _title.focus();
+      }
+
+      render() {
+          return (
+              <form onSubmit={this.submit}>
+                  <input ref="_title"
+                         type="text"
+                         placeholder="color title..." required/>
+                  <input ref="_color"
+                         type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+
+    }
+
+    render(
+      <AddColorForm />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/06-check-for-property.html b/chapter-06/02-refs/06-check-for-property.html
new file mode 100644
index 00000000..def01e6c
--- /dev/null
+++ b/chapter-06/02-refs/06-check-for-property.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>06 - checking for property</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+
+      constructor(props) {
+        super(props)
+        this.submit = this.submit.bind(this)
+      }
+
+      submit(e) {
+        const { _title, _color } = this.refs
+        e.preventDefault()
+
+        //
+        // Solution #1
+        //
+
+        if (this.props.onNewColor) {
+            this.props.onNewColor(_title.value, _color.value)
+        }
+
+        _title.value = '';
+        _color.value = '#000000';
+        _title.focus();
+      }
+
+      render() {
+          return (
+              <form onSubmit={this.submit}>
+                  <input ref="_title"
+                         type="text"
+                         placeholder="color title..." required/>
+                  <input ref="_color"
+                         type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+      
+    }
+
+    render(
+      <AddColorForm />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/07-default-property.html b/chapter-06/02-refs/07-default-property.html
new file mode 100644
index 00000000..ec5dc3fc
--- /dev/null
+++ b/chapter-06/02-refs/07-default-property.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>07 - with default props</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class AddColorForm extends Component {
+
+      //
+      // Solution #2
+      //
+
+      static propTypes = {
+          onNewColor: PropTypes.func
+      }
+
+      static defaultProps = {
+          onNewColor: f=>f
+      }
+
+      constructor(props) {
+        super(props)
+        this.submit = this.submit.bind(this)
+      }
+
+      submit(e) {
+        const { _title, _color } = this.refs
+        e.preventDefault()
+        this.props.onNewColor(_title.value, _color.value)
+        _title.value = ''
+        _color.value = '#000000'
+        _title.focus()
+      }
+
+      render() {
+          return (
+              <form onSubmit={this.submit}>
+                  <input ref="_title"
+                         type="text"
+                         placeholder="color title..." required/>
+                  <input ref="_color"
+                         type="color" required/>
+                  <button>ADD</button>
+              </form>
+          )
+      }
+
+    }
+
+    render(
+      <AddColorForm />,
+      document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/08-stateless-default-prop.html b/chapter-06/02-refs/08-stateless-default-prop.html
new file mode 100644
index 00000000..e6e34c66
--- /dev/null
+++ b/chapter-06/02-refs/08-stateless-default-prop.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>08 - stateless default property</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const AddColorForm = ({onNewColor}) => {
+
+        let _title, _color
+
+        const submit = e => {
+            e.preventDefault()
+            onNewColor(_title.value, _color.value)
+            _title.value = ''
+            _color.value = '#000000'
+            _title.focus()
+        }
+
+        return (
+            <form onSubmit={submit}>
+                <input ref={input => _title = input}
+                       type="text"
+                       placeholder="color title..." required/>
+                <input ref={input => _color = input}
+                       type="color" required/>
+                <button>ADD</button>
+            </form>
+        )
+
+    }
+
+    AddColorForm.propTypes = {
+        onNewColor: PropTypes.func
+    }
+
+    AddColorForm.defaultProps = {
+        onNewColor: f=>f
+    }
+
+    render(
+      <AddColorForm />,
+      document.getElementById('react-container')
+    )
+
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/02-refs/09-stateless-default-arg.html b/chapter-06/02-refs/09-stateless-default-arg.html
new file mode 100644
index 00000000..ac773f8d
--- /dev/null
+++ b/chapter-06/02-refs/09-stateless-default-arg.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>09 - stateless default argument</title>
+</head>
+<body>
+<div id="react-container"></div>
+
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const AddColorForm = ({onNewColor=f=>f}) => {
+
+        let _title, _color
+
+        const submit = e => {
+            e.preventDefault()
+            onNewColor(_title.value, _color.value)
+            _title.value = ''
+            _color.value = '#000000'
+            _title.focus()
+        }
+
+        return (
+            <form onSubmit={submit}>
+                <input ref={input => _title = input}
+                       type="text"
+                       placeholder="color title..." required/>
+                <input ref={input => _color = input}
+                       type="color" required/>
+                <button>ADD</button>
+            </form>
+        )
+
+    }
+
+    AddColorForm.propTypes = {
+        onNewColor: PropTypes.func
+    }
+
+    render(
+      <AddColorForm />, 
+      document.getElementById('react-container')
+    )
+
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/03-component-state/01-the-star-component.html b/chapter-06/03-component-state/01-the-star-component.html
new file mode 100644
index 00000000..31569174
--- /dev/null
+++ b/chapter-06/03-component-state/01-the-star-component.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>01 - The Star Component</title>
+</head>
+<body>
+<div id="react-container"></div>
+<link rel="stylesheet" type="text/css" href="styles.css" />
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { render } = ReactDOM
+
+    const Star = ({ selected=false, onClick=f=>f }) =>
+      <div className={(selected) ? "star selected" : "star"}
+           onClick={onClick}>
+      </div>
+
+    Star.propTypes = {
+      selected: PropTypes.bool,
+      onClick: PropTypes.func
+    }
+
+    render(
+      <Star selected={true} onClick={() => console.log('Star Click')} />,
+      document.getElementById('react-container')
+    )
+
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/03-component-state/02-the-star-rating-component.html b/chapter-06/03-component-state/02-the-star-rating-component.html
new file mode 100644
index 00000000..89ce832e
--- /dev/null
+++ b/chapter-06/03-component-state/02-the-star-rating-component.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>02 - the star rating component</title>
+</head>
+<body>
+<div id="react-container"></div>
+<link rel="stylesheet" type="text/css" href="styles.css" />
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const Star = ({ selected=false, onClick=f=>f }) =>
+        <div className={(selected) ? "star selected" : "star"}
+             onClick={onClick}>
+        </div>
+
+    Star.propTypes = {
+        selected: PropTypes.bool,
+        onClick: PropTypes.func
+    }
+
+    class StarRating extends Component {
+
+        static propTypes = {
+            totalStars: PropTypes.number
+        }
+
+        static defaultProps = {
+            totalStars: 5
+        }
+
+        constructor(props) {
+            super(props)
+            this.state = {
+                starsSelected: 0
+            }
+            this.change = this.change.bind(this)
+        }
+
+        change(starsSelected) {
+            this.setState({starsSelected})
+        }
+
+        render() {
+            const {totalStars} = this.props
+            const {starsSelected} = this.state
+            return (
+                <div className="star-rating">
+                    {[...Array(totalStars)].map((n, i) =>
+                        <Star key={i}
+                              selected={i<starsSelected}
+                              onClick={() => this.change(i+1)}
+                        />
+                    )}
+                    <p>{starsSelected} of {totalStars} stars</p>
+                </div>
+            )
+        }
+
+    }
+
+    render(
+        <StarRating />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/03-component-state/03-setting-state-from-props.html b/chapter-06/03-component-state/03-setting-state-from-props.html
new file mode 100644
index 00000000..637f8427
--- /dev/null
+++ b/chapter-06/03-component-state/03-setting-state-from-props.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>03 - setting state from props</title>
+</head>
+<body>
+<div id="react-container"></div>
+<link rel="stylesheet" type="text/css" href="styles.css" />
+<script src="https://unpkg.com/prop-types/prop-types.js"></script>
+<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+<script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const Star = ({ selected=false, onClick=f=>f }) =>
+        <div className={(selected) ? "star selected" : "star"}
+             onClick={onClick}>
+        </div>
+
+    Star.propTypes = {
+        selected: PropTypes.bool,
+        onClick: PropTypes.func
+    }
+
+    class StarRating extends Component {
+
+        static propTypes = {
+            totalStars: PropTypes.number
+        }
+
+        static defaultProps = {
+            totalStars: 5
+        }
+
+        constructor(props) {
+            super(props)
+            this.state = {
+                starsSelected: props.starsSelected || 0
+            }
+            this.change = this.change.bind(this)
+        }
+
+        change(starsSelected) {
+            this.setState({starsSelected})
+        }
+
+        render() {
+            const {totalStars} = this.props
+            const {starsSelected} = this.state
+            return (
+                <div className="star-rating">
+                    {[...Array(totalStars)].map((n, i) =>
+                        <Star key={i}
+                              selected={i<starsSelected}
+                              onClick={() => this.change(i+1)}
+                        />
+                    )}
+                    <p>{starsSelected} of {totalStars} stars</p>
+                </div>
+            )
+        }
+
+    }
+
+    render(
+        <StarRating totalStars={7} starsSelected={3} />,
+        document.getElementById('react-container')
+    )
+
+</script>
+
+</body>
+</html>
diff --git a/chapter-06/03-component-state/styles.css b/chapter-06/03-component-state/styles.css
new file mode 100644
index 00000000..6c00857f
--- /dev/null
+++ b/chapter-06/03-component-state/styles.css
@@ -0,0 +1,41 @@
+html, body, #react-container {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#react-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.star-rating {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.star {
+  cursor: pointer;
+  width: 2em;
+  height: 2em;
+  background-color: grey;
+  -webkit-clip-path:
+    polygon(50% 0%, 63% 38%, 100% 38%,
+      69% 59%, 82% 100%, 50% 75%,
+      18% 100%, 31% 59%, 0% 38%, 37% 38%);
+  clip-path: polygon(50% 0%, 63% 38%,
+    100% 38%, 69% 59%, 82% 100%,
+    50% 75%, 18% 100%, 31% 59%,
+    0% 38%, 37% 38%);
+}
+
+.star.selected {
+  background-color: red;
+}
+
+p {
+  flex-basis: 100%;
+  text-align: center;
+}
diff --git a/chapter-06/readme.md b/chapter-06/readme.md
index 39359e93..03897724 100644
--- a/chapter-06/readme.md
+++ b/chapter-06/readme.md
@@ -1,4 +1,4 @@
-Chapter 6 : Props state and the component tree
+Chapter 6 : Props, State, and the Component Tree
 ==================
 Data handling within component trees is one of the key advantages of working with React. There are techniques that you
 can use when working with data in React components that will make your life much easier in the long run.
@@ -6,42 +6,53 @@ can use when working with data in React components that will make your life much
 Samples
 --------
 
-#### Property Validation and default Props
-
-* Validation with React.createClass ([1](http://jsbin.com/nusiyu/1/edit?js,output),
-[2](http://jsbin.com/nusiyu/2/edit?js,console,output),
-[3](http://jsbin.com/nusiyu/3/edit?js,output),
-[4](http://jsbin.com/nusiyu/4/edit?js,console,output),
-[5](http://jsbin.com/nusiyu/5/edit?js,console,output),
-[6](http://jsbin.com/nusiyu/6/edit?js,output))
-* default properties with React.createClass ([1](http://jsbin.com/curalu/1/edit?js,output))
-* customValidation ([1](http://jsbin.com/fefaqe/1/edit?js,console,output))
-* Properties with ES6 classes ([1](http://jsbin.com/zenohu/1/edit?js,output))
-* Properties with Stateless Functional Components ([2](http://jsbin.com/zenohu/2/edit?js,output),
-[3](http://jsbin.com/zenohu/3/edit?js,output))
-* ES7 static properties ([4](http://jsbin.com/zenohu/4/edit?js,output))
-
-#### Refs
-
-* Color Component with Refs ([1](http://jsbin.com/kohigem/1/edit?js,output),
-[2](http://jsbin.com/kohigem/2/edit?js,output))
-* Two-way Data Binding ([3](http://jsbin.com/kohigem/3/edit?js,console,output),
-[4](http://jsbin.com/kohigem/4/edit?js,console,output))
-* Default Function Properties ([5](http://jsbin.com/kohigem/5/edit?js,console,output),
-[6](http://jsbin.com/kohigem/6/edit?js,console,output),
-[7](http://jsbin.com/kohigem/7/edit?js,console,output))
-* Refs In Stateless Functional Components ([8](http://jsbin.com/kohigem/8/edit?js,console,output),
-[9](http://jsbin.com/kohigem/9/edit?js,console,output))
-
-#### Component State
-
-* The Star Component ([1](http://jsbin.com/puduho/1/edit?js,output))
-* Using State with createClass ([1](http://jsbin.com/zebilo/1/edit?js,output))
-* Using State in ES6 Components ([2](http://jsbin.com/zebilo/2/edit?js,output))
-* Setting State from Properties ([3](http://jsbin.com/zebilo/3/edit?js,output),
-[4](http://jsbin.com/zebilo/4/edit?js,output))
-
-#### State within the Component Tree
-
-* The color organizer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/color-organizer/dist/index.html),
+### Property Validation and default Props
+
+#### Validation with `prop-types`
+
+  1. Incorrect properties do not always show errors (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/01-incorrect-props-no-error.html), [bin](http://jsbin.com/pozozi/1/edit?js,output))
+  2. Introducing `prop-types` npm ❌ (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/02-introducing-prop-types-npm.html), [bin](http://jsbin.com/pozozi/2/edit?js,console,output))
+  3. PropTypes success (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/03-prop-types-success.html), [bin](http://jsbin.com/pozozi/3/edit?js,output))
+  4. cryptic problems when prop missing ❌ (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/04-cryptic-problems-when-prop-missing.html), [bin](http://jsbin.com/pozozi/4/edit?js,console,output))
+  5. better errors with .isRequired ❌ (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/05-better-errors-with-is-required.html), [bin](http://jsbin.com/pozozi/5/edit?js,console,output))
+  6. catching validation errors ❌ (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/06-successful-validation.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/06-successful-validation.html), [bin](http://jsbin.com/pozozi/6/edit?js,output))
+  7. default properties (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/07-default-properties.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/07-default-properties.html), [bin](http://jsbin.com/pozozi/7/edit?js,output))
+  8. custom validation ❌ (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/08-custom-validation.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/08-custom-validation.html), [bin](http://jsbin.com/pozozi/8/edit?js,console,output))
+  9. stateless prop validation ❌ (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/09-stateless-prop-validation.html), [bin](http://jsbin.com/pozozi/9/edit?js,output))  
+  10. stateless default props (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/10-stateless-default-props.html), [bin](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/01-property-validation-and-default-props/http://jsbin.com/pozozi/10/edit?js,output))  
+
+### Refs
+
+  1. Color component ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/01-color-component-before-refs.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/01-color-component-before-refs.html), [bin](http://jsbin.com/funeyol/1/edit?js,output))
+  2. Color component with refs ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/02-color-component-with-refs.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/02-color-component-with-refs.html), [bin](http://jsbin.com/funeyol/2/edit?js,output))
+  3. Two way data binding ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/03-Color-Component-binding.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/03-Color-Component-binding.html), [bin](http://jsbin.com/funeyol/3/edit?js,console,output))
+  4. Two way data todo note ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/04-two-way-data-todo.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/04-two-way-data-todo.html), [bin](http://jsbin.com/funeyol/4/edit?js,console,output))
+  5. without a default function prop ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/05-without-default-function.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/05-without-default-function.html), [bin](http://jsbin.com/funeyol/5/edit?js,console,output))
+  6. checking for the function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/06-check-for-property.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/06-check-for-property.html), [bin](http://jsbin.com/funeyol/6/edit?js,console,output))
+  7. using a default function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/07-default-property.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/07-default-property.html), [bin](http://jsbin.com/funeyol/7/edit?js,console,output))
+  8. stateless default function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/08-stateless-default-prop.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/08-stateless-default-prop.html), [bin](http://jsbin.com/funeyol/8/edit?js,console,output))
+  9. stateless default argument function property ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/02-refs/09-stateless-default-arg.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/02-refs/09-stateless-default-arg.html), [bin](http://jsbin.com/funeyol/9/edit?js,console,output))
+
+### Component State
+
+  1. The Star Component (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/03-component-state/01-the-star-component.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/03-component-state/01-the-star-component.html), [bin](http://jsbin.com/budanem/1/edit?js,output))
+  2. The Star Rating Component Class (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/03-component-state/02-the-star-rating-component.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/03-component-state/02-the-star-rating-component.html), [bin](http://jsbin.com/budanem/2/edit?js,output))
+  3. Setting State From Props (
+    [demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/03-component-state/03-setting-state-from-props.html), [code](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/03-component-state/03-setting-state-from-props.html), [bin](http://jsbin.com/budanem/3/edit?js,output))
+
+### State within the Component Tree
+
+1. Color Organizer App ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-06/color-organizer/dist/index.html),
 [source](https://github.com/MoonHighway/learning-react/blob/master/chapter-06/color-organizer))
diff --git a/chapter-07/01-mounting-lifecycle/01-mounting.html b/chapter-07/01-mounting-lifecycle/01-mounting.html
new file mode 100644
index 00000000..9accb5ef
--- /dev/null
+++ b/chapter-07/01-mounting-lifecycle/01-mounting.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Mounting Lifecycle</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+  
+    const getFakeMembers = count => new Promise((resolves, rejects) => {
+      const api = `https://api.randomuser.me/?nat=US&results=${count}`
+      const request = new XMLHttpRequest()
+      request.open('GET', api)
+      request.onload = () => (request.status == 200) ?
+        resolves(JSON.parse(request.response).results) :
+        reject(Error(request.statusText))
+      request.onerror = (err) => rejects(err)
+      request.send()
+    })
+
+    getFakeMembers(3).then(
+    members => console.log(
+      members.map(m=>m.name.first).join(',')
+    )
+  )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/01-mounting-lifecycle/02-mounting.html b/chapter-07/01-mounting-lifecycle/02-mounting.html
new file mode 100644
index 00000000..4268d65c
--- /dev/null
+++ b/chapter-07/01-mounting-lifecycle/02-mounting.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Mounting Lifecycle</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+  const { Component } = React
+  const { render } = ReactDOM
+
+  const getFakeMembers = count => new Promise((resolves, rejects) => {
+      const api = `https://api.randomuser.me/?nat=US&results=${count}`
+      const request = new XMLHttpRequest()
+      request.open('GET', api)
+      request.onload = () => (request.status == 200) ?
+        resolves(JSON.parse(request.response).results) :
+        reject(Error(request.statusText))
+      request.onerror = (err) => rejects(err)
+      request.send()
+  })
+
+  const Member = ({ email, picture, name, location }) =>
+      <div className="member">
+          <img src={picture.thumbnail} alt="" />
+          <h1>{name.first} {name.last}</h1>
+          <p><a href={"mailto:" + email}>{email}</a></p>
+          <p>{location.city}, {location.state}</p>
+      </div>
+
+
+  class MemberList extends Component {
+
+      constructor() {
+          super()
+          this.state = {
+              members: [],
+              loading: false,
+              error: null
+          }
+      }
+
+      componentWillMount() {
+          this.setState({loading: true})
+          getFakeMembers(this.props.count).then(
+              members => {
+                  this.setState({members, loading: false})
+              },
+              error => {
+                  this.setState({error, loading: false})
+              }
+          )
+      }
+
+      componentWillUpdate() {
+          console.log('updating lifecycle')
+      }
+
+      render() {
+          const { members, loading, error } = this.state
+          return (
+              <div className="member-list">
+                  {(loading) ?
+                      <span>Loading Members</span> :
+                      (members.length) ?
+                          members.map((user, i) =>
+                              <Member key={i} {...user} />
+                          ) :
+                          <span>0 members loaded...</span>
+                  }
+                  {(error) ? <p>Error Loading Members: error</p> : ""}
+        </div>
+      )
+    }
+  }
+
+  render(
+      <MemberList count={5} />,
+      document.getElementById('react-container')
+  )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/02-updating-lifecycle/01-updating.html b/chapter-07/02-updating-lifecycle/01-updating.html
new file mode 100644
index 00000000..546253e6
--- /dev/null
+++ b/chapter-07/02-updating-lifecycle/01-updating.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Updating Lifecycle</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+  const { Component } = React
+  const { render } = ReactDOM
+
+  class HiddenMessage extends Component {
+
+      constructor(props) {
+          super(props)
+          this.state = {
+              hidden: (props.hide) ? props.hide : true
+          }
+      }
+
+      render() {
+          const { children } = this.props
+          const { hidden } = this.state
+          return (
+              <p>
+                  {(hidden) ?
+                      children.replace(/[a-zA-Z0-9]/g, "x") :
+                      children
+                  }
+              </p>
+          )
+      }
+
+  }
+
+  class HiddenMessages extends Component {
+
+      constructor(props) {
+          super(props)
+          this.state = {
+              messages: [
+                  "The crow crows after midnight",
+                  "Bring a watch and dark clothes to the spot",
+                  "Jericho Jericho Go"
+              ],
+              showing: -1
+          }
+      }
+
+      //
+      //  Problem: we should a message every second
+      //
+
+      componentWillMount() {
+          this.interval = setInterval(() => {
+              this.setState(prevState => {
+                let { showing, messages } = prevState
+                showing = (++showing >= messages.length) ?
+                  -1 : showing
+                return {showing}
+              })
+          }, 1000)
+      }
+
+      componentWillUnmount() {
+          clearInterval(this.interval)
+      }
+
+      render() {
+          const { messages, showing } = this.state
+          return (
+              <div className="hidden-messages">
+                  {messages.map((message, i) =>
+                      <HiddenMessage key={i}
+                                     hide={(i!==showing)}>
+                          {message}
+                      </HiddenMessage>
+                  )}
+              </div>
+          )
+      }
+  }
+
+  render(
+      <HiddenMessages />,
+      document.getElementById('react-container')
+  )
+
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/02-updating-lifecycle/02-updating.html b/chapter-07/02-updating-lifecycle/02-updating.html
new file mode 100644
index 00000000..385095cf
--- /dev/null
+++ b/chapter-07/02-updating-lifecycle/02-updating.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Updating Lifecycle</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+  const { Component } = React
+  const { render } = ReactDOM
+
+  class HiddenMessage extends Component {
+
+      constructor(props) {
+          super(props)
+          this.state = {
+              hidden: (props.hide) ? props.hide : true
+          }
+      }
+
+      //
+      // Solution
+      //
+
+      componentWillReceiveProps(nextProps) {
+          this.setState({hidden: nextProps.hide})
+      }
+
+      render() {
+          const { children } = this.props
+          const { hidden } = this.state
+          return (
+              <p>
+                  {(hidden) ?
+                      children.replace(/[a-zA-Z0-9]/g, "x") :
+                      children
+                  }
+              </p>
+          )
+      }
+
+  }
+
+  class HiddenMessages extends Component {
+
+      constructor(props) {
+          super(props)
+          this.state = {
+              messages: [
+                  "The crow crows after midnight",
+                  "Bring a watch and dark clothes to the spot",
+                  "Jericho Jericho Go"
+              ],
+              showing: -1
+          }
+      }
+
+      componentWillMount() {
+          this.interval = setInterval(() => {
+              this.setState(prevState => {
+                let { showing, messages } = prevState
+                showing = (++showing >= messages.length) ?
+                  -1 : showing
+                return {showing}
+              })
+          }, 1000)
+      }
+
+      componentWillUnmount() {
+          clearInterval(this.interval)
+      }
+
+      render() {
+          const { messages, showing } = this.state
+          return (
+              <div className="hidden-messages">
+                  {messages.map((message, i) =>
+                      <HiddenMessage key={i}
+                                     hide={(i!==showing)}>
+                          {message}
+                      </HiddenMessage>
+                  )}
+              </div>
+          )
+      }
+  }
+
+  render(
+      <HiddenMessages />,
+      document.getElementById('react-container')
+  )
+
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/03-children/01-children.html b/chapter-07/03-children/01-children.html
new file mode 100644
index 00000000..83e526c2
--- /dev/null
+++ b/chapter-07/03-children/01-children.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Children</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Children } = React
+    const { render } = ReactDOM
+
+    const Display = ({ ifTruthy=true, children }) =>
+        (ifTruthy) ?
+            Children.only(children) :
+            null
+
+    const age = 22
+
+    render(
+        <Display ifTruthy={age >= 21}>
+            <h1>You can enter</h1>
+        </Display>,
+        document.getElementById('react-container')
+    )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/03-children/02-children.html b/chapter-07/03-children/02-children.html
new file mode 100644
index 00000000..5ab68bf0
--- /dev/null
+++ b/chapter-07/03-children/02-children.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Children</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const { Children } = React
+      const { render } = ReactDOM
+
+      const findChild = (children, child) =>
+        Children.toArray(children)
+                .filter(c => c.type === child )[0]
+
+      const WhenTruthy = ({children}) =>
+          Children.only(children)
+
+      const WhenFalsy = ({children}) =>
+          Children.only(children)
+
+      const Display = ({ ifTruthy=true, children }) =>
+          (ifTruthy) ?
+              findChild(children, WhenTruthy) :
+              findChild(children, WhenFalsy)
+
+      const age = 19
+
+      render(
+          <Display ifTruthy={age >= 21}>
+              <WhenTruthy>
+                 <h1>You can Enter</h1>
+              </WhenTruthy>
+              <WhenFalsy>
+                 <h1>Beat it Kid</h1>
+              </WhenFalsy>
+          </Display>,
+          document.getElementById('react-container')
+      )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/03-children/03-children.html b/chapter-07/03-children/03-children.html
new file mode 100644
index 00000000..391c987c
--- /dev/null
+++ b/chapter-07/03-children/03-children.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Children</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const { Children, PropTypes } = React
+      const { render } = ReactDOM
+
+      const findChild = (children, child) =>
+        Children.toArray(children)
+                .filter(c => c.type === child )[0]
+
+      const WhenTruthy = ({children}) =>
+          Children.only(children)
+
+      const WhenFalsy = ({children}) =>
+          Children.only(children)
+
+      const Display = ({ ifTruthy=true, children }) =>
+          (ifTruthy) ?
+              findChild(children, WhenTruthy) :
+              findChild(children, WhenFalsy)
+
+      const age = 22
+
+      render(
+          <Display ifTruthy={age >= 21}>
+              <WhenTruthy>
+                 <h1>You can Enter</h1>
+              </WhenTruthy>
+              <WhenFalsy>
+                 <h1>Beat it Kid</h1>
+              </WhenFalsy>
+          </Display>,
+          document.getElementById('react-container')
+      )
+
+      </script>
+</body>
+</html>
diff --git a/chapter-07/04-library-integration/01-libraries.html b/chapter-07/04-library-integration/01-libraries.html
new file mode 100644
index 00000000..938fd143
--- /dev/null
+++ b/chapter-07/04-library-integration/01-libraries.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+
+  const List = ({items}) =>
+      <div className="list">
+        {items.map((x,i) => <li key={i}>{x}</li>)}
+      </div>
+
+    const render = items =>
+        ReactDOM.render(
+          <List items={items} />,
+          document.getElementById('react-container')
+        )
+
+    fetch('https://restcountries.eu/rest/v1/all')
+        .then(response => response.json())
+        .then(json => json.map(country => country.name))
+        .then(countryNames => render(countryNames))
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/04-library-integration/02-libraries.html b/chapter-07/04-library-integration/02-libraries.html
new file mode 100644
index 00000000..56830c2c
--- /dev/null
+++ b/chapter-07/04-library-integration/02-libraries.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+  const { Component } = React
+  const { render } = ReactDOM
+
+  class CountryList extends Component {
+
+      constructor(props) {
+        super(props)
+        this.state = {
+          countryNames: [],
+          loading: false
+        }
+    }
+
+    componentWillMount() {
+      this.setState({ loading: true })
+      fetch('https://restcountries.eu/rest/v1/all')
+        .then(response => response.json())
+        .then(json => json.map(country => country.name))
+        .then(countryNames => this.setState({countryNames, loading: false}))
+    }
+
+    render() {
+      const { countryNames, loading } = this.state
+      return (loading) ?
+             <div>Loading Country Names...</div> :
+             (!countryNames.length) ?
+               <div>No country Names</div> :
+               <ul>
+                {countryNames.map((x,i) => <li key={i}>{x}</li>)}
+               </ul>
+        }
+
+    }
+
+    render(
+        <CountryList />,
+        document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/04-library-integration/03-libraries.html b/chapter-07/04-library-integration/03-libraries.html
new file mode 100644
index 00000000..f5cf0c68
--- /dev/null
+++ b/chapter-07/04-library-integration/03-libraries.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { render } = ReactDOM
+    const { Component } = React
+
+    class Timeline extends Component {
+
+        constructor(props) {
+          super(props)
+          this.state = this.prepState(props)
+          this.drawTimeline = this.drawTimeline.bind(this)
+        }
+
+        prepState({data=[], min=100, max=700}) {
+          const times = d3.extent(data.map(event => event.Date))
+          const range = [min, max]
+          return {data, times, range}
+        }
+
+        drawTimeline() {
+          let group
+          const { data, times, range } = this.state
+          const { target } = this.refs
+          const scale = d3.time.scale().domain(times).range(range)
+
+          target.innerHTML = ''
+
+          d3.select(target)
+            .append('svg')
+            .attr('height', 200)
+            .attr('width', range[1] + 100)
+
+          group = d3.select(target.children[0])
+                    .selectAll('g')
+                    .data(data)
+                    .enter()
+                    .append('g')
+                    .attr('transform', (d, i) => 'translate(' + scale(d.Date) + ', 0)')
+
+          group.append('circle')
+               .attr('cy', 160)
+               .attr('r', 5)
+               .style('fill', 'blue')
+
+          group.append('text')
+           .text(d => d.Date + " - " + d["Event Title"])
+            .style('font-size', 10)
+            .attr('y', 115)
+            .attr('x', -95)
+            .attr('transform', 'rotate(-45)')
+        }
+
+        componentWillReceiveProps(nextProps) {
+          this.setState(this.prepState(nextProps))
+        }
+
+        shouldComponentUpdate(nextProps, nextState) {
+          return nextState.data !== this.state.data
+        }
+
+        componentDidMount() {
+          this.drawTimeline()
+        }
+
+        componentDidUpdate() {
+          this.drawTimeline()
+        }
+
+        render() {
+          return (
+            <div className="timeline">
+              <h1>{this.props.name} Timeline</h1>
+              <div ref="target"></div>
+            </div>
+          )
+        }
+
+    }
+
+    class App extends Component {
+
+    constructor(props) {
+      super(props)
+      this.state = {
+        showing: 'alex',
+        timelines: {
+          alex: [
+            {
+              "Date": 1977,
+              "Event Title": "Born",
+              "Event Description": "Born March 28 1977"
+            },
+            {
+              "Date": 1980,
+              "Event Title": "Started Sking",
+              "Event Description": "Starting skiing at Ski Liberty"
+            },
+            {
+              "Date": 1995,
+              "Event Title": "Yorktown Graduation",
+              "Event Description": "Graduated from Yorktown High School"
+            },
+            {
+              "Date": 1997,
+              "Event Title": "Georgetown",
+              "Event Description": "Transferred to Georgetown University"
+            },
+            {
+              "Date": 2002,
+              "Event Title": "Chicago",
+              "Event Description": "Moved To Chicago"
+            },
+            {
+              "Date": 2007,
+              "Event Title": "Met Eve",
+              "Event Description": "Met future wife Eve Porcello"
+            },
+            {
+              "Date": 2010,
+              "Event Title": "Seattle",
+              "Event Description": "Moved to Seattle with Eve"
+            },
+            {
+              "Date": 2011,
+              "Event Title": "Sonoma",
+              "Event Description": "Moved to Sonoma CA with Eve"
+            },
+            {
+              "Date": 2012,
+              "Event Title": "Tahoe",
+              "Event Description": "Moved to Tahoe Eve"
+            },
+            {
+              "Date": 2016,
+              "Event Title": "Published first book",
+              "Event Description": "Published Learning React with Eve Porcello"
+            }
+          ],
+          skiing: [
+            {
+              "Date": 1879,
+              "Event Title": "Ski Manufacturing Begins",
+              "Event Description": "Started by Norwegian immigrant in Minnesota"
+            },
+            {
+              "Date": 1882,
+              "Event Title": "US Ski Club Founded",
+              "Event Description": "Started in Berlin, New Hampshire and is still active"
+            },
+            {
+              "Date": 1924,
+              "Event Title": "First Winter Olympics Held",
+              "Event Description": "Nordic ski events only"
+            },
+            {
+              "Date": 1926,
+              "Event Title": "First US Ski Shop Opens",
+              "Event Description": "Founded by Oscar Hambro from Norway"
+            },
+            {
+              "Date": 1932,
+              "Event Title": "North Americas First Rope Tow Spins",
+              "Event Description": "Built in Shawbridge, Quebec"
+            },
+            {
+              "Date": 1936,
+              "Event Title": "First Chairlift Spins",
+              "Event Description": "Built in Sun Valley, ID"
+            },
+            {
+              "Date": 1949,
+              "Event Title": "Squaw Valley, Mad River Glen Open",
+              "Event Description": "Rippers gonna rip"
+            },
+            {
+              "Date": 1958,
+              "Event Title": "First Gondola Spins",
+              "Event Description": "Built in New Hampshire"
+            },
+            {
+              "Date": 1964,
+              "Event Title": "Plastic Buckle Boots Available",
+              "Event Description": "Life is better"
+            }
+          ]
+        }
+      }
+    }
+
+    render() {
+      const { timelines, showing } = this.state
+      return (
+        <div className="app">
+          <Timeline data={timelines[showing]} name={showing} />
+          <div>
+             <button onClick={() => this.setState({showing: 'alex' })}>Alex</button>
+             <button onClick={() => this.setState({showing: 'skiing' })}>Skiing</button>
+          </div>
+        </div>
+      )
+    }
+
+    }
+
+    render(
+        <App />,
+        document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/04-library-integration/04-libraries.html b/chapter-07/04-library-integration/04-libraries.html
new file mode 100644
index 00000000..7061d189
--- /dev/null
+++ b/chapter-07/04-library-integration/04-libraries.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const historicDatesForSkiing = [
+      {
+          year: 1879,
+          event: "Ski Manufacturing Begins"
+      },
+      {
+          year: 1882,
+          event: "US Ski Club Founded"
+      },
+      {
+          year: 1924,
+          event: "First Winter Olympics Held"
+      },
+      {
+          year: 1926,
+          event: "First US Ski Shop Opens"
+      },
+      {
+          year: 1932,
+          event: "North Americas First Rope Tow Spins"
+      },
+      {
+          year: 1936,
+          event: "First Chairlift Spins"
+      },
+      {
+          year: 1949,
+          event: "Squaw Valley, Mad River Glen Open"
+      },
+      {
+          year: 1958,
+          event: "First Gondola Spins"
+      },
+      {
+          year: 1964,
+          event: "Plastic Buckle Boots Available"
+      }
+    ]
+
+    const Canvas = ({children}) =>
+        <svg height="200" width="800">
+          {children}
+        </svg>
+
+    const TimelineDot = ({position, txt}) =>
+        <g transform={`translate(${position},0)`}>
+          <circle cy={160} r={5} style={{fill: 'blue'}} />
+          <text y={115} x={-95} transform="rotate(-45)" style={{fontSize: '10px'}}>{txt}</text>
+        </g>
+
+    class Timeline extends Component {
+
+      constructor({data=[]}) {
+          const times = d3.extent(data.map(d => d.year))
+          const range = [50, 750]
+          super({data})
+          this.scale = d3.time.scale().domain(times).range(range)
+          this.state = {data, times, range}
+      }
+
+      render() {
+          const { data } = this.state
+          const { scale } = this
+          return (
+              <div className="timeline">
+                  <h1>{this.props.name} Timeline</h1>
+                  <Canvas>
+                      {data.map((d, i) =>
+                          <TimelineDot position={scale(d.year)} txt={`${d.year} - ${d.event}`}/>
+                      )}
+                  </Canvas>
+              </div>
+          )
+      }
+
+    }
+
+    render(
+        <Timeline name="History of Skiing"
+                data={historicDatesForSkiing} />,
+        document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/05-higher-order-components/01-hocs.html b/chapter-07/05-higher-order-components/01-hocs.html
new file mode 100644
index 00000000..15c94b36
--- /dev/null
+++ b/chapter-07/05-higher-order-components/01-hocs.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Higher Order Components</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    class PeopleList extends Component {
+
+      constructor(props) {
+          super(props)
+          this.state = {
+              data: [],
+              loaded: false,
+              loading: false
+          }
+      }
+
+      componentWillMount() {
+        this.setState({loading:true})
+        fetch('https://randomuser.me/api/?results=10')
+            .then(response => response.json())
+            .then(obj => obj.results)
+            .then(data => this.setState({
+                  loaded: true,
+                  loading: false,
+                  data
+              }))
+      }
+
+      render() {
+          const { data, loading, loaded } = this.state
+          return (loading) ?
+              <div>Loading...</div> :
+              <ol className="people-list">
+                  {data.map((person, i) => {
+                      const {first, last} = person.name
+                      return <li key={i}>{first} {last}</li>
+                  })}
+              </ol>
+      }
+    }
+    render(
+      <PeopleList />,
+      document.getElementById('react-container')
+    )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/05-higher-order-components/02-hocs.html b/chapter-07/05-higher-order-components/02-hocs.html
new file mode 100644
index 00000000..2960ab18
--- /dev/null
+++ b/chapter-07/05-higher-order-components/02-hocs.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Higher Order Components</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const DataComponent = (ComposedComponent, url) =>
+      class DataComponent extends Component {
+
+          constructor(props) {
+              super(props)
+              this.state = {
+                  data: [],
+                  loading: false,
+                  loaded: false
+              }
+          }
+
+          componentWillMount() {
+              this.setState({loading:true})
+              fetch(url)
+                  .then(response => response.json())
+                  .then(data => this.setState({
+                      loaded: true,
+                      loading: false,
+                      data
+                  }))
+          }
+
+          render() {
+              return (
+                  <div className="data-component">
+                      {(this.state.loading) ?
+                          <div>Loading...</div> :
+                          <ComposedComponent {...this.state}
+                                             {...this.props} />}
+                  </div>
+              )
+          }
+      }
+
+    const PeopleList = ({data}) =>
+      <ol className="people-list">
+          {data.results.map((person, i) => {
+              const {first, last} = person.name
+              return <li key={i}>{first} {last}</li>
+          })}
+      </ol>
+
+    const RandomMeUsers = DataComponent(
+                            PeopleList,
+                            "https://randomuser.me/api?results=10"
+                        )
+
+    render(
+      <RandomMeUsers />,
+      document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/05-higher-order-components/03-hocs.html b/chapter-07/05-higher-order-components/03-hocs.html
new file mode 100644
index 00000000..fe55d8c1
--- /dev/null
+++ b/chapter-07/05-higher-order-components/03-hocs.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const DataComponent = (ComposedComponent, url) =>
+      class DataComponent extends Component {
+
+          constructor(props) {
+              super(props)
+              this.state = {
+                  data: [],
+                  loading: false,
+                  loaded: false
+              }
+          }
+
+          componentWillMount() {
+              this.setState({loading:true})
+              fetch(url)
+                  .then(response => response.json())
+                  .then(data => this.setState({
+                      loaded: true,
+                      loading: false,
+                      data
+                  }))
+          }
+
+          render() {
+              return (
+                  <div className="data-component">
+                      {(this.state.loading) ?
+                          <div>Loading...</div> :
+                          <ComposedComponent {...this.state}
+                                             {...this.props} />}
+                  </div>
+              )
+          }
+      }
+
+    const CountryNames = ({data, selected=""}) =>
+      <select className="people-list" defaultValue={selected}>
+         {data.map(({name}, i) =>
+             <option key={i} value={name}>{name}</option>
+         )}
+     </select>
+
+    const CountryDropDown = DataComponent(
+                              CountryNames,
+                              "https://restcountries.eu/rest/v1/all"
+                          )
+    render(
+      <CountryDropDown selected="United States" />,
+      document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/05-higher-order-components/04-hocs.html b/chapter-07/05-higher-order-components/04-hocs.html
new file mode 100644
index 00000000..c4bee064
--- /dev/null
+++ b/chapter-07/05-higher-order-components/04-hocs.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const Expandable = ComposedComponent =>
+      class Expandable extends Component {
+
+          constructor(props) {
+              super(props)
+              const collapsed = (props.hidden && props.hidden === true) ? true : false
+              this.state = {collapsed}
+              this.expandCollapse = this.expandCollapse.bind(this)
+          }
+
+          expandCollapse() {
+              this.setState(prevState => ({
+                collapsed: !prevState.collapsed
+              }))
+          }
+
+          render() {
+              return <ComposedComponent
+                          expandCollapse={this.expandCollapse}
+                          {...this.state}
+                          {...this.props} />
+          }
+      }
+
+    const ShowHideMessage = ({children, collapsed, expandCollapse}) =>
+      <p onClick={expandCollapse}>
+          {(collapsed) ?
+              children.replace(/[a-zA-Z0-9]/g, "x") :
+              children}
+      </p>
+
+    const HiddenMessage = Expandable(ShowHideMessage)
+
+    render(
+        <HiddenMessage hidden={true}>This is a hidden message</HiddenMessage>,
+        document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/05-higher-order-components/05-hocs.html b/chapter-07/05-higher-order-components/05-hocs.html
new file mode 100644
index 00000000..cda37a9f
--- /dev/null
+++ b/chapter-07/05-higher-order-components/05-hocs.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { Component } = React
+    const { render } = ReactDOM
+
+    const Expandable = ComposedComponent =>
+        class Expandable extends Component {
+
+            constructor(props) {
+                super(props)
+                const collapsed = (props.hidden && props.hidden === true) ? true : false
+                this.state = {collapsed}
+                this.expandCollapse = this.expandCollapse.bind(this)
+            }
+
+            expandCollapse() {
+                this.setState(prevState => ({
+                  collapsed: !prevState.collapsed
+                }))
+            }
+
+            render() {
+                return <ComposedComponent
+                            expandCollapse={this.expandCollapse}
+                            {...this.state}
+                            {...this.props} />
+            }
+        }
+
+    class MenuButton extends Component {
+
+        componentWillReceiveProps(nextProps) {
+            const collapsed = (nextProps.collapsed && nextProps.collapsed === true) ? true : false
+            this.setState({collapsed})
+        }
+
+        render() {
+            const {children, collapsed, txt, expandCollapse} = this.props
+            return (
+                <div className="pop-button">
+                    <button onClick={expandCollapse}>{txt}</button>
+                    {(!collapsed) ?
+                        <div className="pop-up">
+                            {children}
+                        </div> :
+                        ""
+                    }
+                </div>
+            )
+        }
+    }
+
+    const PopUpButton = Expandable(MenuButton)
+
+    render(
+        <PopUpButton hidden={true} txt="toggle popup">
+            <h1>Hidden Content</h1>
+            <p>This content will start off hidden</p>
+        </PopUpButton>,
+        document.getElementById('react-container')
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/06-managing-state-outside-react/01-state.html b/chapter-07/06-managing-state-outside-react/01-state.html
new file mode 100644
index 00000000..f887c574
--- /dev/null
+++ b/chapter-07/06-managing-state-outside-react/01-state.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <style media="screen">
+    body, html {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: "Keania One", verdana;
+      background-color: black;
+      color: #008209;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    div.clock {
+      width: 339px;
+      border: solid 1px;
+      height: 80px;
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      align-items: flex-end;
+    }
+
+    div.clock span {
+      font-size: 3em;
+    }
+
+    div.clock button {
+      position: absolute;
+      top: .2em;
+      right: .2em;
+      padding: .4em;
+      font-size: .8em;
+      line-height: .8em;
+      font-weight: bold;
+      color: #008209;
+      background-color: black;
+      border: solid 1px #008209;
+    }
+
+    div.clock button:hover {
+      background-color: #008209;
+      color: black;
+      border: none;
+      cursor: pointer;
+    }
+    </style>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Libraries</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const startTicking = () =>
+        setInterval(
+          compose(
+            getCurrentTime,
+            abstractClockTime,
+            convertToCivilianTime,
+            doubleDigits,
+            render(AlarmClockDisplay)
+          ),
+          oneSecond()
+        )
+
+      const AlarmClockDisplay = ({hours, minutes, seconds, ampm}) =>
+        <div className="clock">
+          <span>{hours}</span>
+          <span>:</span>
+          <span>{minutes}</span>
+          <span>:</span>
+          <span>{seconds}</span>
+          <span>{ampm}</span>
+        </div>
+
+      const render = Component => civilianTime =>
+        ReactDOM.render(
+          <Component {...civilianTime} />,
+          document.getElementById('react-container')
+        )
+
+      const oneSecond = () => 1000
+      const getCurrentTime = () => new Date()
+
+      const clear = () => console.clear()
+      const log = message => console.log(message)
+
+      const abstractClockTime = date =>
+        ({
+          hours: date.getHours(),
+          minutes: date.getMinutes(),
+          seconds: date.getSeconds()
+        })
+
+      const civilianHours = clockTime =>
+        ({
+          ...clockTime,
+          hours: (clockTime.hours > 12) ? clockTime.hours - 12 : clockTime.hours
+        })
+
+      const appendAMPM = clockTime =>
+        ({
+          ...clockTime,
+          ampm: (clockTime.hours >= 12) ? "PM" : "AM"
+        })
+
+      const display = target => time => target(time)
+      const formatClock = format =>
+        time =>
+          format.replace("hh", time.hours)
+            .replace("mm", time.minutes)
+            .replace("ss", time.seconds)
+            .replace("tt", time.ampm)
+
+      const compose = (...fns) =>
+        (arg) =>
+          fns.reduce(
+            (composed, f) => f(composed),
+            arg
+          )
+
+      const convertToCivilianTime = clockTime =>
+        compose(
+          appendAMPM,
+          civilianHours
+        )(clockTime)
+
+      const prependZero = key => clockTime =>
+        ({
+          ...clockTime,
+          [key]: (clockTime[key] < 10) ? "0" + clockTime[key] : clockTime[key]
+        })
+
+      const doubleDigits = civilianTime =>
+        compose(
+          prependZero("hours"),
+          prependZero("minutes")
+        )(civilianTime)
+
+      startTicking()
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/readme.md b/chapter-07/readme.md
index a2f0b4fe..a490778e 100644
--- a/chapter-07/readme.md
+++ b/chapter-07/readme.md
@@ -7,45 +7,45 @@ mount or update a component.
 Samples
 --------
 
-#### Mounting Lifecycle
+### Mounting Lifecycle
 
-* Loading data when a component mounts ([1](http://jsbin.com/bameba/1/edit?js,console),
-[2](http://jsbin.com/bameba/2/edit?js,output))
-* Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/mounting-lifecycle-clock/dist/index.html),
-[source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/mounting-lifecycle-clock))
+  1. getFakeMembers ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/01-mounting-lifecycle/01-mounting.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/01-mounting-lifecycle/01-mounting.html), [bin](http://jsbin.com/qobiwit/1/edit?js,console))
+  2. getFakeMembers Lifecycle ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/01-mounting-lifecycle/02-mounting.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/01-mounting-lifecycle/02-mounting.html), [bin](http://jsbin.com/qobiwit/2/edit?js,output))
+  3. Clock ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/mounting-lifecycle-clock/dist/index.html),
+  [source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/mounting-lifecycle-clock))
 
-#### Updating Lifecycle
+### Color Organizer
 
-* Updating Lifecycle (color-organizer) ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/color-organizer/dist/index.html),
-[source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/color-organizer))
-* Component will Receive Props ([1](http://jsbin.com/nuwaje/1/edit?js,output),
-[2](http://jsbin.com/nuwaje/2/edit?js,output),
-[note](http://jsbin.com/gacuba/1/edit?js,output))
+  1. Color Organizer - Updating Lifecycle ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/color-organizer/dist/index.html),
+  [source](https://github.com/MoonHighway/learning-react/blob/master/chapter-07/color-organizer))
 
-#### Children
+### Updating Lifecycle
 
-* Display Component ([1](http://jsbin.com/goraje/1/edit?js,output),
-[2](http://jsbin.com/goraje/2/edit?js,console))
-* WhenTruthy, WhenFalsy ([3](http://jsbin.com/goraje/3/edit?js,output),
-[4](http://jsbin.com/goraje/4/edit?js,output),
-[5](http://jsbin.com/goraje/5/edit?js,console))
+  1. Hidden Messages - Mounting Methods ❌ ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/02-updating-lifecycle/01-updating.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/02-updating-lifecycle/01-updating.html), [bin](http://jsbin.com/buvutef/1/edit?js,output))
+  2. componentWillReceiveProps ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/02-updating-lifecycle/02-updating.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/02-updating-lifecycle/02-updating.html), [bin](http://jsbin.com/buvutef/2/edit?js,output))
+
+### Children
+
+  1. Display Component ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/03-children/01-children.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/03-children/01-children.html), [bin](http://jsbin.com/filikap/1/edit?js,output))
+  2. Filtering Components ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/03-children/02-children.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/03-children/02-children.html), [bin](http://jsbin.com/filikap/2/edit?js,output))
+  3. Filtering Components - Different Ages ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/03-children/03-children.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/03-children/03-children.html), [bin](http://jsbin.com/filikap/3/edit?js,output))
 
 ### JavaScript Library Integration
 
-* Fetching Data ([1](http://jsbin.com/yefuya/1/edit?js,output),
-[2](http://jsbin.com/yefuya/2/edit?js,output))
-* D3 Timeline v1 ([1](http://jsbin.com/hakono/1/edit?js,output),
-[2](http://jsbin.com/hakono/2/edit?js,output))
+  1. Fetching Data ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/01-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/01-libraries.html), [bin](http://jsbin.com/levaduv/1/edit?js,output))
+  2. Fetch with componentWillMount ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/02-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/02-libraries.html), [bin](http://jsbin.com/levaduv/2/edit?js,output))
+  3. D3 Timeline v1 ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/03-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/03-libraries.html), [bin](http://jsbin.com/levaduv/3/edit?js,output))
+  4. D3 Ski Milestones ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/04-library-integration/04-libraries.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/04-library-integration/04-libraries.html), [bin](http://jsbin.com/levaduv/4/edit?js,output))
 
-#### Higher Order Components
+### Higher Order Components
 
-* People list ([1](http://jsbin.com/vexidu/1/edit?js,output))
-* DataComponent HOC ([2](http://jsbin.com/vexidu/2/edit?js,output))
-* Country dropdown with DataComponent ([3](http://jsbin.com/vexidu/3/edit?js,output))
-* Expandable HOC ([1](http://jsbin.com/medari/1/edit?js,output))
-* PopUp with Expandable ([2](http://jsbin.com/medari/2/edit?js,output))
+  1. People List ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/01-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/01-hocs.html), [bin](http://jsbin.com/nitagof/1/edit?js,output))
+  2. Data Component HOC ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/02-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/02-hocs.html), [bin](http://jsbin.com/nitagof/2/edit?js,output))
+  3. Country Dropdown ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/03-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/03-hocs.html), [bin](http://jsbin.com/nitagof/3/edit?js,output))
+  4. Expandable HOC ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/04-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/04-hocs.html), [bin](http://jsbin.com/nitagof/4/edit?js,output))
+  5. Pop-up With Expandable ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/05-higher-order-components/04-hocs.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/05-higher-order-components/04-hocs.html), [bin](http://jsbin.com/nitagof/5/edit?js,output))
 
-#### Managing State Outside of React
+### Managing State Outside of React
 
-* Clock without React State ([1](http://jsbin.com/zepusi/1/edit?js,output))
-* Flux ([1](http://jsbin.com/fizocij/1/edit?js,console,output))
+  1. Clock without React State ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/06-managing-state-outside-react/01-state.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/06-managing-state-outside-react/01-state.html), [bin](http://jsbin.com/juxewiw/1/edit?js,output))
+  2. Flux ([bin only](http://jsbin.com/juxewiw/2/edit?js,console,output))
diff --git a/chapter-08/01-reducers/01-reducers.html b/chapter-08/01-reducers/01-reducers.html
new file mode 100644
index 00000000..1a0f45ae
--- /dev/null
+++ b/chapter-08/01-reducers/01-reducers.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const color = (state = {}, action) => {
+        switch (action.type) {
+            case "ADD_COLOR":
+                return {
+                    id: action.id,
+                    title: action.title,
+                    color: action.color,
+                    timestamp: action.timestamp,
+                    rating: 0
+                }
+            case "RATE_COLOR":
+                return (state.id !== action.id) ?
+                    state :
+                    {
+                        ...state,
+                        rating: action.rating
+                    }
+            default :
+                return state
+        }
+      }
+
+      let action =  {
+         type: "ADD_COLOR",
+         id: 33,
+         color: "#0000FF",
+         title: "Big Blue",
+         timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)",
+         rating: 0
+      }
+
+      let newColor = color({}, action)
+
+      console.log( newColor )
+
+      action = {
+         type: "RATE_COLOR",
+         id: 33,
+         rating: 4
+      }
+
+      newColor = color(newColor, action)
+
+      console.log( newColor )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/01-reducers/02-reducers.html b/chapter-08/01-reducers/02-reducers.html
new file mode 100644
index 00000000..76553f33
--- /dev/null
+++ b/chapter-08/01-reducers/02-reducers.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const color = (state = {}, action) => {
+      switch (action.type) {
+          case "ADD_COLOR":
+              return {
+                  id: action.id,
+                  title: action.title,
+                  color: action.color,
+                  timestamp: action.timestamp,
+                  rating: 0
+              }
+          case "RATE_COLOR":
+              return (state.id !== action.id) ?
+                  state :
+                  {
+                      ...state,
+                      rating: action.rating
+                  }
+          default :
+              return state
+      }
+    }
+
+    const colors = (state = [], action) => {
+      switch (action.type) {
+          case "ADD_COLOR" :
+              return [
+                  ...state,
+                  color({}, action)
+              ]
+          case "RATE_COLOR" :
+              return state.map(
+                  c => color(c, action)
+              )
+          case "REMOVE_COLOR" :
+              return state.filter(
+                  c => c.id !== action.id
+              )
+          default:
+              return state
+      }
+    }
+
+    let currentColors = [
+    {
+      id: 1,
+      title: "Berry Blue",
+      color: "#000066",
+      rating: 0,
+      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+    }
+    ]
+    console.log(currentColors)
+
+
+
+    let action =  {
+      type: "ADD_COLOR",
+      id: 2,
+      title: "Party Pink",
+      color: "#F142FF",
+      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+    }
+    let newColors = colors(currentColors, action)
+    console.log( newColors )
+
+
+
+    action = {
+     type: "RATE_COLOR",
+     id: 1,
+     rating: 5
+    }
+    newColors = colors(newColors, action)
+    console.log( newColors )
+
+
+
+    action = {
+     type: "REMOVE_COLOR",
+     id: 2
+    }
+    newColors = colors(newColors, action)
+    console.log( newColors )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/01-reducers/03-reducers.html b/chapter-08/01-reducers/03-reducers.html
new file mode 100644
index 00000000..a9cecd15
--- /dev/null
+++ b/chapter-08/01-reducers/03-reducers.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const sort = (state="SORTED_BY_DATE", action) => {
+          switch (action.type) {
+              case "SORT_COLORS":
+                  return action.sortBy
+              default :
+                  return state
+          }
+      }
+
+      let state = "SORTED_BY_DATE"
+
+
+
+      let action =  {
+           type: "SORT_COLORS",
+           sortBy: "SORTED_BY_TITLE"
+      }
+      let nextState = sort(state, action)
+      console.log( nextState )
+
+
+      action = {
+           type: "SORT_COLORS",
+           sortBy: "SORTED_BY_RATING"
+      }
+      nextState = sort(nextState, action)
+      console.log( nextState )
+
+
+      action = {
+           type: "SORT_COLORS",
+           sortBy: "SORTED_BY_DATE"
+      }
+      nextState = sort(nextState, action)
+      console.log( nextState )
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/01-store.html b/chapter-08/02-the-store/01-store.html
new file mode 100644
index 00000000..054560d2
--- /dev/null
+++ b/chapter-08/02-the-store/01-store.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore } = Redux
+
+    const color = (state = {}, action) => {
+      switch (action.type) {
+          case "ADD_COLOR":
+              return {
+                  id: action.id,
+                  title: action.title,
+                  color: action.color,
+                  timestamp: action.timestamp,
+                  rating: 0
+              }
+          case "RATE_COLOR":
+              return (state.id !== action.id) ?
+                  state :
+                  {
+                      ...state,
+                      rating: action.rating
+                  }
+          default :
+              return state
+      }
+    }
+
+    const store = createStore(color)
+
+    console.log(store.getState())
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/02-store.html b/chapter-08/02-the-store/02-store.html
new file mode 100644
index 00000000..9b3352a5
--- /dev/null
+++ b/chapter-08/02-the-store/02-store.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore, combineReducers } = Redux
+
+    const color = (state = {}, action) => {
+        switch (action.type) {
+            case "ADD_COLOR":
+                return {
+                    id: action.id,
+                    title: action.title,
+                    color: action.color,
+                    timestamp: action.timestamp,
+                    rating: 0
+                }
+            case "RATE_COLOR":
+                return (state.id !== action.id) ?
+                    state :
+                    {
+                        ...state,
+                        rating: action.rating
+                    }
+            default :
+                return state
+        }
+    }
+
+    const colors = (state = [], action) => {
+        switch (action.type) {
+            case "ADD_COLOR" :
+                return [
+                    ...state,
+                    color({}, action)
+                ]
+            case "RATE_COLOR" :
+                return state.map(
+                    c => color(c, action)
+                )
+            case "REMOVE_COLOR" :
+                return state.filter(
+                    c => c.id !== action.id
+                )
+            default:
+                return state
+        }
+    }
+
+    const sort = (state="SORTED_BY_DATE", action) => {
+        switch (action.type) {
+            case "SORT_COLORS":
+                return action.sortBy
+            default :
+                return state
+        }
+    }
+
+    const store = createStore(
+        combineReducers({ colors, sort })
+    )
+
+    console.log(store.getState())
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/03-store.html b/chapter-08/02-the-store/03-store.html
new file mode 100644
index 00000000..8243c9a9
--- /dev/null
+++ b/chapter-08/02-the-store/03-store.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore, combineReducers } = Redux
+
+    const initialState = {
+      colors: [
+          {
+              id: 0,
+              title: "Rad Red",
+              color: "#FF0000",
+              rating: 3,
+              timestamp: "Sat Mar 12 2016 16:12:09 GMT-0800 (PST)"
+          },
+          {
+              id: 1,
+              title: "Crazy Green",
+              color: "#00FF00",
+              rating: 0,
+              timestamp: "Fri Mar 11 2016 12:00:00 GMT-0800 (PST)"
+          },
+          {
+              id: 2,
+              title: "Big Blue",
+              color: "#0000FF",
+              rating: 5,
+              timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+          }
+      ],
+      sort: "SORTED_BY_TITLE"
+    }
+
+    const color = (state = {}, action) => {
+      switch (action.type) {
+          case "ADD_COLOR":
+              return {
+                  id: action.id,
+                  title: action.title,
+                  color: action.color,
+                  timestamp: action.timestamp,
+                  rating: 0
+              }
+          case "RATE_COLOR":
+              return (state.id !== action.id) ?
+                  state :
+                  {
+                      ...state,
+                      rating: action.rating
+                  }
+          default :
+              return state
+      }
+    }
+
+    const colors = (state = [], action) => {
+      switch (action.type) {
+          case "ADD_COLOR" :
+              return [
+                  ...state,
+                  color({}, action)
+              ]
+          case "RATE_COLOR" :
+              return state.map(
+                  c => color(c, action)
+              )
+          case "REMOVE_COLOR" :
+              return state.filter(
+                  c => c.id !== action.id
+              )
+          default:
+              return state
+      }
+    }
+
+    const sort = (state="SORTED_BY_DATE", action) => {
+      switch (action.type) {
+          case "SORT_COLORS":
+              return action.sortBy
+          default :
+              return state
+      }
+    }
+
+    const store = createStore(
+      combineReducers({ colors, sort }),
+      initialState
+    )
+
+    console.log(store.getState())
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/04-store.html b/chapter-08/02-the-store/04-store.html
new file mode 100644
index 00000000..ffdd6f6f
--- /dev/null
+++ b/chapter-08/02-the-store/04-store.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore, combineReducers } = Redux
+    const initialState = {
+      colors: [
+          {
+              id: 0,
+              title: "Rad Red",
+              color: "#FF0000",
+              rating: 3,
+              timestamp: "Sat Mar 12 2016 16:12:09 GMT-0800 (PST)"
+          },
+          {
+              id: 1,
+              title: "Crazy Green",
+              color: "#00FF00",
+              rating: 0,
+              timestamp: "Fri Mar 11 2016 12:00:00 GMT-0800 (PST)"
+          },
+          {
+              id: 2,
+              title: "Big Blue",
+              color: "#0000FF",
+              rating: 5,
+              timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+          }
+      ],
+      sort: "SORTED_BY_TITLE"
+    }
+
+    const color = (state = {}, action) => {
+      switch (action.type) {
+          case "ADD_COLOR":
+              return {
+                  id: action.id,
+                  title: action.title,
+                  color: action.color,
+                  timestamp: action.timestamp,
+                  rating: 0
+              }
+          case "RATE_COLOR":
+              return (state.id !== action.id) ?
+                  state :
+                  {
+                      ...state,
+                      rating: action.rating
+                  }
+          default :
+              return state
+      }
+    }
+
+    const colors = (state = [], action) => {
+      switch (action.type) {
+          case "ADD_COLOR" :
+              return [
+                  ...state,
+                  color({}, action)
+              ]
+          case "RATE_COLOR" :
+              return state.map(
+                  c => color(c, action)
+              )
+          case "REMOVE_COLOR" :
+              return state.filter(
+                  c => c.id !== action.id
+              )
+          default:
+              return state
+      }
+    }
+
+    const sort = (state="SORTED_BY_DATE", action) => {
+      switch (action.type) {
+          case "SORT_COLORS":
+              return action.sortBy
+          default :
+              return state
+      }
+    }
+
+    const store = createStore(
+      combineReducers({ colors, sort }),
+      initialState
+    )
+
+
+
+    console.log(
+      "Length of color array before ADD_COLOR",
+      store.getState().colors.length
+    )
+    store.dispatch({
+      type: "ADD_COLOR",
+      id: 1,
+      title: "Party Pink",
+      color: "#F142FF",
+      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+    })
+    console.log(
+      "Length of color array after ADD_COLOR",
+      store.getState().colors.length
+    )
+
+
+
+    console.log(
+      "Color rating before RATE_COLOR",
+      store.getState().colors[0].rating
+    )
+    store.dispatch({
+      type: "RATE_COLOR",
+      id: 0,
+      rating: 5
+    })
+    console.log(
+      "Color rating after RATE_COLOR",
+      store.getState().colors[0].rating
+    )
+
+
+
+    console.log(
+      "Application state after both actions",
+      store.getState()
+    )
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/05-store.html b/chapter-08/02-the-store/05-store.html
new file mode 100644
index 00000000..f3d2db30
--- /dev/null
+++ b/chapter-08/02-the-store/05-store.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore, combineReducers } = Redux
+
+    const color = (state = {}, action) => {
+      switch (action.type) {
+          case "ADD_COLOR":
+              return {
+                  id: action.id,
+                  title: action.title,
+                  color: action.color,
+                  timestamp: action.timestamp,
+                  rating: 0
+              }
+          case "RATE_COLOR":
+              return (state.id !== action.id) ?
+                  state :
+                  {
+                      ...state,
+                      rating: action.rating
+                  }
+          default :
+              return state
+      }
+    }
+
+    const colors = (state = [], action) => {
+      switch (action.type) {
+          case "ADD_COLOR" :
+              return [
+                  ...state,
+                  color({}, action)
+              ]
+          case "RATE_COLOR" :
+              return state.map(
+                  c => color(c, action)
+              )
+          case "REMOVE_COLOR" :
+              return state.filter(
+                  c => c.id !== action.id
+              )
+          default:
+              return state
+      }
+    }
+
+    const sort = (state="SORTED_BY_DATE", action) => {
+      switch (action.type) {
+          case "SORT_COLORS":
+              return action.sortBy
+          default :
+              return state
+      }
+    }
+
+    const store = createStore(
+      combineReducers({ colors, sort })
+    )
+
+
+
+    store.subscribe(() =>
+      console.log('next state', store.getState())
+    )
+
+    store.dispatch({
+      type: "ADD_COLOR",
+      id: 1,
+      title: "Party Pink",
+      color: "#F142FF",
+      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+    })
+
+    store.dispatch({
+      type: "ADD_COLOR",
+      id: 2,
+      title: "Big Blue",
+      color: "#0000FF",
+      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+    })
+
+    store.dispatch({
+      type: "RATE_COLOR",
+      id: 1,
+      rating: 5
+    })
+
+    store.dispatch({
+      type: "REMOVE_COLOR",
+      id: 2
+    })
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/06-store.html b/chapter-08/02-the-store/06-store.html
new file mode 100644
index 00000000..d24a1ff1
--- /dev/null
+++ b/chapter-08/02-the-store/06-store.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const { createStore, combineReducers } = Redux
+
+      const color = (state = {}, action) => {
+          switch (action.type) {
+              case "ADD_COLOR":
+                  return {
+                      id: action.id,
+                      title: action.title,
+                      color: action.color,
+                      timestamp: action.timestamp,
+                      rating: 0
+                  }
+              case "RATE_COLOR":
+                  return (state.id !== action.id) ?
+                      state :
+                      {
+                          ...state,
+                          rating: action.rating
+                      }
+              default :
+                  return state
+          }
+      }
+
+      const colors = (state = [], action) => {
+          switch (action.type) {
+              case "ADD_COLOR" :
+                  return [
+                      ...state,
+                      color({}, action)
+                  ]
+              case "RATE_COLOR" :
+                  return state.map(
+                      c => color(c, action)
+                  )
+              case "REMOVE_COLOR" :
+                  return state.filter(
+                      c => c.id !== action.id
+                  )
+              default:
+                  return state
+          }
+      }
+
+      const sort = (state="SORTED_BY_DATE", action) => {
+          switch (action.type) {
+              case "SORT_COLORS":
+                  return action.sortBy
+              default :
+                  return state
+          }
+      }
+
+      const store = createStore(
+          combineReducers({ colors, sort })
+      )
+
+
+
+      const unsubscribeLogger = store.subscribe(() =>
+          console.log('next state', store.getState())
+      )
+
+      store.dispatch({
+          type: "ADD_COLOR",
+          id: 1,
+          title: "Party Pink",
+          color: "#F142FF",
+          timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+      })
+
+      unsubscribeLogger()
+
+      store.dispatch({
+          type: "ADD_COLOR",
+          id: 2,
+          title: "Big Blue",
+          color: "#0000FF",
+          timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
+      })
+
+      store.dispatch({
+          type: "RATE_COLOR",
+          id: 1,
+          rating: 5
+      })
+
+      store.dispatch({
+          type: "REMOVE_COLOR",
+          id: 2
+      })
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/02-the-store/07-store.html b/chapter-08/02-the-store/07-store.html
new file mode 100644
index 00000000..0a77ac71
--- /dev/null
+++ b/chapter-08/02-the-store/07-store.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore, combineReducers } = Redux
+
+    const color = (state = {}, action) => {
+      switch (action.type) {
+          case "ADD_COLOR":
+              return {
+                  id: action.id,
+                  title: action.title,
+                  color: action.color,
+                  timestamp: action.timestamp,
+                  rating: 0
+              }
+          case "RATE_COLOR":
+              return (state.id !== action.id) ?
+                  state :
+                  {
+                      ...state,
+                      rating: action.rating
+                  }
+          default :
+              return state
+      }
+    }
+
+    const colors = (state = [], action) => {
+      switch (action.type) {
+          case "ADD_COLOR" :
+              return [
+                  ...state,
+                  color({}, action)
+              ]
+          case "RATE_COLOR" :
+              return state.map(
+                  c => color(c, action)
+              )
+          case "REMOVE_COLOR" :
+              return state.filter(
+                  c => c.id !== action.id
+              )
+          default:
+              return state
+      }
+    }
+
+    const sort = (state="SORTED_BY_DATE", action) => {
+      switch (action.type) {
+          case "SORT_COLORS":
+              return action.sortBy
+          default :
+              return state
+      }
+    }
+
+    const store = createStore(
+      combineReducers({ colors, sort }),
+      (localStorage['redux-store']) ?
+          JSON.parse(localStorage['redux-store']) :
+          {}
+    )
+
+    store.subscribe(() => {
+    localStorage['redux-store'] = JSON.stringify(store.getState())
+    })
+
+    console.log('current color count', store.getState().colors.length)
+    console.log('current state', store.getState())
+
+    let uniqueId = 0
+
+    store.dispatch({
+      type: "ADD_COLOR",
+      id: uniqueId++,
+      title: "Party Pink",
+      color: "#F142FF",
+      timestamp: new Date().toString()
+    })
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/03-action-creators/01-action-creators.html b/chapter-08/03-action-creators/01-action-creators.html
new file mode 100644
index 00000000..18e7ad5f
--- /dev/null
+++ b/chapter-08/03-action-creators/01-action-creators.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <script src="https://unpkg.com/node-uuid@1.4.7/uuid.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    const { createStore, combineReducers } = Redux
+    const { v4 } = uuid
+
+    const color = (state = {}, action) => {
+        switch (action.type) {
+            case "ADD_COLOR":
+                return {
+                    id: action.id,
+                    title: action.title,
+                    color: action.color,
+                    timestamp: action.timestamp,
+                    rating: 0
+                }
+            case "RATE_COLOR":
+                return (state.id !== action.id) ?
+                    state :
+                    {
+                        ...state,
+                        rating: action.rating
+                    }
+            default :
+                return state
+        }
+    }
+
+    const colors = (state = [], action) => {
+        switch (action.type) {
+            case "ADD_COLOR" :
+                return [
+                    ...state,
+                    color({}, action)
+                ]
+            case "RATE_COLOR" :
+                return state.map(
+                    c => color(c, action)
+                )
+            case "REMOVE_COLOR" :
+                return state.filter(
+                    c => c.id !== action.id
+                )
+            default:
+                return state
+        }
+    }
+
+    const sort = (state="SORTED_BY_DATE", action) => {
+        switch (action.type) {
+            case "SORT_COLORS":
+                return action.sortBy
+            default :
+                return state
+        }
+    }
+
+    const store = createStore(
+        combineReducers({ colors, sort })
+    )
+
+    const addColor = (title, color) =>
+        ({
+            type: "ADD_COLOR",
+            id: v4(),
+            title,
+            color,
+            timestamp: new Date().toString()
+        })
+
+    const removeColor = id =>
+        ({
+            type: "REMOVE_COLOR",
+            id
+        })
+
+    const rateColor = (id, rating) =>
+        ({
+            type: "RATE_COLOR",
+            id,
+            rating
+        })
+
+    const sortColors = sortedBy =>
+        (sortedBy === "rating") ?
+            ({
+                type: "SORT_COLORS",
+                sortBy: "SORTED_BY_RATING"
+            }) :
+            (sortedBy === "title") ?
+                ({
+                    type: "SORT_COLORS",
+                    sortBy: "SORTED_BY_TITLE"
+                }) :
+                ({
+                    type: "SORT_COLORS",
+                    sortBy: "SORTED_BY_DATE"
+                })
+
+    store.dispatch(addColor("Party Pink", "#F142FF"))
+    store.dispatch(addColor("lawn", "#009900"))
+    store.dispatch(addColor("Tomato", "#990000"))
+    store.dispatch(addColor("Big Blue", "#0000FF"))
+
+    console.log(store.getState().colors.map(c=>c.title).join(", "))
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/03-action-creators/02-action-creators.html b/chapter-08/03-action-creators/02-action-creators.html
new file mode 100644
index 00000000..24b347c9
--- /dev/null
+++ b/chapter-08/03-action-creators/02-action-creators.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <script src="https://unpkg.com/node-uuid@1.4.7/uuid.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const { createStore, combineReducers, compose } = Redux
+      const { v4 } = uuid
+
+      const color = (state = {}, action) => {
+          switch (action.type) {
+              case "ADD_COLOR":
+                  return {
+                      id: action.id,
+                      title: action.title,
+                      color: action.color,
+                      timestamp: action.timestamp,
+                      rating: 0
+                  }
+              case "RATE_COLOR":
+                  return (state.id !== action.id) ?
+                      state :
+                      {
+                          ...state,
+                          rating: action.rating
+                      }
+              default :
+                  return state
+          }
+      }
+
+      const colors = (state = [], action) => {
+          switch (action.type) {
+              case "ADD_COLOR" :
+                  return [
+                      ...state,
+                      color({}, action)
+                  ]
+              case "RATE_COLOR" :
+                  return state.map(
+                      c => color(c, action)
+                  )
+              case "REMOVE_COLOR" :
+                  return state.filter(
+                      c => c.id !== action.id
+                  )
+              default:
+                  return state
+          }
+      }
+
+      const sort = (state="SORTED_BY_DATE", action) => {
+          switch (action.type) {
+              case "SORT_COLORS":
+                  return action.sortBy
+              default :
+                  return state
+          }
+      }
+
+      const store = createStore(
+          combineReducers({ colors, sort })
+      )
+
+      const addColor = (title, color) =>
+          ({
+              type: "ADD_COLOR",
+              id: v4(),
+              title,
+              color,
+              timestamp: new Date().toString()
+          })
+
+      const removeColor = id =>
+          ({
+              type: "REMOVE_COLOR",
+              id
+          })
+
+      const rateColor = (id, rating) =>
+          ({
+              type: "RATE_COLOR",
+              id,
+              rating
+          })
+
+      const sortColors = sortedBy =>
+          (sortedBy === "rating") ?
+              ({
+                  type: "SORT_COLORS",
+                  sortBy: "SORTED_BY_RATING"
+              }) :
+              (sortedBy === "title") ?
+                  ({
+                      type: "SORT_COLORS",
+                      sortBy: "SORTED_BY_TITLE"
+                  }) :
+                  ({
+                      type: "SORT_COLORS",
+                      sortBy: "SORTED_BY_DATE"
+                  })
+
+      const populate = compose(
+        () => store.dispatch(addColor("Big Blue", "#0000FF")),
+        () => store.dispatch(addColor("Tomato", "#990000")),
+        () => store.dispatch(addColor("lawn", "#009900")),
+        () => store.dispatch(addColor("Party Pink", "#F142FF"))
+      )
+
+      const print = compose(
+        list => console.log(list),
+        titles => titles.join(", "),
+        map => map(c=>c.title),
+        colors => colors.map.bind(colors),
+        state => state.colors
+      )
+
+      populate()
+      print(store.getState())
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/04-middleware/01-middleware.html b/chapter-08/04-middleware/01-middleware.html
new file mode 100644
index 00000000..9d367f7d
--- /dev/null
+++ b/chapter-08/04-middleware/01-middleware.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <script src="https://unpkg.com/node-uuid@1.4.7/uuid.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const { createStore, combineReducers, compose, applyMiddleware } = Redux
+      const { v4 } = uuid
+
+      const color = (state = {}, action) => {
+          switch (action.type) {
+              case "ADD_COLOR":
+                  return {
+                      id: action.id,
+                      title: action.title,
+                      color: action.color,
+                      timestamp: action.timestamp,
+                      rating: 0
+                  }
+              case "RATE_COLOR":
+                  return (state.id !== action.id) ?
+                      state :
+                      {
+                          ...state,
+                          rating: action.rating
+                      }
+              default :
+                  return state
+          }
+      }
+
+      const colors = (state = [], action) => {
+          switch (action.type) {
+              case "ADD_COLOR" :
+                  return [
+                      ...state,
+                      color({}, action)
+                  ]
+              case "RATE_COLOR" :
+                  return state.map(
+                      c => color(c, action)
+                  )
+              case "REMOVE_COLOR" :
+                  return state.filter(
+                      c => c.id !== action.id
+                  )
+              default:
+                  return state
+          }
+      }
+
+      const sort = (state="SORTED_BY_DATE", action) => {
+          switch (action.type) {
+              case "SORT_COLORS":
+                  return action.sortBy
+              default :
+                  return state
+          }
+      }
+
+      const addColor = (title, color) =>
+          ({
+              type: "ADD_COLOR",
+              id: v4(),
+              title,
+              color,
+              timestamp: new Date().toString()
+          })
+
+      const removeColor = id =>
+          ({
+              type: "REMOVE_COLOR",
+              id
+          })
+
+      const rateColor = (id, rating) =>
+          ({
+              type: "RATE_COLOR",
+              id,
+              rating
+          })
+
+      const sortColors = sortedBy =>
+          (sortedBy === "rating") ?
+              ({
+                  type: "SORT_COLORS",
+                  sortBy: "SORTED_BY_RATING"
+              }) :
+              (sortedBy === "title") ?
+                  ({
+                      type: "SORT_COLORS",
+                      sortBy: "SORTED_BY_TITLE"
+                  }) :
+                  ({
+                      type: "SORT_COLORS",
+                      sortBy: "SORTED_BY_DATE"
+                  })
+
+
+
+
+      const logger = store => next => action => {
+          let result
+          console.groupCollapsed("dispatching", action.type)
+          console.log('prev state', store.getState())
+          console.log('action', action)
+          result = next(action)
+          console.log('next state', store.getState())
+          console.groupEnd()
+          return result
+      }
+
+      const store = applyMiddleware(logger)(createStore)(
+          combineReducers({ colors, sort })
+      )
+
+
+
+      const populate = compose(
+        () => console.log('color coung', store.getState().colors.length),
+        () => store.dispatch(addColor("Big Blue", "#0000FF")),
+        () => store.dispatch(addColor("Tomato", "#990000")),
+        () => store.dispatch(addColor("lawn", "#009900")),
+        () => store.dispatch(addColor("Party Pink", "#F142FF"))
+      )
+
+      populate()
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/04-middleware/02-middleware.html b/chapter-08/04-middleware/02-middleware.html
new file mode 100644
index 00000000..ff67f597
--- /dev/null
+++ b/chapter-08/04-middleware/02-middleware.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <script src="https://unpkg.com/node-uuid@1.4.7/uuid.js"></script>
+    <title>Redux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+      const { createStore, combineReducers, compose, applyMiddleware } = Redux
+      const { v4 } = uuid
+
+      const color = (state = {}, action) => {
+          switch (action.type) {
+              case "ADD_COLOR":
+                  return {
+                      id: action.id,
+                      title: action.title,
+                      color: action.color,
+                      timestamp: action.timestamp,
+                      rating: 0
+                  }
+              case "RATE_COLOR":
+                  return (state.id !== action.id) ?
+                      state :
+                      {
+                          ...state,
+                          rating: action.rating
+                      }
+              default :
+                  return state
+          }
+      }
+
+      const colors = (state = [], action) => {
+          switch (action.type) {
+              case "ADD_COLOR" :
+                  return [
+                      ...state,
+                      color({}, action)
+                  ]
+              case "RATE_COLOR" :
+                  return state.map(
+                      c => color(c, action)
+                  )
+              case "REMOVE_COLOR" :
+                  return state.filter(
+                      c => c.id !== action.id
+                  )
+              default:
+                  return state
+          }
+      }
+
+      const sort = (state="SORTED_BY_DATE", action) => {
+          switch (action.type) {
+              case "SORT_COLORS":
+                  return action.sortBy
+              default :
+                  return state
+          }
+      }
+
+      const addColor = (title, color) =>
+          ({
+              type: "ADD_COLOR",
+              id: v4(),
+              title,
+              color,
+              timestamp: new Date().toString()
+          })
+
+      const removeColor = id =>
+          ({
+              type: "REMOVE_COLOR",
+              id
+          })
+
+      const rateColor = (id, rating) =>
+          ({
+              type: "RATE_COLOR",
+              id,
+              rating
+          })
+
+      const sortColors = sortedBy =>
+          (sortedBy === "rating") ?
+              ({
+                  type: "SORT_COLORS",
+                  sortBy: "SORTED_BY_RATING"
+              }) :
+              (sortedBy === "title") ?
+                  ({
+                      type: "SORT_COLORS",
+                      sortBy: "SORTED_BY_TITLE"
+                  }) :
+                  ({
+                      type: "SORT_COLORS",
+                      sortBy: "SORTED_BY_DATE"
+                  })
+
+
+
+
+      const logger = store => next => action => {
+          let result
+          console.groupCollapsed("dispatching", action.type)
+          console.log('prev state', store.getState())
+          console.log('action', action)
+          result = next(action)
+          console.log('next state', store.getState())
+          console.groupEnd()
+          return result
+      }
+
+      const saver = store => next => action => {
+          let result = next(action)
+          localStorage['redux-store'] = JSON.stringify(store.getState())
+          return result
+      }
+
+      const store = applyMiddleware(logger,saver)(createStore)(
+          combineReducers({ colors, sort }),
+          (localStorage['redux-store']) ?
+              JSON.parse(localStorage['redux-store']) :
+              {}
+      )
+
+
+
+      const populate = compose(
+        () => console.log('color coung', store.getState().colors.length),
+        () => store.dispatch(addColor("Big Blue", "#0000FF")),
+        () => store.dispatch(addColor("Tomato", "#990000")),
+        () => store.dispatch(addColor("lawn", "#009900")),
+        () => store.dispatch(addColor("Party Pink", "#F142FF"))
+      )
+
+
+
+      populate()
+
+
+
+
+  </script>
+</body>
+</html>
diff --git a/chapter-08/readme.md b/chapter-08/readme.md
index 454f2ca7..2a972442 100644
--- a/chapter-08/readme.md
+++ b/chapter-08/readme.md
@@ -1,39 +1,39 @@
 Chapter 8 : Redux
 ==================
-Redux is based on Flux, and it was designed to tackle the challenge of understanding how data changes 
-flow through your application. 
+Redux is based on Flux, and it was designed to tackle the challenge of understanding how data changes
+flow through your application.
 
 Samples
 --------
 
-#### Reducers
+### Reducers
 
-* Color Reducer ([1](http://jsbin.com/wezaxew/1/edit?js,console))
-* Colors Reducer ([2](http://jsbin.com/wezaxew/2/edit?js,console))
-* Sort Reducer ([3](http://jsbin.com/wezaxew/3/edit?js,console))
+  1. Color Reducer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/01-reducers/01-reducers.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/01-reducers/01-reducers.html), [bin](http://jsbin.com/cavuxas/1/edit?js,output))
+  2. Colors Reducer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/01-reducers/02-reducers.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/01-reducers/02-reducers.html), [bin](http://jsbin.com/cavuxas/2/edit?js,output))
+  3. Sort Reducer ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/01-reducers/03-reducers.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/01-reducers/03-reducers.html), [bin](http://jsbin.com/cavuxas/3/edit?js,output))
 
-#### The Store
+### The Store
 
-* createStore ([1](http://jsbin.com/wajuju/1/edit?js,console))
-* combineReducers ([2](http://jsbin.com/wajuju/2/edit?js,console))
-* initialState ([3](http://jsbin.com/wajuju/3/edit?js,console))
-* dispatching Actions ([4](http://jsbin.com/wajuju/4/edit?js,console))
-* subscribe ([5](http://jsbin.com/wajuju/5/edit?js,console))
-* unsubscribe ([6](http://jsbin.com/wajuju/6/edit?js,console))
-* persistent state data ([7](http://jsbin.com/wajuju/7/edit?js,console))
+  1. createStore ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/01-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/01-store.html), [bin](http://jsbin.com/dusitad/1/edit?js,output))
+  2. combineReducers ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/02-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/02-store.html), [bin](http://jsbin.com/dusitad/2/edit?js,output))
+  3. initialState ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/03-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/03-store.html), [bin](http://jsbin.com/dusitad/3/edit?js,output))
+  4. Dispatching Actions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/04-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/04-store.html), [bin](http://jsbin.com/dusitad/4/edit?js,output))
+  5. Subscribe ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/05-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/05-store.html), [bin](http://jsbin.com/dusitad/5/edit?js,output))
+  6. Unsubscribe ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/06-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/06-store.html), [bin](http://jsbin.com/dusitad/6/edit?js,output))
+  7. Persistent State Data ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/02-the-store/07-store.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/02-the-store/07-store.html), [bin](http://jsbin.com/dusitad/7/edit?js,output))
 
-#### Action Creators
+### Action Creators
 
-* action creators ([1](http://jsbin.com/ceweboj/1/edit?js,console))
-* compose ([2](http://jsbin.com/ceweboj/2/edit?js,console))
+  1. Action Creators ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/03-action-creators/01-action-creators.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/03-action-creators/01-action-creators.html), [bin](http://jsbin.com/bubuhuq/1/edit?js,output))
+  2. Compose ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/03-action-creators/02-action-creators.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/03-action-creators/02-action-creators.html), [bin](http://jsbin.com/bubuhuq/2/edit?js,output))
 
-#### Middleware
+### Middleware
 
-* logger ([1](http://jsbin.com/fuvezi/1/edit?js,console))
-* saver ([2](http://jsbin.com/fuvezi/2/edit?js,console))
+  1. logger ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/04-middleware/01-middleware.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/04-middleware/01-middleware.html), [bin](http://jsbin.com/tirese/1/edit?js,output))
+  2. saver ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/04-middleware/02-middleware.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-08/04-middleware/02-middleware.html), [bin](http://jsbin.com/tirese/2/edit?js,output))
 
 #### Putting it all together
 Here is the complete sample store that we have reviewed
 
-[Demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/color-organizer-redux/dist/index.html) | 
+[Demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-08/color-organizer-redux/dist/index.html) |
 [Source](https://github.com/MoonHighway/learning-react/blob/master/chapter-08/color-organizer-redux)

From 20b91b84f41099c2dbf2652f6b02d1ecdb3e2879 Mon Sep 17 00:00:00 2001
From: eveporcello <eve@moonhighway.com>
Date: Fri, 29 Sep 2017 13:20:31 -0700
Subject: [PATCH 02/10] Fixes remaining node_module .bin references

---
 chapter-06/color-organizer/package.json            | 2 +-
 chapter-07/color-organizer/package.json            | 2 +-
 chapter-08/color-organizer-redux/package.json      | 2 +-
 chapter-09/color-organizer-containers/package.json | 2 +-
 chapter-09/color-organizer-context/package.json    | 2 +-
 chapter-09/color-organizer-explicit/package.json   | 2 +-
 chapter-09/color-organizer/package.json            | 2 +-
 chapter-10/color-organizer/package.json            | 2 +-
 chapter-11/color-organizer/package.json            | 4 ++--
 chapter-11/company-website/package.json            | 2 +-
 chapter-12/color-organizer/package.json            | 2 +-
 chapter-12/server-render-recipes/package.json      | 2 +-
 12 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/chapter-06/color-organizer/package.json b/chapter-06/color-organizer/package.json
index 5aa57582..9cd497d9 100644
--- a/chapter-06/color-organizer/package.json
+++ b/chapter-06/color-organizer/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "React",
diff --git a/chapter-07/color-organizer/package.json b/chapter-07/color-organizer/package.json
index 244469e7..aae5235b 100644
--- a/chapter-07/color-organizer/package.json
+++ b/chapter-07/color-organizer/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "React",
diff --git a/chapter-08/color-organizer-redux/package.json b/chapter-08/color-organizer-redux/package.json
index 3301e444..22cc9a37 100644
--- a/chapter-08/color-organizer-redux/package.json
+++ b/chapter-08/color-organizer-redux/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "redux",
diff --git a/chapter-09/color-organizer-containers/package.json b/chapter-09/color-organizer-containers/package.json
index 62b5830d..227347de 100644
--- a/chapter-09/color-organizer-containers/package.json
+++ b/chapter-09/color-organizer-containers/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "React",
diff --git a/chapter-09/color-organizer-context/package.json b/chapter-09/color-organizer-context/package.json
index 62b5830d..227347de 100644
--- a/chapter-09/color-organizer-context/package.json
+++ b/chapter-09/color-organizer-context/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "React",
diff --git a/chapter-09/color-organizer-explicit/package.json b/chapter-09/color-organizer-explicit/package.json
index 62b5830d..227347de 100644
--- a/chapter-09/color-organizer-explicit/package.json
+++ b/chapter-09/color-organizer-explicit/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "React",
diff --git a/chapter-09/color-organizer/package.json b/chapter-09/color-organizer/package.json
index 824f36c9..0558dc37 100644
--- a/chapter-09/color-organizer/package.json
+++ b/chapter-09/color-organizer/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/httpster -p 3000 -d ./dist"
+    "start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
   },
   "keywords": [
     "React",
diff --git a/chapter-10/color-organizer/package.json b/chapter-10/color-organizer/package.json
index c9ec410e..3bf23088 100644
--- a/chapter-10/color-organizer/package.json
+++ b/chapter-10/color-organizer/package.json
@@ -12,7 +12,7 @@
     "test": "jest",
     "posttest": "npm run lint",
     "coverage": "opener ./coverage/lcov-report/index.html",
-    "dev": "opener http://localhost:3000 & ./node_modules/.bin/webpack-dev-server"
+    "dev": "opener http://localhost:3000 & webpack-dev-server"
   },
   "keywords": [
     "React",
diff --git a/chapter-11/color-organizer/package.json b/chapter-11/color-organizer/package.json
index 36105b83..b7b8935d 100644
--- a/chapter-11/color-organizer/package.json
+++ b/chapter-11/color-organizer/package.json
@@ -6,8 +6,8 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "./node_modules/.bin/httpster -d ./dist/ -p 3000",
-    "dev": "opener http://localhost:3000 & ./node_modules/.bin/webpack-dev-server"
+    "start": "httpster -d ./dist/ -p 3000",
+    "dev": "opener http://localhost:3000 & webpack-dev-server"
   },
   "keywords": [
     "React",
diff --git a/chapter-11/company-website/package.json b/chapter-11/company-website/package.json
index eed1d3cf..96f78424 100644
--- a/chapter-11/company-website/package.json
+++ b/chapter-11/company-website/package.json
@@ -4,7 +4,7 @@
   "description": "A React Router tutorial.",
   "main": "index.js",
   "scripts": {
-    "start": "opener http://localhost:3000 & ./node_modules/.bin/webpack-dev-server"
+    "start": "opener http://localhost:3000 & webpack-dev-server"
   },
   "author": "Eve Porcello <eve@moonhighway.com> (http://www.moonhighway.com)",
   "license": "MIT",
diff --git a/chapter-12/color-organizer/package.json b/chapter-12/color-organizer/package.json
index 36333a88..cc6ac394 100644
--- a/chapter-12/color-organizer/package.json
+++ b/chapter-12/color-organizer/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "./node_modules/.bin/babel-node ./src/server"
+    "start": "babel-node ./src/server"
   },
   "keywords": [
     "React",
diff --git a/chapter-12/server-render-recipes/package.json b/chapter-12/server-render-recipes/package.json
index 049c7eae..f7e54b94 100644
--- a/chapter-12/server-render-recipes/package.json
+++ b/chapter-12/server-render-recipes/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --progress",
     "prestart": "npm run build",
-    "start": "./node_modules/.bin/babel-node index-server.js"
+    "start": "babel-node index-server.js"
   },
   "keywords": [
     "React",

From 158a108a4253de41160421ffdc1858391bc73a47 Mon Sep 17 00:00:00 2001
From: MoonTahoe <alex@moonhighway.com>
Date: Wed, 11 Oct 2017 11:31:26 -0700
Subject: [PATCH 03/10] Fixes Time of day AM PM bug with clock

---
 chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js | 8 ++++----
 chapter-07/mounting-lifecycle-clock/src/clock.js          | 6 +++---
 chapter-07/mounting-lifecycle-clock/src/lib.js            | 5 +++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js b/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js
index 31709cca..9ce57d82 100644
--- a/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js
+++ b/chapter-07/mounting-lifecycle-clock/dist/assets/bundle.js
@@ -21236,7 +21236,7 @@ var Clock = function (_Component) {
                 hours = _state.hours,
                 minutes = _state.minutes,
                 seconds = _state.seconds,
-                timeOfDay = _state.timeOfDay;
+                ampm = _state.ampm;
 
             return React.createElement(
                 'div',
@@ -21269,7 +21269,7 @@ var Clock = function (_Component) {
                 React.createElement(
                     'span',
                     null,
-                    timeOfDay
+                    ampm
                 ),
                 React.createElement(
                     'button',
@@ -21323,7 +21323,7 @@ var civilianHours = exports.civilianHours = function civilianHours(clockTime) {
 
 var appendAMPM = exports.appendAMPM = function appendAMPM(clockTime) {
     return _extends({}, clockTime, {
-        ampm: clockTime.hours >= 12 ? "PM" : "AM"
+        ampm: clockTime.hours >= 12 ? "pm" : "am"
     });
 };
 
@@ -21353,7 +21353,7 @@ var doubleDigits = exports.doubleDigits = function doubleDigits(civilianTime) {
     return compose(prependZero("hours"), prependZero("minutes"), prependZero("seconds"))(civilianTime);
 };
 
-var getClockTime = exports.getClockTime = compose(getCurrentTime, abstractClockTime, convertToCivilianTime, doubleDigits);
+var getClockTime = exports.getClockTime = compose(getCurrentTime, abstractClockTime, convertToCivilianTime, appendAMPM, doubleDigits);
 
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/chapter-07/mounting-lifecycle-clock/src/clock.js b/chapter-07/mounting-lifecycle-clock/src/clock.js
index 706ac234..cadbc08c 100644
--- a/chapter-07/mounting-lifecycle-clock/src/clock.js
+++ b/chapter-07/mounting-lifecycle-clock/src/clock.js
@@ -21,7 +21,7 @@ export default class Clock extends Component {
     }
 
     render() {
-        const { hours, minutes, seconds, timeOfDay } = this.state
+        const { hours, minutes, seconds, ampm } = this.state
         return (
             <div className="clock">
                 <span>{hours}</span>
@@ -29,10 +29,10 @@ export default class Clock extends Component {
                 <span>{minutes}</span>
                 <span>:</span>
                 <span>{seconds}</span>
-                <span>{timeOfDay}</span>
+                <span>{ampm}</span>
                 <button onClick={this.props.onClose}>x</button>
             </div>
         )
     }
 
-}
\ No newline at end of file
+}
diff --git a/chapter-07/mounting-lifecycle-clock/src/lib.js b/chapter-07/mounting-lifecycle-clock/src/lib.js
index f1b5ff7c..d51d27a5 100644
--- a/chapter-07/mounting-lifecycle-clock/src/lib.js
+++ b/chapter-07/mounting-lifecycle-clock/src/lib.js
@@ -19,7 +19,7 @@ export const civilianHours = clockTime =>
 export const appendAMPM = clockTime =>
     ({
         ...clockTime,
-        ampm: (clockTime.hours >= 12) ? "PM" : "AM"
+        ampm: (clockTime.hours >= 12) ? "pm" : "am"
     })
 
 export const prependZero = key => clockTime =>
@@ -54,5 +54,6 @@ export const getClockTime = compose(
     getCurrentTime,
     abstractClockTime,
     convertToCivilianTime,
+    appendAMPM,
     doubleDigits
-)
\ No newline at end of file
+)

From 868fb59adb968cae1bc996e5ae3c171ee03afac7 Mon Sep 17 00:00:00 2001
From: Eve Porcello <eve@moonhighway.com>
Date: Thu, 12 Oct 2017 11:05:00 -0700
Subject: [PATCH 04/10] Adds a local version of the Flux sample (#19)

* Adds local flux sample and fixes a typo
* typo fix
---
 chapter-02/readme.md                          |   2 +-
 .../02-flux.html                              | 159 ++++++++++++++++++
 chapter-07/readme.md                          |   2 +-
 3 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 chapter-07/06-managing-state-outside-react/02-flux.html

diff --git a/chapter-02/readme.md b/chapter-02/readme.md
index 050ee90a..7d7c6cef 100644
--- a/chapter-02/readme.md
+++ b/chapter-02/readme.md
@@ -18,7 +18,7 @@ Samples
   3. Without let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/03-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/03-let.html), [bin](http://jsbin.com/gapoxa/3/edit?js,output))
   4. With let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/04-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/04-let.html), [bin](http://jsbin.com/gapoxa/4/edit?js,output))
   5. Loops with var ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/05-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/05-let.html), [bin](http://jsbin.com/gapoxa/5/edit?js,output))
-  6. Loops with const ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/06-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/06-let.html), [bin](http://jsbin.com/gapoxa/6/edit?js,output))
+  6. Loops with let ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/06-let.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/06-let.html), [bin](http://jsbin.com/gapoxa/6/edit?js,output))
 
 #### template strings
   7. Without Template Strings - Simple Concatenation ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/01-declaring-variables/07-template-strings.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/01-declaring-variables/07-template-strings.html), [bin](http://jsbin.com/gapoxa/7/edit?js,output))
diff --git a/chapter-07/06-managing-state-outside-react/02-flux.html b/chapter-07/06-managing-state-outside-react/02-flux.html
new file mode 100644
index 00000000..b5971082
--- /dev/null
+++ b/chapter-07/06-managing-state-outside-react/02-flux.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8">
+    <style media="screen">
+    @import url(https://fonts.googleapis.com/css?family=Knewave);
+    html, body {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      overflow: hidden;
+    }
+    #react-container {
+      height: calc(100% - 2.5em);
+      margin: 1em;
+      border: 0.25em double orange;
+      color: blue;
+      border-radius: 0.5em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: "Knewave", fantasy, Arial;
+      font-size: 5em;
+    }
+    #react-container span {
+      display: block;
+      text-align: center;
+      cursor: pointer;
+      font-size: 0.5em;
+    }
+    #react-container span:last-child {
+      color: grey;
+      font-size: 0.5em;
+    }
+
+    </style>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flux/2.1.1/Flux.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.0.0/EventEmitter.min.js"></script>
+    <title>Flux</title>
+</head>
+<body>
+<div id="react-container"></div>
+  <script type="text/babel">
+
+    //
+    // Simple Flux Sample, with Facebook's Flux Dispatcher
+    //
+
+    const { Component } = React
+    const { Dispatcher } = Flux
+
+    /* View : React Countdown Component
+    ************************************************************/
+
+    const Countdown = ({count, tick, reset}) => {
+
+    if (count) {
+      setTimeout(() => tick(count), 1000)
+    }
+
+    return (count) ?
+        <h1>{count}</h1> :
+        <div onClick={() => reset(10)}>
+            <span>CELEBRATE!!!</span>
+            <span>(click to start over)</span>
+        </div>
+
+    }
+
+    /* Action Creators : Create Action Objects
+    ************************************************************/
+
+    const countdownActions = dispatcher =>
+    ({
+      tick(count) {
+        dispatcher.handleAction({
+          type: 'TICK',
+          count: count - 1
+        })
+      },
+      reset(count) {
+        dispatcher.handleAction({
+          type: 'RESET',
+          count
+        })
+      }
+    })
+
+    /* CountDispatcher : Dispatches actions for the Countodown
+    ************************************************************/
+
+    class CountdownDispatcher extends Dispatcher {
+
+    handleAction(action) {
+      console.log('dispatching action:', action)
+      this.dispatch({
+        source: 'VIEW_ACTION',
+        action
+      })
+    }
+
+    }
+
+    /* The Store : Holds the Countdown Info
+    ************************************************************/
+
+    class CountdownStore extends EventEmitter {
+
+    constructor(count=5, dispatcher) {
+      super()
+      this._count = count
+      this.dispatcherIndex = dispatcher.register(this.dispatch.bind(this))
+    }
+
+    get count() {
+      return this._count
+    }
+
+    dispatch(payload) {
+      const { type, count } = payload.action
+      switch(type) {
+
+        case "TICK":
+          this._count = count
+          this.emit("TICK")
+          return true
+
+        case "RESET":
+          this._count = count
+          this.emit("RESET")
+          return true
+
+      }
+    }
+
+    }
+
+    /* Flux App : Put it all together
+    ************************************************************/
+    const appDispatcher = new CountdownDispatcher()
+    const actions = countdownActions(appDispatcher)
+    const store = new CountdownStore(10, appDispatcher)
+
+    const render = count => ReactDOM.render(
+      <Countdown count={count} {...actions} />,
+      document.getElementById('react-container')
+    )
+
+    store.on("TICK", ()=> render(store.count))
+    store.on("RESET", ()=> render(store.count))
+    render(store.count)
+
+  </script>
+</body>
+</html>
diff --git a/chapter-07/readme.md b/chapter-07/readme.md
index a490778e..173a4b06 100644
--- a/chapter-07/readme.md
+++ b/chapter-07/readme.md
@@ -48,4 +48,4 @@ Samples
 ### Managing State Outside of React
 
   1. Clock without React State ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/06-managing-state-outside-react/01-state.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/06-managing-state-outside-react/01-state.html), [bin](http://jsbin.com/juxewiw/1/edit?js,output))
-  2. Flux ([bin only](http://jsbin.com/juxewiw/2/edit?js,console,output))
+  2. Flux ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-07/06-managing-state-outside-react/02-flux.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-07/06-managing-state-outside-react/02-flux.html), [bin](http://jsbin.com/juxewiw/2/edit?js,console,output))

From 6e4a3c715f31ca283bad8d7428104115830650ee Mon Sep 17 00:00:00 2001
From: Alex Banks <alex@moonhighway.com>
Date: Sun, 31 Dec 2017 11:07:25 -0800
Subject: [PATCH 05/10] Update 10-template-strings.html

from incorrect `.getYear()` to correct `.getFullYear()`...
---
 chapter-02/01-declaring-variables/10-template-strings.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chapter-02/01-declaring-variables/10-template-strings.html b/chapter-02/01-declaring-variables/10-template-strings.html
index f3e668fd..d5d8e999 100644
--- a/chapter-02/01-declaring-variables/10-template-strings.html
+++ b/chapter-02/01-declaring-variables/10-template-strings.html
@@ -31,7 +31,7 @@ <h2>${article.title}</h2>
           ${article.body}
       </article>
       <footer>
-          <p>copyright ${new Date().getYear()} | The HTML5 Blog</p>
+          <p>copyright ${new Date().getFullYear()} | The HTML5 Blog</p>
       </footer>
     </section>
     `

From a686f50a5a515f75fca1a69e9d1d2244baf67009 Mon Sep 17 00:00:00 2001
From: Alex Banks <alex@moonhighway.com>
Date: Sun, 31 Dec 2017 11:09:35 -0800
Subject: [PATCH 06/10] Update 04-imperative-clock.js

Removes `var time=""`
---
 chapter-03/09-composition/04-imperative-clock.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/chapter-03/09-composition/04-imperative-clock.js b/chapter-03/09-composition/04-imperative-clock.js
index 3ec1bc2d..3ea52914 100644
--- a/chapter-03/09-composition/04-imperative-clock.js
+++ b/chapter-03/09-composition/04-imperative-clock.js
@@ -15,7 +15,6 @@ function getClockTime() {
 
     // Get the Current Time
     var date = new Date();
-    var time = "";
 
     // Serialize clock time
     var time = {
@@ -54,4 +53,4 @@ function getClockTime() {
         + time.seconds + " "
         + time.ampm;
 
-}
\ No newline at end of file
+}

From ca31c5367d7576a68d376c26aa6d589a3ae20bfe Mon Sep 17 00:00:00 2001
From: Jack Liu <oseack@gmail.com>
Date: Wed, 7 Feb 2018 19:33:39 -0500
Subject: [PATCH 07/10] Fix a typo (#25)

---
 chapter-02/05-promises/01-promises.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chapter-02/05-promises/01-promises.html b/chapter-02/05-promises/01-promises.html
index b7b686d8..e6d987e8 100644
--- a/chapter-02/05-promises/01-promises.html
+++ b/chapter-02/05-promises/01-promises.html
@@ -18,7 +18,7 @@ <h1>Promises</h1>
       request.onload = () =>
            (request.status === 200) ?
             resolves(JSON.parse(request.response).results) :
-            reject(Error(request.statusText))
+            rejects(Error(request.statusText))
       request.onerror = (err) => rejects(err)
       request.send()
     })

From e0346c72d5c5d643bb671b46f19b6ee189d26a1c Mon Sep 17 00:00:00 2001
From: Alex Banks <alex@moonhighway.com>
Date: Sun, 11 Feb 2018 15:45:01 -0800
Subject: [PATCH 08/10] Update 02-mounting.html

Prints the error message instead of the word error...
---
 chapter-07/01-mounting-lifecycle/02-mounting.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chapter-07/01-mounting-lifecycle/02-mounting.html b/chapter-07/01-mounting-lifecycle/02-mounting.html
index 4268d65c..fb366bd2 100644
--- a/chapter-07/01-mounting-lifecycle/02-mounting.html
+++ b/chapter-07/01-mounting-lifecycle/02-mounting.html
@@ -74,7 +74,7 @@ <h1>{name.first} {name.last}</h1>
                           ) :
                           <span>0 members loaded...</span>
                   }
-                  {(error) ? <p>Error Loading Members: error</p> : ""}
+                  {(error) ? <p>Error Loading Members: {error.message}</p> : ""}
         </div>
       )
     }

From 796ebc37ceaac4a391dd3c20d16ce37f1e199338 Mon Sep 17 00:00:00 2001
From: Seongbin Kim <seongbin9786@gmail.com>
Date: Tue, 1 May 2018 02:32:00 +0900
Subject: [PATCH 09/10] Fix typo error (#29)

FROM:
##### Version 1 of te sample in the editor:

TO:
##### Version 1 of the sample in the editor:
---
 chapter-01/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chapter-01/readme.md b/chapter-01/readme.md
index 81c82956..3d22eb2a 100644
--- a/chapter-01/readme.md
+++ b/chapter-01/readme.md
@@ -91,7 +91,7 @@ To
 [http://output.jsbin.com/gosabo/quite](http://output.jsbin.com/gosabo/quiet)
 ##### Version 1 of the sample as output:
 [http://output.jsbin.com/gosabo/1](http://output.jsbin.com/gosabo/1)
-##### Version 1 of te sample in the editor:
+##### Version 1 of the sample in the editor:
 [http://output.jsbin.com/gosabo/1/edit](http://output.jsbin.com/gosabo/1/edit)
 ##### Version 2 of the sample as output:
 [http://output.jsbin.com/gosabo/2](http://output.jsbin.com/gosabo/2)

From e020939943a523d55a8780c308ac0d7cdb4f11a3 Mon Sep 17 00:00:00 2001
From: Aarif Khamdi <aarifkhamdi@gmail.com>
Date: Wed, 8 May 2019 02:41:41 +0500
Subject: [PATCH 10/10] redirecting fix (#38)

---
 chapter-11/company-website/package.json | 3 ++-
 chapter-11/company-website/src/index.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/chapter-11/company-website/package.json b/chapter-11/company-website/package.json
index 96f78424..e9af5685 100644
--- a/chapter-11/company-website/package.json
+++ b/chapter-11/company-website/package.json
@@ -4,7 +4,8 @@
   "description": "A React Router tutorial.",
   "main": "index.js",
   "scripts": {
-    "start": "opener http://localhost:3000 & webpack-dev-server"
+    "start": "opener http://localhost:3000 & webpack-dev-server",
+    "build": "webpack --progress"
   },
   "author": "Eve Porcello <eve@moonhighway.com> (http://www.moonhighway.com)",
   "license": "MIT",
diff --git a/chapter-11/company-website/src/index.js b/chapter-11/company-website/src/index.js
index cf29e6e7..3d98a0bb 100644
--- a/chapter-11/company-website/src/index.js
+++ b/chapter-11/company-website/src/index.js
@@ -24,10 +24,10 @@ render(
     <div className="main">
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
         <Redirect from="/history" to="/about/history" />
         <Redirect from="/services" to="/about/services" />
         <Redirect from="/location" to="/about/location" />
+        <Route path="/about" component={About} />
         <Route path="/events" component={Events} />
         <Route path="/products" component={Products} />
         <Route path="/contact" component={Contact} />