correct extensions for imports - show path on homepage

package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "^18.3.1",
     "gh-pages": "^6.2.0",
     "html-webpack-plugin": "^5.6.3",
+    "react-router-dom": "^6.27.0",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",

src/index.tsx

@@ -1,17 +1,20 @@
 import React from "react";
-import {createRoot} from "react-dom/client"
+import { createRoot } from "react-dom/client";
+import WalkingSkeleton from "./pages/WalkingSkeleton";
 
-// A simple Class component
-class WalkingSkeleton extends React.Component {
-    render() {
-        return <h1>ewan's walking skeleton</h1>
-    }
-}
+// const WalkingSkeleton = () => {
+//   return <h1>ewan's walking skeleton</h1>;
+// };
 
 // Use traditional DOM manipulation to create a root element for React
-document.body.innerHTML = '<div id="app"></div>'
+document.body.innerHTML = '<div id="app"></div>';
 
 // Create a root element for React
-const app = createRoot(document.getElementById("app")!)
+const app = createRoot(document.getElementById("app")!);
 // Render our WalkingSkeleton component
-app.render(<WalkingSkeleton/>)
+app.render(
+  <>
+    <p>{window.location.pathname}</p>
+    <WalkingSkeleton />
+  </>
+);

src/pages/WalkingSkeleton.tsx

@@ -0,0 +1,5 @@
+const WalkingSkeleton = () => {
+  return <p>ewan's imported walking sheldon</p>
+}
+
+export default WalkingSkeleton;

webpack.config.ts

@@ -12,4 +12,7 @@ module.exports = {
         ],
     },
     plugins: [new HtmlWebpackPlugin()],
-}
+    resolve: {
+        extensions: ['.js', '.tsx'] // add your other extensions here
+    }
+};