FEI-5465.2: Add basic routing using React Router v5 (#2)

## Summary:
Before we can start adding examples of different React perf issues, we need a basic site layout to house the examples.  This PR routing using React Router v5.  I know it's out of date, but I didn't want to learn something new just for this workshop repo so I went with the familiar.  I've also removed the .css and asset files.

Issue: FEI-5465

## Test plan:
- yarn dev
- visit http://localhost:5173
- click around and check that the navigation works

<img width="880" alt="Screen Shot 2024-02-21 at 5 31 58 PM" src="https://github.com/Khan/frontend-infra-workshops/assets/1044413/52ba161c-fb58-4de0-ab5c-f8e6fda09c8a">
<img width="880" alt="Screen Shot 2024-02-21 at 5 32 01 PM" src="https://github.com/Khan/frontend-infra-workshops/assets/1044413/4abdd909-e06d-45d2-a8a4-4bc390c02e06">

Author: kevinbarabash

Reviewers: jeresig, somewhatabstract

Required Reviewers:

Approved By: jeresig

Checks: ✅ Lint (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x)

Pull Request URL: #2

package.json

@@ -13,13 +13,17 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "5",
+    "react-router-dom": "5"
   },
   "devDependencies": {
     "@khanacademy/eslint-config": "^4.0.0",
     "@khanacademy/eslint-plugin": "^3.0.0",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
+    "@types/react-router": "5",
+    "@types/react-router-dom": "5",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react-swc": "^3.5.0",

src/homepage.tsx

@@ -0,0 +1,14 @@
+import {Link} from "react-router-dom";
+
+export default function Homepage() {
+    return (
+        <>
+            <h1>Frontend Infra Workshops</h1>
+            <ul>
+                <li>
+                    <Link to="react-render-perf">React Render Perf</Link>
+                </li>
+            </ul>
+        </>
+    );
+}

src/main.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+
+import Routes from "./routes";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <App />
+        <Routes />
     </React.StrictMode>,
 );

src/react-render-perf/index.tsx

@@ -0,0 +1,21 @@
+import {Link} from "react-router-dom";
+
+export default function ReactRenderPerf() {
+    return (
+        <>
+            <Link to="/">Home</Link>
+            <h1>React Render Perf</h1>
+            <ul>
+                <li>
+                    <Link to="example-1">Example 1</Link>
+                </li>
+                <li>
+                    <Link to="example-2">Example 2</Link>
+                </li>
+                <li>
+                    <Link to="example-3">Example 3</Link>
+                </li>
+            </ul>
+        </>
+    );
+}

src/routes.tsx

@@ -0,0 +1,17 @@
+import {BrowserRouter, Route} from "react-router-dom";
+
+import ReactRenderPerf from "./react-render-perf";
+import Homepage from "./homepage";
+
+export default function Routes() {
+    return (
+        <BrowserRouter>
+            <Route path="/" exact={true}>
+                <Homepage />
+            </Route>
+            <Route path="/react-render-perf" exact={true}>
+                <ReactRenderPerf />
+            </Route>
+        </BrowserRouter>
+    );
+}