Stub web project

web/src/components/App.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { add } from '../utils/calculator.js'  // Note the .js extension
+
+function App() {
+  const [result, setResult] = React.useState(0)
+
+  const handleCalculate = () => {
+    setResult(add(5, 3))
+  }
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">React App</h1>
+      <button 
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+        onClick={handleCalculate}
+      >
+        Calculate 5 + 3
+      </button>
+      <p className="mt-4">Result: {result}</p>
+    </div>
+  )
+}
+
+export default App

web/src/components/App.test.jsx

@@ -0,0 +1,15 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import App from './App'
+
+describe('App', () => {
+  it('renders without crashing', () => {
+    render(<App />)
+    expect(screen.getByText(/React App/i)).toBeInTheDocument()
+  })
+
+  it('calculates correctly when button is clicked', () => {
+    render(<App />)
+    fireEvent.click(screen.getByText(/Calculate/i))
+    expect(screen.getByText(/Result: 8/i)).toBeInTheDocument()
+  })
+})