React Concepts — Lesson Materials¶
This folder contains the lesson materials for the React pass (Lessons 1–22). It opens with two JavaScript/TypeScript intro lessons for C# developers (run in a throwaway vanilla-ts scratch project), then a React orientation — components, JSX, and rendering lists — before building the TableServe front end one concept at a time (data fetching, routing, forms, detail pages, modals, auth/context, toasts), then review lessons and a capstone bridge into PRS. Lesson 16 — the tooling lesson on building with GitHub Copilot — comes after the PRS capstone, not before it: see the AI use policy.
File types¶
lesson-{N}-guide-*.md — the concept reference (I do). Read through this during
the instructor-led session. It explains the concepts being taught with code examples
and a step-by-step build walkthrough. Keep it open as a reference.
lesson-{N}-lab-*.md — the hands-on exercise (You do). Use this to build a
similar feature independently. Instructions are intentionally terse — refer back to the
guide and what you built alongside it as your model.
Schedule¶
Lessons 1–2 are JavaScript/TypeScript intro lessons for students coming straight from
the C# API pass — the language mapped onto what they already know, run and verified by
observation in a throwaway vanilla-ts scratch project, not against the reference app.
Lesson 3 is a React orientation — you render a hardcoded array to learn components,
JSX, interfaces, and .map() in the browser. Real data fetching starts in Lesson 4.
Lessons 9–11 guides are worked examples (the Order Detail workflow/modals, the nested
Order Item form, and Sign In/Context) — patterns that are named exceptions with no second
TableServe entity to repeat them on, so they're built once alongside the instructor. Their
labs don't repeat those exact patterns; instead they build out the rest of the app so
students finish with a complete TableServe — the Categories list (L9) and form (L10), and
the Order create/edit form (L11, which applies the Context from the guide).
Lessons 13–15 are review, gap-check, and the capstone bridge — and the capstone follows
them. Lesson 16 is a tooling lesson on GitHub Copilot (TQL's preferred AI assistant)
— generating React code, teaching Copilot this project's rules once via
.github/copilot-instructions.md, and auditing what it produces; verified by
observation in the browser, and building on the API pass's Copilot code-review lesson. It
is taught after you finish the PRS capstone, because generating whole features is
exactly what the AI use policy holds back until the app has
been built by hand.
Lessons 17–20 are the testing lessons, also after the capstone. 17 and 18 are required — your first unit tests, then edge cases and async code. Lessons 19 and 20 are optional: component testing with React Testing Library, then testing a page that fetches with a fake API, both of which need extra setup that 17 and 18 don't. These are the only lessons in the pass verified in the terminal rather than the browser; what you're watching for is a test going red and then green.
Lessons 21–22 are optional too, and they're a different kind of lesson from everything
before them: not a new feature, but a second way to do something you already know how to do.
You migrate the Menu Items feature folder from useState + useEffect fetching to
TanStack Query — a cache that handles refetching, shared
data, and loading state for you — then add server-side pagination. They are TableServe only.
Nothing in the capstone or the team project uses TanStack Query, and neither lab asks you to
change the app you turned in: the PRS work happens on a branch you never merge.
Prework — optional head start¶
Finished the API capstone early and want a running start? Work through
React prework — a self-guided warm-up on JavaScript and TypeScript
for C# developers (the Lesson 1–2 material) that ends by calling your own PRS API from
the browser with fetch. It's optional and ungraded; the pass teaches all of it from
scratch.
Stretch challenges¶
Finished a lab early? Each lab ends with a short Stretch challenges section tied to
that lesson's concept. For bigger challenges that span the whole pass — reseeding to your
own restaurant, a brand-new entity's full feature folder, a useFetch custom hook, a
dark-mode Context, client-side search, a reusable confirm modal, and consolidated format
utilities — see Stretch challenges. None of it is required
for the capstone; it's optional extra practice, tagged [Reinforce] (builds on the
guide) or [Reach] (goes past it, with a reference link to research).
Optional polish¶
Small, self-contained improvements to the app you built. None of it is required for the capstone — pick them up whenever you have time.
- The ⋮ menu's orange ring and caret — react-bootstrap's
Dropdown.Toggleadds abtn-primaryvariant and a ▾ caret you never typed, so the three-dots menus pick up an orange focus ring and an extra glyph the static design doesn't have. A one-line fix per menu, plus one CSS rule. Any time after Lesson 6. - A loading splash while the bundle downloads — the blank
white page before React's first render is an empty
<div id="root">. Fill it with markup and inline CSS and it paints immediately, then clears itself when the app mounts. Any time after Lesson 3.
Tips¶
- Every guide and lab uses the TableServe domain (Staff, Categories, MenuItems, Orders, OrderItems). In the capstone you rebuild the same patterns for PRS (Users, Vendors, Products, Requests, RequestLines) — this pass's capstone block is the course's final project.
- Lessons 1–2 use a separate throwaway scratch project (
npm create vite@latest -- --template vanilla-ts) just to try the language; the real TableServe React app is created in Lesson 3. - Verify in the browser (open the page, check DevTools Console and Network) — not in Insomnia. Insomnia was the API pass; here you confirm the front end renders and behaves.
- Your TableServe Web API must be running with CORS enabled (you turn it on in Lesson 4) so the React app can fetch from it. Use the port your API prints.
- This course has no JWT/token authentication — login returns the Staff/User object,
the front end strips the password and stores the rest in
localStorage+ Context, and "signed in" means that value isn't null. Don't add tokens or[Authorize]. - All passwords in the seed data use the plaintext:
test1234. - Each entity uses the same feature folder pattern (interface, API module, page, list, card/row, skeleton, shared form, thin create/edit wrappers) — learn it once, repeat it per entity, then again across all of PRS.
- Read the AI use policy before the capstone. During a capstone, AI reads code with you; it doesn't write code for you — explaining, researching, debugging, and reviewing your own code are allowed; generating components and agent mode wait until after.
- GitHub Copilot is TQL's preferred AI assistant; Lesson 16 — taught after the capstone — covers using it to generate React code and audit it against this project's conventions. Keep the Copilot quick-start open for the guardrails.