React developer guides

Who this is for

Developers comfortable with React, TypeScript, and npm who want full control of components, telemetry, theming, and LMS export.

These guides assume you are comfortable with React, TypeScript, and npm. You will integrate LessonKit into apps you own or scaffold with the CLI.

New to React?

LessonKit courses are React apps (usually Vite + TypeScript). You do not need to be an expert, but you should understand components, props, state, and effects before you customize navigation or wire telemetry.

Suggested learning order

1. JavaScript (if rusty) — MDN JavaScript guide

2. React — react.dev Learn (official tutorial)

3. TypeScript (basics) — TypeScript Handbook

4. Vite (how lessonkit dev works) — Vite Getting Started

5. LessonKit — Quickstart on this site

Curated resources

Resource	What to focus on
react.dev — Learn React	Components, JSX, props, state, rendering lists, sharing state between components
react.dev — Hooks reference	useState, useEffect, useMemo, useCallback (used in LessonKit examples)
react.dev — Thinking in React	Breaking UI into components—same mindset as structuring lessons
TypeScript Handbook	Types on props, useMemo config objects, reading package APIs
Vite guide	Dev server, npm run dev / npm run build, project layout
Node.js docs	Installing Node, running npx, workspace scripts
React TypeScript Cheatsheet	Typing React components when TypeScript errors block you

After the basics, skim our components & hooks guide and the react-vite example for patterns LessonKit expects (Course, Lesson, stable IDs).

Prefer not to learn React?

Use the Vibe coding guides with an AI editor and the CLI—you can ship courses without studying React first.

What LessonKit gives you

• Components — Course, Lesson, Scenario, Quiz, Reflection, ProgressTracker

• Runtime — LessonkitProvider with progress, telemetry batching, xAPI client lifecycle

• Packages — @lessonkit/core, @lessonkit/xapi, @lessonkit/themes, @lessonkit/accessibility, @lessonkit/lxpack

• Tooling — @lessonkit/cli for init/dev/build/package and lessonkit.json as the packaging manifest

Guide outline

Topic	Page
Coming from H5P	../h5p-for-lessonkit-authors.md
Getting started (5 min)	getting-started-in-5-minutes.md
Quickstart	quickstart.md
Project structure	project-structure.md
Components & hooks	components-and-hooks.md
Telemetry & xAPI	telemetry-and-xapi.md
Production checklist	production-checklist.md
Theming & a11y	theming-and-accessibility.md
Packaging & CLI	packaging-and-cli.md
Export parity	export-parity.md
Plugins	plugin-cookbook.md
Monorepo	contributing-to-the-monorepo.md

Identity requirements (0.5+)

• courseId required on Course / LessonkitProvider

• lessonId required on Lesson

• checkId required on Quiz / KnowledgeCheck

Align IDs with lessonkit.json and your LXPack descriptor. See Identity reference.

Other audience

Instructional designers using AI assistants should start with Vibe coding guides.