React Training

Interactive React training delivered as Storybook stories. 17 sections take you from React fundamentals through the component patterns used in the Mews codebase — smart/dumb components, state lifting, custom hooks, context, fixtures, and API mocking.

A standalone, self-contained repo that runs on its own and is hosted via GitHub Pages.

▶ Live Storybook: https://mewssystems.github.io/react-training/

The UI uses a small fake design system (src/design-system/) that mirrors the Mews Design System (Optimus) API. The story code reads exactly like production app code, but everything resolves to local stubs with zero external dependencies.

Prerequisites

• Node 22.x (see .nvmrc)
• Corepack enabled (corepack enable) — pins Yarn 4

Getting started

yarn install
yarn storybook        # dev server on http://localhost:6006

That's it.

Scripts

Script	Description
yarn storybook	Start the Storybook dev server (port 6006)
yarn build-storybook	Build the static site into dist/
yarn lint	Lint with Oxlint
yarn format	Format with Prettier
yarn format:check	Check formatting without writing
yarn typecheck	Type-check with tsc

The curriculum

Stories appear in Storybook under Training/, in order. Most sections come as a pair:

• a – Intro — a narrated explanation of the concept
• b – Example — a working, interactive implementation

#	Topic
01	Welcome
02	Introduction to Storybook
03	React Hello World — props down, events up
04	Component Composition
05	React is Declarative
06	useEffect — side effects & cleanup
07	Derived Values — avoiding redundant state
08	Component Communication — state lifting
09	Define Callbacks Where State Lives
10	Use Data Objects Instead of Many Props
11	Keep State Close to the Source
12	Smart/Dumb Component Pattern
13	Centralized Logic Benefits
14	Custom Hooks
15	Context for Cross-Cutting Concerns
16	Fixtures Pattern in Storybook
17	Mocking API Data in Storybook

The full written narrative lives in src/training/TRAINING_CONTENT.md.

Project structure

.storybook/          Storybook config; preview wraps every story in OptimusProvider + FontProvider
src/training/        The 17 training sections (NN-Name.tsx components + NN-Name.story.tsx stories)
src/design-system/   Fake design system — simplified stand-ins for Optimus components
src/shims/           Stand-ins for the internal Mews packages used by the stories

How the design system works

The stories import design-system components from @optimus-web/core (and the providers from @optimus-web/theme / @optimus-web/fonts), exactly as in the real app. Those specifiers are aliased to src/design-system/ in tsconfig.json and .storybook/main.ts, so the story files never had to change.

The stubs are plain React + inline styles — Stack, Typography, Card, SimpleList/SimpleListItem, Button, TextInput, Tag, Spinner, Dialog — close enough to Optimus for a tutorial. They are not the real design system; see CLAUDE.md for the rationale and how to extend them.

Other shims

• @app/test-utils/storybook → only appLayerDecorators was used; the training stories don't need its providers, so it's a no-op that keeps the story call sites unchanged.
• @app/ui → only Loader was used; mapped to the design system's Spinner.

Contributing

Working in this repo (human or AI agent)? Read CLAUDE.md first — it covers conventions, the design-system aliasing, and how to add a new section.