added comments and notes

Author: Kevin Turney

app/Components/App.js

@@ -6,6 +6,8 @@ import Battle from './Battle';
 import Results from './Results';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 
+// the entry point for the app, components are wrapped in a Router component
+// each route renders a component
 class App extends React.Component {
   render() {
     return (

app/Components/Battle.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import PlayerPreview from './PlayerPreview';
 
+// Controlled componet
 class PlayerInput extends Component {
   constructor(props) {
     super(props);
@@ -52,6 +53,7 @@ PlayerInput.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 };
 
+/* -------    Battle owns state which is passed to PlayerPreview and PlayerInput*/
 class Battle extends Component {
   constructor(props) {
     super(props);
@@ -93,6 +95,8 @@ class Battle extends Component {
     const playerOneImage = this.state.playerOneImage;
     const playerTwoImage = this.state.playerTwoImage;
 
+    /* Player name is initially false, we render a PlayerInput component
+   When we fetch a player, we render a reset button until Battle is clicked*/
     return (
       <div>
         <div className="row">

app/Components/Loading.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+// Reusable Component, has default props if not user config'd
 const styles = {
   content: {
     textAlign: 'center',

app/utils/api.js

@@ -2,6 +2,7 @@
 
 import axios from 'axios';
 
+// in case of rate limiting when hitting the github api
 const id = 'YOUR CLIENT ID';
 const sec = 'YOUR SECRET ID';
 const params = '?clent_id=' + id + '&client_secret=' + sec;
@@ -34,7 +35,8 @@ const handleError = error => {
   return null;
 };
 
-// composition of functions
+// composition of functions, pass in array of functions, when results come back
+// we process data, each will return an object(net is an array of objects)
 const getUserData = player => {
   return axios.all([getProfile(player), getRepos(player)]).then(data => {
     const profile = data[0];

webpack.config.js

@@ -26,6 +26,7 @@ let config = {
   ],
 };
 
+// conditional for production deployment environment
 if (process.env.NODE_ENV === 'production') {
   config.plugins.push(
     new webpack.DefinePlugin({