test spa with react

react_test/spa_react/src/About.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+
+class About extends Component {
+    render() {
+        return (
+            <div>
+                <h3>SPA App - About</h3>
+                <p>This is a paragraph on the About of the SPA App.</p>
+                <p>The Team of SPA App.</p>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>Email</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>1</td>
+                            <td>John Doe</td>
+                            <td>johndoe@example.com</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Jane Doe</td>
+                            <td>janedoe@example.com</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Bob Smith</td>
+                            <td>bobsmith@example.com</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+
+export default About;

react_test/spa_react/src/App.js

@@ -1,25 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import { Route, NavLink, HashRouter, Routes } from "react-router-dom";
 
-function App() {
+import Home from "./Home";
+import About from "./About";
+import Contact from "./Contact";
+
+class App extends Component {
+  render() {
     return (
+      <HashRouter>
       <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <h1>A Simple SPA made using React</h1>
+        <ul className="header">
+          <li><NavLink to="/">Home</NavLink></li>
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/contact">Contact</NavLink></li>
+        </ul>
+        <div className="content">
+          <Routes>
+          <Route exact path="/" element={<Home />}></Route>
+          <Route path="/about" element={<About />}></Route>
+          <Route path="/contact" element={<Contact />}></Route>
+          </Routes>
         </div>
+      </div>
+      </HashRouter>
     );
+  }
 }
 
 export default App;

react_test/spa_react/src/Contact.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+
+class Contact extends Component {
+    render() {
+        return (
+            <div>
+                <h3>SPA App - Contact</h3>
+                <p>Please feel free to contact us with any questions or inquiries you may have. We are always happy to help!</p>
+                <h4>Contact Details:</h4>
+                <ul>
+                    <li><strong>Email:</strong> info@example.com</li>
+                    <li><strong>Phone:</strong> 1-800-555-1234</li>
+                    <li><strong>Address:</strong> 123 Main St, Anytown USA</li>
+                </ul>
+            </div>
+        );
+    }
+}
+
+export default Contact;

react_test/spa_react/src/Home.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+
+class Home extends Component {
+    render() {
+        return (
+            <div>
+                <h3>SPA App - Home</h3>
+                <p>This is a paragraph on the HomePAge of the SPA App.</p>
+            </div>
+        );
+    }
+}
+export default Home;