Answer

.replit

@@ -0,0 +1,2 @@
+language = "nodejs"
+run = "npm start"

src/App.js

@@ -1,22 +1,30 @@
 import React, { Component } from 'react';
 import './App.css';
+// imports all the components -
 import Header from './Header';
 import SectionMain from './SectionMain';
 import Aside from './Aside';
 import Footer from './Footer';
 
+
+//class based component for App - holds all of our app's components
 class App extends Component {
 
   render() {
     return (
       <div className="App">
-        <Header backColor="green" width="50%"></Header>
+        <Header backColor="green" width="50%" borderProp="1px solid red"></Header>
+        // header component to render the header
+        // backColor and width are props
         <SectionMain></SectionMain>
+        // plugs in SectionMain component
         <Aside></Aside>
+        // plugs in the Aside component
         <Footer></Footer>
+        // footer component to render the footer
       </div>
     );
   }
 }
 
-export default App;
+export default App; // Allows App class to be used outside of this file

src/Aside.js

@@ -1,14 +1,18 @@
 import React, { Component } from 'react';
 import './Aside.css';
 
+
+//class based Component for Aside - holds all of our Aside's components
 class Aside extends Component {
   render() {
     return (
         <aside className="Aside">
         </aside>
 
     );
+    // tells what to return when you plug Aside into App.js
   }
 }
 
 export default Aside;
+// allow access of Aside outside this file

src/Footer.js

@@ -1,14 +1,16 @@
 import React, { Component } from 'react';
 import './Footer.css';
 
+// class-based component that controls how the Footer behaves
 class Footer extends Component {
   render() {
     return (
         <footer className="Footer">
-        </footer>
-
+        </footer>0
     );
+    // tells what to return when you plug Footer into App.js
   }
 }
 
 export default Footer;
+// allow access of Footer outside this file