React
Project: Dashboard
Review the goal and steps of the dashboard project.
Project: Dashboard
In this project you build a dashboard. Three main pieces: layout and routing, stats widget and add via modal. Each lesson adds one piece.
The layout gives a frame that stays as the page changes. Routing shows content based on the URL. You build both with React Router.
Widgets show data as cards; a modal gives a popup window to add new data. At the end you have a working, modular dashboard.
Tech and structure
The dashboard uses React Router; each route is a page, <Outlet> is where content renders. The StatCard component takes label and value props.
The modal opens and closes via the isOpen state. When the form is submitted, onAdd fires and the modal closes.
Each lesson takes the previous lesson's solution as its starting code; the code grows piece by piece.
Exercise Dashboard layout skeleton
Write a DashboardLayout component: a <nav> with two <NavLink>s ("Stats" and "Settings"), then a <main> containing <Outlet />. Place DashboardLayout at path="/" inside <BrowserRouter> and <Routes>. Write a DashboardApp function and export it as default.
Show example solution
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";
function DashboardLayout() {
return (
<>
<nav>
<NavLink to="/stats">Stats</NavLink>
<NavLink to="/settings">Settings</NavLink>
</nav>
<main>
<Outlet />
</main>
</>
);
}
function DashboardApp() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<DashboardLayout />}>
<Route path="stats" element={<p>Stats</p>} />
<Route path="settings" element={<p>Settings</p>} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default DashboardApp;
Test yourself
-
What do we build in the first step?
- Cart and checkout
- Layout and routing
- Authentication
- Notifications
Show answer
Layout and routing — First we set up the layout and routing skeleton.
-
Router import
import { BrowserRouter, Routes, Route, ____ } from "react-router-dom";
Show answer
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
-
Project: Dashboard: match the terms
- layout
- Page frame
- route
- URL mapping
- widget
- Data card
- modal
- Popup window
Next lesson: Layout and route
