start useState

src/App.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Link, NavLink, Route, Routes } from 'react-router-dom'
+import { strategies } from './strategies'
+import { ErrorPage } from './error-page'
+
+export function App() {
+  return (
+    <>
+      <header>
+        <h1>React State Management</h1>
+        <nav>
+          <Link to="/">Introduction</Link>
+          {strategies.map(({ name }) => (
+            <NavLink
+              key={name}
+              to={name}
+              className={({ isActive }) => (isActive ? 'isActive' : '')}>
+              {name}
+            </NavLink>
+          ))}
+        </nav>
+      </header>
+      <hr />
+      <Routes>
+        <Route path="/" errorElement={<ErrorPage />}>
+          <Route index element={<Introduction />} />
+          {strategies.map(({ name, component: StrategyComponent }) => (
+            <Route key={name} path={name} element={<StrategyComponent />} />
+          ))}
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+    </>
+  )
+}
+
+function NotFound() {
+  return (
+    <main>
+      <h2>You took a wrong turn</h2>
+      <p>There's nothing here.</p>
+    </main>
+  )
+}
+
+function Introduction() {
+  return (
+    <main>
+      <h2>Introduction</h2>
+      <p>Here are some ways to store state in a React Application.</p>
+    </main>
+  )
+}

src/index.tsx

@@ -1,21 +1,21 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { ErrorPage } from './error-page'
-import { Root } from './routes/root'
+import { App } from './App'
 
 const router = createBrowserRouter([
   {
-    path: '/',
-    element: <Root />,
+    path: '/*',
+    element: <App />,
     errorElement: <ErrorPage />
   }
 ])
 
 const appEntry = document.getElementById('app')
-ReactDOM.render(
+const root = createRoot(appEntry!)
+root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>,
-  appEntry
+  </React.StrictMode>
 )

src/routes/root.tsx

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export function Root() {
-  return <h1>React State Management</h1>
-}

src/strategies/index.ts

@@ -0,0 +1,3 @@
+import { UseState } from "./useState";
+
+export const strategies = [{ name: 'useState', component: UseState }]

src/strategies/useState.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+
+type Todo = {
+  id: string
+  text: string
+  status: 'incomplete' | 'complete' | 'hidden'
+}
+
+export function UseState() {
+  const [todos, setTodos] = useState<Todo[]>([])
+  const [newTodoText, setNewTodoText] = useState('')
+
+  function addTodo() {
+    const newTodo = {
+      id: crypto.randomUUID(),
+      text: newTodoText,
+      status: 'incomplete' as const
+    }
+    setTodos((t) => [...t, newTodo])
+  }
+
+  return (
+    <main>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          addTodo()
+        }}>
+        <label>
+          New todo:{' '}
+          <input
+            type="text"
+            value={newTodoText}
+            onChange={(e) => setNewTodoText(e.target.value)}
+          />
+        </label>
+      </form>
+    </main>
+  )
+}