Configure react as the frontend

5 files changed, 49 insertions, 0 deletions

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 3016c21..85b9adf 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -2,3 +2,4 @@
 import "@hotwired/turbo-rails"
 import "./controllers"
 import * as bootstrap from "bootstrap"
+import "./components"
diff --git a/app/javascript/components/App.jsx b/app/javascript/components/App.jsx
new file mode 100644
index 0000000..6d7a0c7
--- /dev/null
+++ b/app/javascript/components/App.jsx
@@ -0,0 +1,4 @@
+import React from "react";
+import Routes from "../routes";
+
+export default props => <>{Routes}</>;
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
new file mode 100644
index 0000000..b6c21e2
--- /dev/null
+++ b/app/javascript/components/Home.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default () => (
+  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
+    <div className="jumbotron jumbotron-fluid bg-transparent">
+      <div className="container secondary-color">
+        <h1 className="display-4">Games!</h1>
+        <p className="lead">
+			All the games I have worked on that run on the web!
+        </p>
+        <hr className="my-4" />
+        <Link
+          to="/games"
+          className="btn btn-lg custom-button"
+          role="button"
+        >
+          View Games
+        </Link>
+      </div>
+    </div>
+  </div>
+);
diff --git a/app/javascript/components/index.jsx b/app/javascript/components/index.jsx
new file mode 100644
index 0000000..0044916
--- /dev/null
+++ b/app/javascript/components/index.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+document.addEventListener("turbo:load", () => {
+	const root = createRoot(
+		document.body.appendChild(document.createElement("div"))
+	);
+	root.render(<App />);
+});
diff --git a/app/javascript/routes/index.jsx b/app/javascript/routes/index.jsx
new file mode 100644
index 0000000..e231cc5
--- /dev/null
+++ b/app/javascript/routes/index.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "../components/Home";
+
+export default (
+	<Router>
+		<Routes>
+			<Route path="/" element = {<Home />} />
+		</Routes>
+	</Router>
+);