begin working on frontend

client/src/App.js

@@ -1,65 +1,20 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './styles/app.css';
 
-export default class App extends Component {
+import NavBar from './components/navbar';
+import Home from './pages/home';
+import About from './pages/about';
 
-    constructor(props) {
-        super(props);
-        this.state = { forecasts: [], loading: true };
-    }
-
-    componentDidMount() {
-        this.populateWeatherData();
-    }
-
-    static renderForecastsTable(forecasts) {
-        return (
-            <table className='table table-striped' aria-labelledby="tabelLabel">
-                <thead>
-                    <tr>
-                        <th>Date</th>
-                        <th>Temp. (C)</th>
-                        <th>Temp. (F)</th>
-                        <th>Summary</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {forecasts.map(forecast =>
-                        <tr key={forecast.date}>
-                            <td>{forecast.date}</td>
-                            <td>{forecast.temperatureC}</td>
-                            <td>{forecast.temperatureF}</td>
-                            <td>{forecast.summary}</td>
-                        </tr>
-                    )}
-                </tbody>
-            </table>
-        );
-    }
-
-    render() {
-        let contents = this.state.loading
-            ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
-            : App.renderForecastsTable(this.state.forecasts);
-
-        return (
-            <div>
-                <h1 id="tabelLabel" >Weather forecast</h1>
-                <p>This component demonstrates fetching data from the server.</p>
-                {contents}
-            </div>
-        );
-    }
-
-    async populateWeatherData() {
-
-        let url = '/api/seasons';
-
-        if (process.env.NODE_ENV === 'production') {
-            url = 'https://criminalmindsapi.azurewebsites.net' + url;
-        }
-
-        const response = await fetch(url);
-        const data = await response.json();
-        this.setState({ forecasts: data, loading: false });
-    }
+export default function App() {
+    return (
+        <div>
+            <NavBar/>
+            <Routes>
+                <Route path='/' element={<Home/>}/>
+                <Route path='/About' element={<About/>}/>
+            </Routes>
+        </div>
+    );
 }