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 (new project) — Getting started in 5 minutes → LMS Go-Live → Production checklist (appendix)

6. LessonKit (existing Vite app only) — Quickstart — add to an existing Vite app

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

Start

Topic	Page
Coming from H5P	../h5p-for-lessonkit-authors.md
Getting started (5 min)	getting-started-in-5-minutes.md
Quickstart (existing Vite app)	quickstart.md
Project structure	project-structure.md
Components & hooks	components-and-hooks.md
Block cookbook	block-cookbook.md

Ship

Topic	Page
LMS Go-Live (canonical)	lms-go-live.md
Backend proxy cookbook	backend-proxy-cookbook.md
Packaging & CLI	packaging-and-cli.md
Deployment	deployment-guide.md
LRS operations	lrs-operations.md
Export parity	export-parity.md
Troubleshooting	troubleshooting.md
FAQ	../faq.md
Appendices	first-lms-export.md · ship-to-lms.md · production-checklist.md

Advanced

Topic	Page
Telemetry & xAPI	telemetry-and-xapi.md
Theming & a11y	theming-and-accessibility.md
Touch & mobile	touch-and-mobile.md
Multi-course patterns	multi-course-patterns.md
Performance	performance.md
Plugins	plugin-cookbook.md
Monorepo	contributing-to-the-monorepo.md
Adding a framework block	adding-a-framework-block.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.