From a16b833a2805e60c713952c5c0a540e6798d4047 Mon Sep 17 00:00:00 2001
From: khafrewatkins <khafrewatkins@gmail.com>
Date: Thu, 3 Jun 2021 18:51:44 -0500
Subject: [PATCH 1/4] Update App.js

---
 src/App.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 6472345..5b0874a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,19 +4,25 @@ import Header from './Header';
 import SectionMain from './SectionMain';
 import Aside from './Aside';
 import Footer from './Footer';
-
+//class based component for App - holds all of our app's components
 class App extends Component {
 
   render() {
     return (
       <div className="App">
         <Header backColor="green" width="50%"></Header>
+      //class based component for App - holds all of our app's components
         <SectionMain></SectionMain>
+      // plugs in SectionMain component
         <Aside></Aside>
+       // plugs in the Aside component
         <Footer></Footer>
+      // plugs in SectionMain component
       </div>
     );
   }
 }
 
 export default App;
+// allows App class to be used outside of this file
+

From 57f522d1fedb913770ece8cd30266b0f76651fba Mon Sep 17 00:00:00 2001
From: khafrewatkins <khafrewatkins@gmail.com>
Date: Thu, 3 Jun 2021 19:04:21 -0500
Subject: [PATCH 2/4] Update Header.js

---
 src/Header.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Header.js b/src/Header.js
index 5c9495c..dc24cf1 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,21 +1,26 @@
 import React, { Component } from 'react';
 import './Header.css';
+// imports the CSS file for use within this file
 
+// class-based component that controls how the Header behaves
 class Header extends Component {
   render() {
     const style = {
       width: this.props.width,
       backgroundColor: this.props.backColor
+      // App.js pulls props from here
     }
     return (
         <header style={style} className="Header-main">
         </header>
+  // gives us what the Header component class will return
 
     );
   }
 }
 
 export default Header;
+// allow access of Header outside this file
 
 
 //document.querySelector("header").style.backgroundColor = "red"

From b5fabe5a5650ad36a11eb3f05b9075c50f0c16d4 Mon Sep 17 00:00:00 2001
From: khafrewatkins <khafrewatkins@gmail.com>
Date: Thu, 3 Jun 2021 19:09:01 -0500
Subject: [PATCH 3/4] Update SectionMain.js

---
 src/SectionMain.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/SectionMain.js b/src/SectionMain.js
index cc07a5e..73c4d37 100644
--- a/src/SectionMain.js
+++ b/src/SectionMain.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import './SectionMain.css';
-
+//class based component for SectionMain - holds all of our SectionMain's components
 class SectionMain extends Component {
   render() {
     return (
@@ -8,7 +8,10 @@ class SectionMain extends Component {
         </section>
 
     );
+    // this tells our App.js what to render when we plug SectionMain component in
   }
+  
 }
 
 export default SectionMain;
+// allow access of SectionMain outside this file

From 3b03bdda44f1309dd9c5040d1cb071a5388ba7f0 Mon Sep 17 00:00:00 2001
From: khafrewatkins <khafrewatkins@gmail.com>
Date: Thu, 3 Jun 2021 19:16:35 -0500
Subject: [PATCH 4/4] Update index.js

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 726c418..64e27c4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,6 @@ import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-
+// tells the DOM what to render - App.js renders to the root div of index.html
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();