Capstone — a routed, context-driven app
Bring it all together: a mini app
Let us sketch a small but real app that uses the big pieces — routing, context, fetching, and components — the way a real project fits together. We will build the structure of a simple "Users" app: a list page and a detail page, with a shared theme.
The shape of the app
// App.jsx — routing + a shared theme via context
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { ThemeContext } from "./ThemeContext";
import { useState } from "react";
function App() {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<UserList />} />
<Route path="/user/:id" element={<UserDetail />} />
</Routes>
</BrowserRouter>
</ThemeContext.Provider>
);
}
The list page — fetch with our custom hook
import { Link } from "react-router-dom";
import { useFetch } from "./useFetch";
function UserList() {
const { data, loading } = useFetch("https://jsonplaceholder.typicode.com/users");
if (loading) return <p>Loading...</p>;
return (
<ul>
{data.map((user) => (
<li key={user.id}>
<Link to={`/user/${user.id}`}>{user.name}</Link>
</li>
))}
</ul>
);
}
The detail page — read the URL + theme
import { useParams } from "react-router-dom";
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
import { useFetch } from "./useFetch";
function UserDetail() {
const { id } = useParams();
const { theme } = useContext(ThemeContext);
const { data, loading } = useFetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (loading) return <p>Loading...</p>;
return (
<div className={theme}>
<h1>{data.name}</h1>
<p>{data.email}</p>
</div>
);
}
Look at the full picture you just built
- Routing (
Routes,Link,useParams) → multiple pages. - Context (
ThemeContext) → a theme shared everywhere. - Custom hook (
useFetch) → data fetching reused on both pages. - Components, props, state, lists, conditionals → the foundation under it all.
This is how a real React app is structured: small components, shared state through context, logic in custom hooks, and pages tied together by a router.
You now know React — properly
From "what is React" to a routed, context-driven, data-fetching app. To go further: practice by building your own projects, then take the React test here to verify your skill and earn a certificate.
🎉 This is the complete React picture. Keep building real things — that is what turns knowledge into skill.
A real React app = components + state, shared via context, logic in custom hooks, pages via the router, fetching data from APIs. You now have every core piece to build modern web apps.