commented files for 100Devs homework

public/index.html

@@ -26,6 +26,7 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
+<!-- all files will be rendered into this div  -->
     <div id="root"></div>
     <!--
       This HTML file is a template.

src/App.css

@@ -1,28 +1,43 @@
-.App {
+/* create class "App" */
+.App { 
+/* aligns all text centered */
   text-align: center;
 }
 
+/* create class "App-logo */
 .App-logo {
+/* logo animation 20 second spin loop  */
   animation: App-logo-spin infinite 20s linear;
+/* logo height of 80px   */
   height: 80px;
 }
 
+/* create class "App-header */
 .App-header {
+/* header background color   */
   background-color: #222;
+/* header height   */
   height: 150px;
+/* header padding (space between border and element   */
   padding: 20px;
+/* header text color   */
   color: white;
 }
 
+/* create class "App-title */
 .App-title {
+/* title font size  */
   font-size: 1.5em;
 }
 
+/* create class "App-intro */
 .App-intro {
+/* intro font size   */
   font-size: large;
 }
 
 @keyframes App-logo-spin {
+/* logo animation spin start & end  */
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }

src/App.js

@@ -1,13 +1,21 @@
+// import react for this project
 import React, { Component } from 'react';
+// import app.css file from components folder on line 2
 import './App.css';
+// import Header file from components folder on line 2
 import Header from './Header';
+// import SectionMain file from components folder on line 2
 import SectionMain from './SectionMain';
+// import Aside file from components folder on line 2
 import Aside from './Aside';
+// import Footer file from components folder on line 2
 import Footer from './Footer';
 
+// create class-based component
 class App extends Component {
-
+// render method
   render() {
+//    return rendered HTML of the individual sections
     return (
       <div className="App">
         <Header backColor="green" width="50%"></Header>
@@ -18,5 +26,5 @@ class App extends Component {
     );
   }
 }
-
+// export App so it can be accessed in index.js
 export default App;

src/Aside.css

@@ -1,3 +1,4 @@
+/* declare class for aside section, set height, width, background color, and float it to the left edge of the viewport or preceding section */
 .Aside{
   height: 300px;
   width: 20%;

src/Aside.js

@@ -1,14 +1,21 @@
+// import react for this project
 import React, { Component } from 'react';
+// import Aside styling file from src
 import './Aside.css';
 
+// create class-based component for the aside section
 class Aside extends Component {
+  // render method
   render() {
+    //    return rendered HTML of the aside section
     return (
+      //   aside has class name so we can apply CSS styling to it, camelCase indicates JSX
         <aside className="Aside">
         </aside>
 
     );
   }
 }
 
+// export Aside component so it can be imported to App (parent component)
 export default Aside;

src/Footer.css

@@ -1,3 +1,4 @@
+/* create class "Footer", sets section height, background color, and moves footer below any floating elements */
 .Footer{
   height: 200px;
   background: orange;

src/Footer.js

@@ -1,14 +1,21 @@
+// import react for this project
 import React, { Component } from 'react';
+// import Footer styling file from src
 import './Footer.css';
 
+// create class-based component
 class Footer extends Component {
+  // render method
   render() {
+    //    return rendered HTML of the footer
     return (
+//   footer has class name so we can apply CSS styling to it, camelCase indicates JSX
         <footer className="Footer">
         </footer>
 
     );
   }
 }
 
+// export Footer so it can be imported to App (parent component)
 export default Footer;

src/Header.css

@@ -1,3 +1,4 @@
+/* create Header-main class, set header height to 300px */
 .Header-main{
   height: 300px;
 }

src/Header.js

@@ -1,9 +1,14 @@
+//  import react and component for use in this file
 import React, { Component } from 'react';
+// import Header styling file from src
 import './Header.css';
 
+// establish class-based component for Header element
 class Header extends Component {
+//   render style variable and return header with styling
   render() {
     const style = {
+//  grab styling from App.js (defined in return on line 21)
       width: this.props.width,
       backgroundColor: this.props.backColor
     }
@@ -15,7 +20,8 @@ class Header extends Component {
   }
 }
 
+// export Header component
 export default Header;
 
-
+// well that's an interesting comment right there...wonder what you were going to do with it?
 //document.querySelector("header").style.backgroundColor = "red"

src/SectionMain.css

@@ -1,3 +1,4 @@
+/* declare class for main content section, set height, width, background color, and float it to the left edge of the viewport or preceding section */
 .SectionMain{
   height: 300px;
   width: 80%;

src/SectionMain.js

@@ -1,14 +1,21 @@
+// import react for this project
 import React, { Component } from 'react';
+// import SectionMain styling file from src
 import './SectionMain.css';
 
+// create class-based component for main section
 class SectionMain extends Component {
+  // render method
   render() {
+    //    return rendered HTML of the main section
     return (
+      //   section has class name so we can apply CSS styling to it, camelCase indicates JSX
         <section className="SectionMain">
         </section>
 
     );
   }
 }
 
+// export SectionMain so it can be imported to App (parent component)
 export default SectionMain;

src/index.css

@@ -1,3 +1,4 @@
+/* declare style rule for body tag, set margin, padding, and base font-family */
 body {
   margin: 0;
   padding: 0;

src/index.js

@@ -1,9 +1,17 @@
-import React from 'react';
+// file used to render app component
+// import react so we can use methods in this file
+import React from 'react'; 
+// import react-dom, another package we installed, the virtual DOM, important so we can refresh individual elements
 import ReactDOM from 'react-dom';
+// import index.css from src file
 import './index.css';
+// import App.js from src file
 import App from './App';
+// import registerServiceWorker from src file, created during the "npx react-create-app _______" process
+// for functionality during loss of connectivity
 import registerServiceWorker from './registerServiceWorker';
 
-
+// virtual DOM renders the App component into root (a div in public/index.html)
 ReactDOM.render(<App />, document.getElementById('root'));
+// calls registerServiceWorker function
 registerServiceWorker();