From 9b73344c93e11d7ffd719221a4794941106f5ea8 Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 13:57:21 -0700
Subject: [PATCH 1/7] Added comments

---
 public/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index cd92541..d02911e 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">
+     <!-- Component will be rendered here -->
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

From 6351d96adf1248f28bf879153e887d858e50b154 Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 14:10:38 -0700
Subject: [PATCH 2/7] added comments

---
 src/App.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6472345..c608007 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,17 @@
-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 component object
+import './App.css'; //for css style
+import Header from './Header'; // import Header component
+import SectionMain from './SectionMain'; // import SectionMain component
+import Aside from './Aside'; // import Aside component
+import Footer from './Footer'; // import Footer component
 
-class App extends Component {
+class App extends Component { // create App from Component
 
-  render() {
+  render() { //invoke render method
     return (
-      <div className="App">
-        <Header backColor="green" width="50%"></Header>
+      <div className="App"> //giving div a className of App. camelcase tells use this is JSX
+        <Header backColor="green" width="50%"></Header> 
+        // ^ Header with properties
         <SectionMain></SectionMain>
         <Aside></Aside>
         <Footer></Footer>
@@ -19,4 +20,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App; // export App

From b1ee285554c54edef27a0f84857e6601f0dba7c2 Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 14:12:23 -0700
Subject: [PATCH 3/7] added comments

---
 src/Aside.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Aside.js b/src/Aside.js
index 0698377..2a7afa0 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import './Aside.css';
+import React, { Component } from 'react'; //import react and component
+import './Aside.css'; //import css styling
 
-class Aside extends Component {
+class Aside extends Component { //creating Aside object of Component
   render() {
     return (
         <aside className="Aside">
@@ -11,4 +11,4 @@ class Aside extends Component {
   }
 }
 
-export default Aside;
+export default Aside; //export Aside component

From 056ff8cbc1697a680c08f3d863a04e43313c393d Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 14:14:01 -0700
Subject: [PATCH 4/7] added comments

---
 src/Footer.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Footer.js b/src/Footer.js
index c116027..c0dd56f 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import './Footer.css';
+import React, { Component } from 'react'; // import react and component
+import './Footer.css'; //import css styling
 
-class Footer extends Component {
+class Footer extends Component { // creating Footer object of Component
   render() {
     return (
-        <footer className="Footer">
+        <footer className="Footer"> //give className to footer component
         </footer>
 
     );
   }
 }
 
-export default Footer;
+export default Footer; //export Footer component

From 344669aeb34c350473b88cc6ec5926a9441ed9a3 Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 14:16:44 -0700
Subject: [PATCH 5/7] added comments

---
 src/Header.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Header.js b/src/Header.js
index 5c9495c..d34f525 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
-import './Header.css';
+import React, { Component } from 'react'; // import react and component
+import './Header.css'; //import styling
 
-class Header extends Component {
+class Header extends Component { //create Header object from Component
   render() {
-    const style = {
+    const style = { //create style properties on Header class
       width: this.props.width,
       backgroundColor: this.props.backColor
     }
-    return (
+    return ( //return Header with object style and className Header-main
         <header style={style} className="Header-main">
         </header>
 
@@ -15,7 +15,7 @@ class Header extends Component {
   }
 }
 
-export default Header;
+export default Header; // export Header component
 
 
 //document.querySelector("header").style.backgroundColor = "red"

From d24390942e72c09edd57a0d6add289f628215944 Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 14:24:22 -0700
Subject: [PATCH 6/7] added comments

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

diff --git a/src/SectionMain.js b/src/SectionMain.js
index cc07a5e..c27d944 100644
--- a/src/SectionMain.js
+++ b/src/SectionMain.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import './SectionMain.css';
+import React, { Component } from 'react'; //import react and component
+import './SectionMain.css'; //import styling
 
-class SectionMain extends Component {
+class SectionMain extends Component { //create class SectionMain from Component
   render() {
-    return (
+    return ( //return section with className SectionMain
         <section className="SectionMain">
         </section>
 
@@ -11,4 +11,4 @@ class SectionMain extends Component {
   }
 }
 
-export default SectionMain;
+export default SectionMain; //export SectionMain component

From ebe9c5301240d5efd7e70ffa7b5455189ab2f7a1 Mon Sep 17 00:00:00 2001
From: Jonathan Yau <jonathankyau@gmail.com>
Date: Mon, 7 Jun 2021 14:27:13 -0700
Subject: [PATCH 7/7] added comments

---
 src/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/index.js b/src/index.js
index 726c418..f19a000 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'; //importReactDOM
+import './index.css'; //import css
+import App from './App'; //import App
+import registerServiceWorker from './registerServiceWorker'; //import registerServiceWorker for measuring performance
 
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+ReactDOM.render(<App />, document.getElementById('root')); //render App component in DOM where div with 'root' class
+registerServiceWorker(); //invoke performance measure