From d532ade0891811586cc1978d1599d1c9b17edae5 Mon Sep 17 00:00:00 2001
From: Maria Belan-Crawford <44656740+mViolet@users.noreply.github.com>
Date: Thu, 3 Jun 2021 20:34:41 -0500
Subject: [PATCH] add comments

---
 .vscode/settings.json |  3 ---
 public/index.html     |  4 +++-
 src/App.js            | 30 +++++++++++++++---------------
 src/Aside.js          | 10 +++++-----
 src/Footer.js         |  8 ++++----
 src/Header.js         | 19 +++++++++----------
 src/SectionMain.js    | 10 +++++-----
 src/index.js          | 14 +++++++-------
 8 files changed, 48 insertions(+), 50 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index b110e44..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "terminal.integrated.fontSize": 60
-}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index cd92541..5f596d2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,9 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root">
+      <!-- this is where the App component will render -->
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.js b/src/App.js
index 6472345..27350df 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,22 @@
-import React, { Component } from 'react';
-import './App.css';
-import Header from './Header';
-import SectionMain from './SectionMain';
-import Aside from './Aside';
-import Footer from './Footer';
+import React, { Component } from 'react';  //import react and react Component (for the class component)
+import './App.css';  //styling
+import Header from './Header'; //importing the Header component
+import SectionMain from './SectionMain'; //SectionMain component
+import Aside from './Aside'; //Aside component
+import Footer from './Footer'; //Footer component
 
-class App extends Component {
+class App extends Component {  //create the App component
 
-  render() {
-    return (
-      <div className="App">
-        <Header backColor="green" width="50%"></Header>
-        <SectionMain></SectionMain>
-        <Aside></Aside>
-        <Footer></Footer>
+  render() { //invoke render method
+    return ( //return the div containing our components
+      <div className="App"> {/* JSX so camelCase - give the div element class of App */}
+        <Header backColor="green" width="50%"></Header> {/* header component with backColor and width props */}
+        <SectionMain></SectionMain> {/* section main component */}
+        <Aside></Aside> {/* Aside component */}
+        <Footer></Footer> {/* Footer component */}
       </div>
     );
   }
 }
 
-export default App;
+export default App; //export App component
diff --git a/src/Aside.js b/src/Aside.js
index 0698377..8e0df80 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
-import './Aside.css';
+import React, { Component } from 'react'; //import react and Component obj
+import './Aside.css'; //stylesheet for Aside
 
-class Aside extends Component {
-  render() {
+class Aside extends Component { //define the Aside component
+  render() { //render an aside element with a class of Aside
     return (
         <aside className="Aside">
         </aside>
@@ -11,4 +11,4 @@ class Aside extends Component {
   }
 }
 
-export default Aside;
+export default Aside; //export the Aside component
diff --git a/src/Footer.js b/src/Footer.js
index c116027..b703aea 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import './Footer.css';
+import React, { Component } from 'react'; //same thing  import react and the Component obj
+import './Footer.css';  //stylesheet
 
-class Footer extends Component {
+class Footer extends Component { //define the footer class which will render a footer element with the class Footer
   render() {
     return (
         <footer className="Footer">
@@ -11,4 +11,4 @@ class Footer extends Component {
   }
 }
 
-export default Footer;
+export default Footer; //export the Footer component
diff --git a/src/Header.js b/src/Header.js
index 5c9495c..5c7f016 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,21 +1,20 @@
-import React, { Component } from 'react';
-import './Header.css';
+import React, { Component } from 'react'; //import react and the Component object to use with out class based component
+import './Header.css'; //header css stylesheet
 
-class Header extends Component {
-  render() {
-    const style = {
-      width: this.props.width,
+class Header extends Component { //defining the header class
+  render() { //render method
+    const style = { //defining the styles using a custom object
+      width: this.props.width, // we can use this because it's a class - passing in width and backColor via props
       backgroundColor: this.props.backColor
     }
-    return (
-        <header style={style} className="Header-main">
+    return ( //returning the element header
+        <header style={style} className="Header-main"> {/* header with inline styles and classname Header-main - style is passed in as obj */}
         </header>
-
     );
   }
 }
 
-export default Header;
+export default Header; //export Header component
 
 
 //document.querySelector("header").style.backgroundColor = "red"
diff --git a/src/SectionMain.js b/src/SectionMain.js
index cc07a5e..70142d8 100644
--- a/src/SectionMain.js
+++ b/src/SectionMain.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
-import './SectionMain.css';
+import React, { Component } from 'react'; //import react and Component obj
+import './SectionMain.css'; //SectionMain stylesheet
 
-class SectionMain extends Component {
-  render() {
+class SectionMain extends Component { //define the SectionMain component
+  render() { //render a section element with class of SectionMain
     return (
         <section className="SectionMain">
         </section>
@@ -11,4 +11,4 @@ class SectionMain extends Component {
   }
 }
 
-export default SectionMain;
+export default SectionMain; //export SectionMain component
diff --git a/src/index.js b/src/index.js
index 726c418..4999b1d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from 'react';  //import react
+import ReactDOM from 'react-dom'; //import ReactDOM
+import './index.css'; //import index css styles
+import App from './App'; //import App component
+import registerServiceWorker from './registerServiceWorker'; //for measuring performance
 
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+ReactDOM.render(<App />, document.getElementById('root')); //render our App component which will be put intop the element of the DOM which has the id of "root"
+registerServiceWorker(); //evil bob