add comments

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.

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

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

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

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"

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

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