diff --git a/projectFirstPart/components/example/Example.jsx b/projectFirstPart/components/example/Example.jsx
index 5470e6b1f9d4e903e9bf3483f971d2e279cb422a..40ee2658045aee72f947023341644fc061f4e30b 100644
--- a/projectFirstPart/components/example/Example.jsx
+++ b/projectFirstPart/components/example/Example.jsx
@@ -8,7 +8,6 @@ import './Example.css';
import Prism from 'prismjs';
import 'prismjs/components/prism-jsx.js';
import '../../node_modules/prismjs/themes/prism.css';
-import Header from "../header/Header";
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable react/destructuring-assignment */
diff --git a/projectFirstPart/components/states/States.jsx b/projectFirstPart/components/states/States.jsx
index b669946ef6fa6811cc9ef50206f00a0858edda3a..d04125aaacae2c0f4e7a0bf76cdac43d2440a5a5 100644
--- a/projectFirstPart/components/states/States.jsx
+++ b/projectFirstPart/components/states/States.jsx
@@ -1,6 +1,5 @@
import React from 'react';
import './States.css';
-import Header from "../header/Header";
/**
* Define States, a React componment of CS142 project #4 problem #2. The model
diff --git a/projectFirstPart/p5.html b/projectFirstPart/p5.html
new file mode 100644
index 0000000000000000000000000000000000000000..cd96014899040f38b42023a3a808de477edac30f
--- /dev/null
+++ b/projectFirstPart/p5.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+ <title>CS142 Class Project</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <script src="modelData/states.js"></script>
+ <script src="modelData/example.js"></script>
+</head>
+<body>
+<div id="reactapp">
+ <script src="compiled/p5.bundle.js"></script>
+</div>
+</body>
+</html>
diff --git a/projectFirstPart/p5.jsx b/projectFirstPart/p5.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3758e5770cb4c545cf2c8c8a558ba241a299b3eb
--- /dev/null
+++ b/projectFirstPart/p5.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {HashRouter, Route, Link, Redirect} from "react-router-dom";
+import States from './components/states/States';
+import Example from './components/example/Example';
+import Header from "./components/header/Header";
+
+class P5 extends React.Component {
+ render() {
+ return(
+ <div>
+ <Header />
+ <HashRouter>
+ <Link to="/states">States</Link>
+ <Link to="/example">Example</Link>
+ <Route exact path="/">
+ <Redirect to="/example" />
+ </Route>
+ <Route exact path="/example" component={Example} />
+ <Route exact path="/states" component={States} />
+ </HashRouter>
+ </div>
+ )
+ }
+}
+
+ReactDOM.render(
+ <P5/>,
+ document.getElementById('reactapp'),
+);
diff --git a/projectFirstPart/webpack.config.js b/projectFirstPart/webpack.config.js
index 718e185dd12788ebeaa30200de0ad7dd7bb15012..38381a0ba23624d8dd379ee65ae77cf3562bea4a 100644
--- a/projectFirstPart/webpack.config.js
+++ b/projectFirstPart/webpack.config.js
@@ -3,6 +3,7 @@ module.exports = {
gettingStarted: './gettingStarted.jsx',
p2: './p2.jsx',
p4: './p4.jsx',
+ p5: './p5.jsx',
},
module: {
rules: [