From 541ca8fcd595144564468a7b84369ed86c1575e4 Mon Sep 17 00:00:00 2001 From: Martin Wighus Holtmon <martinwh@stud.ntnu.no> Date: Mon, 1 Nov 2021 19:33:36 +0100 Subject: [PATCH] firstpart/Problem5 - Made use of router to redirect. I am not sure If i modified the DOM or not or If I have proper MVC decomposition. Also removed unused imports. --- .../components/example/Example.jsx | 1 - projectFirstPart/components/states/States.jsx | 1 - projectFirstPart/p5.html | 14 +++++++++ projectFirstPart/p5.jsx | 30 +++++++++++++++++++ projectFirstPart/webpack.config.js | 1 + 5 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 projectFirstPart/p5.html create mode 100644 projectFirstPart/p5.jsx diff --git a/projectFirstPart/components/example/Example.jsx b/projectFirstPart/components/example/Example.jsx index 5470e6b..40ee265 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 b669946..d04125a 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 0000000..cd96014 --- /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 0000000..3758e57 --- /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 718e185..38381a0 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: [ -- GitLab