Configure react as the frontend

3 files changed, 37 insertions, 0 deletions

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 />);
+});