Added 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">
+     <!-- 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.

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

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

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

src/Header.js

@@ -1,21 +1,21 @@
-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>
 
     );
   }
 }
 
-export default Header;
+export default Header; // export Header component
 
 
 //document.querySelector("header").style.backgroundColor = "red"

src/SectionMain.js

@@ -1,14 +1,14 @@
-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>
 
     );
   }
 }
 
-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'; //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