From 56a6dc67624ad22c05fc1217d8b0043a89c71b87 Mon Sep 17 00:00:00 2001 From: rameezrk Date: Wed, 9 Jun 2021 09:18:05 +0100 Subject: [PATCH 1/2] adding comments --- .vscode/settings.json | 4 +++- src/App.js | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index b110e44..680e8be 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,5 @@ { "terminal.integrated.fontSize": 60 -} \ No newline at end of file +} + +//terminal size has been increased \ No newline at end of file diff --git a/src/App.js b/src/App.js index 6472345..8824157 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,8 @@ +//import the react npm that was installed import React, { Component } from 'react'; +//import the app css styling into this js file import './App.css'; +//import the header information import Header from './Header'; import SectionMain from './SectionMain'; import Aside from './Aside'; From 7fe8f5aa5b8de0a4f86312d5f81253923a3a8d2d Mon Sep 17 00:00:00 2001 From: rameezrk Date: Wed, 9 Jun 2021 09:29:27 +0100 Subject: [PATCH 2/2] commented on all --- src/App.js | 7 ++++++- src/App.test.js | 6 ++++++ src/Aside.js | 4 ++++ src/Footer.js | 4 ++++ src/index.js | 2 +- src/registerServiceWorker.js | 5 ++++- 6 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 8824157..5be8986 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,16 @@ import React, { Component } from 'react'; //import the app css styling into this js file import './App.css'; -//import the header information +//import the header js information import Header from './Header'; +//import the section main js information import SectionMain from './SectionMain'; +//import the aside js information import Aside from './Aside'; +//import the footer js information import Footer from './Footer'; +//this creates a class which holds an object which ends up rendering information via react coding class App extends Component { render() { @@ -22,4 +26,5 @@ class App extends Component { } } +//you can export this whole thing to be used in other pages of js now export default App; diff --git a/src/App.test.js b/src/App.test.js index b84af98..83c9fa5 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,7 +1,13 @@ + +//import react & reactDOM npms into this file import React from 'react'; import ReactDOM from 'react-dom'; + +//import app js file into this one import App from './App'; +//looks like this is jasmine testing framework to make sure that everything works I guess + it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); diff --git a/src/Aside.js b/src/Aside.js index 0698377..0a9c1f4 100644 --- a/src/Aside.js +++ b/src/Aside.js @@ -1,6 +1,9 @@ +//importing react npm and a component as well I think its in curly brackets because of a default state is required import React, { Component } from 'react'; +//importing aside css styling into this file import './Aside.css'; +//creating a class with the object inside which is rendering the aside page class Aside extends Component { render() { return ( @@ -11,4 +14,5 @@ class Aside extends Component { } } +//exporting the aside file so that it can be used in other files if needed export default Aside; diff --git a/src/Footer.js b/src/Footer.js index c116027..ed2f00d 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,6 +1,9 @@ +//importing react npm and a component as well I think its in curly brackets because of a default state is required import React, { Component } from 'react'; +//import the footer styling into this file import './Footer.css'; +//creating the class footer with the object and rendering the footer via react class Footer extends Component { render() { return ( @@ -11,4 +14,5 @@ class Footer extends Component { } } +//exporting this file so that it can be used and imported in other files export default Footer; diff --git a/src/index.js b/src/index.js index 726c418..9220cf6 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,6 @@ import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; - +//renders the browser on this main file via react and gets the main root ID and also the registerServiceWorker runs as a function ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js index 12542ba..c5dc82d 100644 --- a/src/registerServiceWorker.js +++ b/src/registerServiceWorker.js @@ -8,6 +8,7 @@ // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. // This link also includes instructions on opting out of this behavior. +//this creates a variable about the local host and what to produce if it is being run locally const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. @@ -18,6 +19,7 @@ const isLocalhost = Boolean( ) ); +//this exports the function register() and its in line with the app being ran in produce and serviceWorker modes export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. @@ -28,7 +30,8 @@ export default function register() { // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 return; } - + + //there is an event listener and will load different files window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;