diff --git a/.gitignore b/.gitignore
index 94a5cc5..a72f47a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
-.DS_Store
-node_modules
-.tmp
-./builds/app/js/app.js
+node_modules/
+./build/assets/app.js
+npm-debug.log
\ No newline at end of file
diff --git a/README.md b/README.md
old mode 100755
new mode 100644
index 947b7df..68eefab
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
# Building an Interface with React
-This is the repository for my course, [Building an Interface with React](). The full course will be available at [lynda.com](http://lynda.com).
-- [My Personal Website](http://raybo.org)
-
+This is the repository for the course, [Building an Interface with React](https://www.lynda.com/React-js-tutorials/Building-Web-Interface-React-js/495271-2.html).
+The code is converted from ES5 to ES6, gulp is replaced with webpack and React components are connected to Redux.
## Instructions
This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add `/tree/BRANCH_NAME` to the URL to go to the branch you want to peek at.
@@ -9,14 +8,10 @@ This repository has branches for each of the videos in the course. You can use t
1. Make sure you have these installed
- [node.js](http://nodejs.org/)
- [git](http://git-scm.com/)
- - [gulp](http://gulpjs.com/)
-2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone https://github.com/planetoftheweb/reactinterface.git`
+ - [webpack](http://webpack.js.org/)
+ - [karma](http://karma-runner.github.io/)
+2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone https://github.com/geobas/reactinterface`
3. CD to the folder `cd reactinterface`
4. Run `> npm install` to install the project dependencies
-5. Run `> gulp` command to start the automation
-6. Build something awesome
-
-For more help setting up a comprehensive Gulp.js workflow, check out [Web Project Workflows with Gulp.js, Git, and Browserify](http://www.lynda.com/Web-Web-Design-tutorials/Web-Project-Workflows-Gulpjs-Git-Browserify/154416-2.html).
-
-## More Stuff
-Check out some of my [other courses on lynda.com](http://lynda.com/rayvillalobos). You can also check out my [youtube channel](http://youtube.com/planetoftheweb), [follow me on twitter](http://twitter.com/planetoftheweb), or read [my blog](http://raybo.org).
+5. Run `> npm start` command to start webpack-dev-server
+6. Build something awesome
\ No newline at end of file
diff --git a/build/assets/data.json b/build/assets/data.json
new file mode 100644
index 0000000..9a561cf
--- /dev/null
+++ b/build/assets/data.json
@@ -0,0 +1,30 @@
+[
+ {
+ "id": "1",
+ "petName": "Buffy",
+ "ownerName": "Hassum Harrod",
+ "aptDate": "2016-06-20 15:30",
+ "aptNotes": "This Chihuahua has not eaten for three days and is lethargic"
+ },
+ {
+ "id": "2",
+ "petName": "Spot",
+ "ownerName": "Constance Smith",
+ "aptDate": "2016-06-24 08:30",
+ "aptNotes": "This German Shepherd is having some back pain"
+ },
+ {
+ "id": "3",
+ "petName": "Goldie",
+ "ownerName": "Barot Bellingham",
+ "aptDate": "2016-06-22 15:50",
+ "aptNotes": "This Goldfish has some weird spots in the belly"
+ },
+ {
+ "id": "4",
+ "petName": "Mitten",
+ "ownerName": "Hillary Goldwyn",
+ "aptDate": "2016-06-21 9:15",
+ "aptNotes": "Cat has excessive hairballs"
+ }
+]
\ No newline at end of file
diff --git a/builds/app/images/wisdompetlogo.svg b/build/assets/images/wisdompetlogo.svg
similarity index 100%
rename from builds/app/images/wisdompetlogo.svg
rename to build/assets/images/wisdompetlogo.svg
diff --git a/builds/app/css/style.css b/build/assets/style.css
similarity index 97%
rename from builds/app/css/style.css
rename to build/assets/style.css
index d0e3def..b42cf2a 100644
--- a/builds/app/css/style.css
+++ b/build/assets/style.css
@@ -32,7 +32,7 @@ header .navbar-default {
/** Navbar Brand **/
header .navbar-brand {
- background: url(../images/wisdompetlogo.svg);
+ background: url(images/wisdompetlogo.svg);
background-repeat: no-repeat;
background-position: 15px 0;
}
diff --git a/build/index.html b/build/index.html
new file mode 100644
index 0000000..09e3ae4
--- /dev/null
+++ b/build/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Building an Interface with React
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/builds/app/index.html b/builds/app/index.html
deleted file mode 100644
index 969d837..0000000
--- a/builds/app/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
-
-
- Building an Interface with React
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/builds/app/js/app.js b/builds/app/js/app.js
deleted file mode 100644
index 072c500..0000000
--- a/builds/app/js/app.js
+++ /dev/null
@@ -1,36331 +0,0 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o camelize('background-color')
- * < "backgroundColor"
- *
- * @param {string} string
- * @return {string}
- */
-function camelize(string) {
- return string.replace(_hyphenPattern, function (_, character) {
- return character.toUpperCase();
- });
-}
-
-module.exports = camelize;
-},{}],4:[function(require,module,exports){
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @typechecks
- */
-
-'use strict';
-
-var camelize = require('./camelize');
-
-var msPattern = /^-ms-/;
-
-/**
- * Camelcases a hyphenated CSS property name, for example:
- *
- * > camelizeStyleName('background-color')
- * < "backgroundColor"
- * > camelizeStyleName('-moz-transition')
- * < "MozTransition"
- * > camelizeStyleName('-ms-transition')
- * < "msTransition"
- *
- * As Andi Smith suggests
- * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
- * is converted to lowercase `ms`.
- *
- * @param {string} string
- * @return {string}
- */
-function camelizeStyleName(string) {
- return camelize(string.replace(msPattern, 'ms-'));
-}
-
-module.exports = camelizeStyleName;
-},{"./camelize":3}],5:[function(require,module,exports){
-'use strict';
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- *
- */
-
-var isTextNode = require('./isTextNode');
-
-/*eslint-disable no-bitwise */
-
-/**
- * Checks if a given DOM node contains or is another DOM node.
- */
-function containsNode(outerNode, innerNode) {
- if (!outerNode || !innerNode) {
- return false;
- } else if (outerNode === innerNode) {
- return true;
- } else if (isTextNode(outerNode)) {
- return false;
- } else if (isTextNode(innerNode)) {
- return containsNode(outerNode, innerNode.parentNode);
- } else if ('contains' in outerNode) {
- return outerNode.contains(innerNode);
- } else if (outerNode.compareDocumentPosition) {
- return !!(outerNode.compareDocumentPosition(innerNode) & 16);
- } else {
- return false;
- }
-}
-
-module.exports = containsNode;
-},{"./isTextNode":18}],6:[function(require,module,exports){
-(function (process){
-'use strict';
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @typechecks
- */
-
-var invariant = require('./invariant');
-
-/**
- * Convert array-like objects to arrays.
- *
- * This API assumes the caller knows the contents of the data type. For less
- * well defined inputs use createArrayFromMixed.
- *
- * @param {object|function|filelist} obj
- * @return {array}
- */
-function toArray(obj) {
- var length = obj.length;
-
- // Some browsers builtin objects can report typeof 'function' (e.g. NodeList
- // in old versions of Safari).
- !(!Array.isArray(obj) && (typeof obj === 'object' || typeof obj === 'function')) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Array-like object expected') : invariant(false) : void 0;
-
- !(typeof length === 'number') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Object needs a length property') : invariant(false) : void 0;
-
- !(length === 0 || length - 1 in obj) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Object should have keys for indices') : invariant(false) : void 0;
-
- !(typeof obj.callee !== 'function') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Object can\'t be `arguments`. Use rest params ' + '(function(...args) {}) or Array.from() instead.') : invariant(false) : void 0;
-
- // Old IE doesn't give collections access to hasOwnProperty. Assume inputs
- // without method will throw during the slice call and skip straight to the
- // fallback.
- if (obj.hasOwnProperty) {
- try {
- return Array.prototype.slice.call(obj);
- } catch (e) {
- // IE < 9 does not support Array#slice on collections objects
- }
- }
-
- // Fall back to copying key by key. This assumes all keys have a value,
- // so will not preserve sparsely populated inputs.
- var ret = Array(length);
- for (var ii = 0; ii < length; ii++) {
- ret[ii] = obj[ii];
- }
- return ret;
-}
-
-/**
- * Perform a heuristic test to determine if an object is "array-like".
- *
- * A monk asked Joshu, a Zen master, "Has a dog Buddha nature?"
- * Joshu replied: "Mu."
- *
- * This function determines if its argument has "array nature": it returns
- * true if the argument is an actual array, an `arguments' object, or an
- * HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()).
- *
- * It will return false for other array-like objects like Filelist.
- *
- * @param {*} obj
- * @return {boolean}
- */
-function hasArrayNature(obj) {
- return(
- // not null/false
- !!obj && (
- // arrays are objects, NodeLists are functions in Safari
- typeof obj == 'object' || typeof obj == 'function') &&
- // quacks like an array
- 'length' in obj &&
- // not window
- !('setInterval' in obj) &&
- // no DOM node should be considered an array-like
- // a 'select' element has 'length' and 'item' properties on IE8
- typeof obj.nodeType != 'number' && (
- // a real array
- Array.isArray(obj) ||
- // arguments
- 'callee' in obj ||
- // HTMLCollection/NodeList
- 'item' in obj)
- );
-}
-
-/**
- * Ensure that the argument is an array by wrapping it in an array if it is not.
- * Creates a copy of the argument if it is already an array.
- *
- * This is mostly useful idiomatically:
- *
- * var createArrayFromMixed = require('createArrayFromMixed');
- *
- * function takesOneOrMoreThings(things) {
- * things = createArrayFromMixed(things);
- * ...
- * }
- *
- * This allows you to treat `things' as an array, but accept scalars in the API.
- *
- * If you need to convert an array-like object, like `arguments`, into an array
- * use toArray instead.
- *
- * @param {*} obj
- * @return {array}
- */
-function createArrayFromMixed(obj) {
- if (!hasArrayNature(obj)) {
- return [obj];
- } else if (Array.isArray(obj)) {
- return obj.slice();
- } else {
- return toArray(obj);
- }
-}
-
-module.exports = createArrayFromMixed;
-}).call(this,require("rH1JPG"))
-},{"./invariant":16,"rH1JPG":28}],7:[function(require,module,exports){
-(function (process){
-'use strict';
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @typechecks
- */
-
-/*eslint-disable fb-www/unsafe-html*/
-
-var ExecutionEnvironment = require('./ExecutionEnvironment');
-
-var createArrayFromMixed = require('./createArrayFromMixed');
-var getMarkupWrap = require('./getMarkupWrap');
-var invariant = require('./invariant');
-
-/**
- * Dummy container used to render all markup.
- */
-var dummyNode = ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
-
-/**
- * Pattern used by `getNodeName`.
- */
-var nodeNamePattern = /^\s*<(\w+)/;
-
-/**
- * Extracts the `nodeName` of the first element in a string of markup.
- *
- * @param {string} markup String of markup.
- * @return {?string} Node name of the supplied markup.
- */
-function getNodeName(markup) {
- var nodeNameMatch = markup.match(nodeNamePattern);
- return nodeNameMatch && nodeNameMatch[1].toLowerCase();
-}
-
-/**
- * Creates an array containing the nodes rendered from the supplied markup. The
- * optionally supplied `handleScript` function will be invoked once for each
- *