diff --git a/.replit b/.replit new file mode 100644 index 0000000..d409ef8 --- /dev/null +++ b/.replit @@ -0,0 +1,2 @@ +language = "nodejs" +run = "npm start" \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1e69291..ce9aef2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2693,7 +2693,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2711,11 +2712,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2728,15 +2731,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2839,7 +2845,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2849,6 +2856,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2861,17 +2869,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2888,6 +2899,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2960,7 +2972,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2970,6 +2983,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3045,7 +3059,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3075,6 +3090,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3092,6 +3108,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3130,11 +3147,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -6821,7 +6840,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6839,11 +6859,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6856,15 +6878,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6967,7 +6992,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6977,6 +7003,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6989,17 +7016,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7016,6 +7046,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7088,7 +7119,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7098,6 +7130,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7173,7 +7206,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7203,6 +7237,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7220,6 +7255,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7258,11 +7294,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } } diff --git a/src/App.js b/src/App.js index 6472345..0db2eae 100644 --- a/src/App.js +++ b/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 (
-
+
+ // header component to render the header + // backColor and width are props + // plugs in SectionMain component + // plugs in the Aside component + // footer component to render the footer
); } } -export default App; +export default App; // Allows App class to be used outside of this file diff --git a/src/Aside.js b/src/Aside.js index 0698377..2c3ec20 100644 --- a/src/Aside.js +++ b/src/Aside.js @@ -1,6 +1,8 @@ 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 ( @@ -8,7 +10,9 @@ class Aside extends Component { ); + // tells what to return when you plug Aside into App.js } } export default Aside; +// allow access of Aside outside this file \ No newline at end of file diff --git a/src/Footer.js b/src/Footer.js index c116027..eeaca6b 100644 --- a/src/Footer.js +++ b/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 ( - + 0 ); + // tells what to return when you plug Footer into App.js } } export default Footer; +// allow access of Footer outside this file \ No newline at end of file diff --git a/src/Header.js b/src/Header.js index 5c9495c..1d79f59 100644 --- a/src/Header.js +++ b/src/Header.js @@ -1,21 +1,24 @@ import React, { Component } from 'react'; -import './Header.css'; +import './Header.css'; // imports the CSS file for use within this file +// class-based component that controls how the Header behaves class Header extends Component { render() { const style = { width: this.props.width, - backgroundColor: this.props.backColor + backgroundColor: this.props.backColor, + border: this.props.borderProp + // App.js pulls props from here } return (
- + // gives us what the Header component class will return ); } } -export default Header; +export default Header; // allow access of Header outside this file //document.querySelector("header").style.backgroundColor = "red" diff --git a/src/SectionMain.js b/src/SectionMain.js index cc07a5e..8c9c035 100644 --- a/src/SectionMain.js +++ b/src/SectionMain.js @@ -1,14 +1,17 @@ import React, { Component } from 'react'; import './SectionMain.css'; + +//class based component for SectionMain - holds all of our SectionMain's components class SectionMain extends Component { render() { return (
- ); + // this tells our App.js what to render when we plug SectionMain component in } } export default SectionMain; +// allow access of SectionMain outside this file \ No newline at end of file diff --git a/src/index.js b/src/index.js index 726c418..2a215bf 100644 --- a/src/index.js +++ b/src/index.js @@ -5,5 +5,6 @@ import App from './App'; import registerServiceWorker from './registerServiceWorker'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); +// tells the DOM what to render - App.js renders to the root div of index.html registerServiceWorker();