Add FastAPI backend and React frontend setup with initial routes and components

frontend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-fastapi-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.3",
+    "vite": "^4.4.5"
+  }
+}

frontend/src/App.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+
+function App() {
+  const [items, setItems] = useState([])
+
+  useEffect(() => {
+    fetch('http://localhost:8000/api/items')
+      .then(response => response.json())
+      .then(data => setItems(data))
+  }, [])
+
+  return (
+    <div className="App">
+      <h1>React + FastAPI Template</h1>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>{item.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default App

frontend/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})