add header component

package.json

@@ -27,6 +27,7 @@
     "mini-css-extract-plugin": "^2.7.2",
     "npm": "^9.3.1",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   }
 }

src/App.js

@@ -1,7 +1,13 @@
+import header from './Components/Header/Header.js'
+
 export default class {
 
 	render(){
-		return 'Application'
+		let headerComponent = header('Rock Scissor Paper')
+		return (`
+			${headerComponent}
+			Application
+		`)
 	}
 
 }

src/Components/Header/Header.css

@@ -0,0 +1,5 @@
+header{
+	text-align: center;
+	border-bottom: 1px solid #eee;
+	margin-bottom: 1em;
+}

src/Components/Header/Header.js

@@ -0,0 +1,8 @@
+import header from './Header.css'
+export default (props) => {
+	return `
+		<header>
+			<h1>Rock Paper Scissor</h1>
+		</header>
+	`;	
+}

webpack.config.js

@@ -32,7 +32,7 @@ module.exports = {
 	plugins: [
 		new HtmlWebpackPlugin({
 			template: './src/index.html',
-			title: 'Rock Paper Scissor'
+			title: 'Rock Paper Scissor',
 		}),
 		new MiniCssExtractPlugin(),
 	]