Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

7. Completing the Static Catalog
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, the Learning Tracker got its face: a responsive card grid, color-coded badges, styled buttons with honest focus states — all sitting on semantic, accessible markup. Between the data model, the component set and the styling, you’ve now touched every layer of a static React feature.

This chapter finishes the job. Not with a pile of new concepts, but with the professional pass that separates “works on my machine” from “ready to hand to a teammate.” You’ll reorganize the src folder so every file has an obvious home, extract the last two components the catalog deserves, add course categories, sweep out the remains of the Vite template and run a final quality audit.

Consolidation chapters are where knowledge settles. Everything you do here uses skills from Chapters 2 through 6 — so if any step feels foggy, that’s a signal worth following back to its chapter. By the end, Part I is complete: a static catalog you could genuinely ship, structured so that Part II can build on it without a demolition phase.

Surveying the Target

Professionals start a refactor by fixing the destination, so here’s yours — the completed static catalog:

The finish line: categorized, filterable, accessible and organized.
The finish line: categorized, filterable, accessible and organized.

Squint, and it looks like your current app, with one visible addition: a small category label above each course title. The bigger changes are the ones a screenshot can’t show. Here’s the component tree you’re heading for:

App CourseCard one per course CourseList EmptyState only when nothing matches PageHeader Card LevelBadge Button Rendered conditionally Every box is a component; DOM elements omitted for clarity.
The final tree: App delegates the whole list, including its empty state, to CourseList.

Two new components appear. CourseList takes over the job App has been doing inline — rendering the card grid — and also owns the decision of what to show when the list is empty, delegating that to a small EmptyState. App shrinks to what it should be: the page’s composition root.

And here’s where every file will live:

Three folders with three jobs — and no deeper nesting than the project needs.
Three folders with three jobs — and no deeper nesting than the project needs.

Note: Every file in this structure is a module — it declares what it depends on with imports, and what it offers with exports. Folders add no behavior; they’re purely for humans, so the bar for creating one is “does this make things easier to find?” Some codebases add index.ts files that re-export a folder’s contents to shorten import paths. That’s a real pattern you’ll meet in the wild, but it’s extra plumbing this project doesn’t need — so it stays out, and every import names its file directly.

Resist the urge to go further — a hooks folder with nothing in it, a utils folder “for later.” Structure should trail the code, not lead it. Three folders is what this app needs today.

Carving Out the Folders

Time to move house, in small steps that keep the app compiling. First, the types. Create a folder src/types, and in it a file course.ts. Move both type declarations — CourseLevel and Course — out of src/courses.ts and into the new file, so it contains exactly:

export type CourseLevel =
  | 'Beginner'
  | 'Intermediate'
  | 'Advanced'

export type Course = {
  id: string
  title: string
  description: string
  level: CourseLevel
  durationHours?: number
  isFavorite: boolean
}

import type { Course } from './types/course.ts'

import type { Course } from '../types/course.ts'

import { courses } from './data/courses.ts'
import type { CourseLevel } from './types/course.ts'

import logo from '../assets/logo.svg'

import PageHeader from './components/PageHeader.tsx'
import CourseCard from './components/CourseCard.tsx'

Finishing the Component Set

App still hand-rolls the card grid and the empty-state message. That’s list-presentation logic, and it deserves a component of its own. Start with the smaller piece. Create src/components/EmptyState.tsx:

type EmptyStateProps = {
  message: string
}

function EmptyState({ message }: EmptyStateProps) {
  return <p className="empty-note">{message}</p>
}

export default EmptyState

import CourseCard from './CourseCard.tsx'
import EmptyState from './EmptyState.tsx'
import type { Course } from '../types/course.ts'

type CourseListProps = {
  courses: Course[]
}

function CourseList({ courses }: CourseListProps) {
  if (courses.length === 0) {
    return (
      <EmptyState message="No courses match this level yet." />
    )
  }

  return (
    <section className="catalog" aria-label="Course catalog">
      {courses.map((course) => (
        <CourseCard key={course.id} course={course} />
      ))}
    </section>
  )
}

export default CourseList

import CourseList from './components/CourseList.tsx'

<CourseList courses={visibleCourses} />

Adding Course Categories

The catalog’s last missing feature: Courses belong to subject areas, and the card should say so. By now this is a drill you know — extend the type, satisfy the data, render the field, style it.

export type CourseCategory = 'Frontend' | 'Languages' | 'Design'

category: CourseCategory

category: 'Frontend',

<p className="category">{course.category}</p>

.category {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a7381;
}
Every card leads with its subject area.
Edapr podk cuabb puks axl xedwuwx oqeo.

Testing the Three States

A feature pass touched the list pipeline, so re-run the manual test from Chapter 5 — full, filtered, empty. The full state is on your screen. For filtered, set levelFilter in src/App.tsx to 'Beginner' and save:

Filtered: two beginner courses, categories intact.
Zurrutiq: wpo jafiybit jeoddir, bobuyiwiuy uchilk.

Empty: EmptyState reporting for duty from its new home.
Atyxr: OsrtwTqore rokixmuzl qab kovb xdex edn had rogi.

Sweeping Out the Template

Every generated project carries scaffolding that shipped for the sake of the demo page you deleted in Chapter 1. Time to clear it — but never delete blind. The habit to build: Search for references first. Press Cmd-Shift-F (Ctrl-Shift-F on Windows/Linux) to search the whole project for each file’s name; if nothing imports or links it, it can go. Four files fail that test:

<title>Learning Tracker</title>

Running the Final Audit

Close Part I the way you’d close a real feature — with the quality pass from Chapter 6, compressed into a minute.

The finished static catalog — matching the design target from the top of the chapter.
Wpi yiguszaq rsotov nofufef — wocgbitg fme zebaxd gizmuq hraj bzo yap er dzu ccibkay.

Challenge: Launch the Career Track

The catalog’s owners return with expansion plans: a career-skills category. Ship it end to end:

Key Points

  • Organize by role: Components render, data holds content, types define shape — and structure should trail the code, never outrun it.
  • Every file is a module; imports are its declared dependencies, and ../ climbs one folder before descending.
  • Consolidate shared types into one source — like types/course.ts — instead of scattering or duplicating shapes.
  • Skip re-export index files until import paths actually hurt; every layer of plumbing must earn its place.
  • An early return cleanly splits a component that renders two entirely different trees — the grown-up sibling of &&.
  • Give empty states a named component; “nothing to show” is a feature, and features deserve a home.
  • Extending a domain type makes TypeScript enumerate every place the data must catch up — the compiler as project manager.
  • Never delete a file without searching for references first, and clean template leftovers from generated projects.
  • Close features with an audit pass: keyboard, landmarks, headings, data states and a clean build.

Where to Go From Here?

Take a second to appreciate the distance. Seven chapters ago, this was npm create vite and a blinking cursor. Now it’s a typed, componentized, accessible, organized catalog — static by design, and complete on those terms. That’s Part I of this book, and Part I of every React app: Get the rendering story right before anything moves.

6. Styling & Accessible Markup
8. Events & Local State
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now