React Crash Course

A short course taking you from "I can't read this" to "I can tell whether this is right".

You'll be writing React with an AI assistant. It produces syntax faster and more correctly than you will for a while. So this course is not about typing code — it's about reading it, judging it, and knowing what to ask for.

---

Sessions

#	Session	You'll be able to
1	JavaScript & TypeScript	Read any line of modern JS or TS and say what it does

Each session has practice to work through afterwards. The next one lands here once it's been taught.

---

What you need

node 22 or newer:

node --version

If it prints below v22, install from nodejs.org.

Node runs everything here — the practice files now, and React's tooling later on. It's worth getting sorted once.

Have a browser console open during sessions too (F12 → Console tab) so you can type along.

---

Practice

cd practice/session-1
node 01-copying.js

Every file prints PASS or FAIL per task, and a count at the end. Work until everything passes.

  PASS  addItem returns the new list
  FAIL  addItem left the original alone
        expected [1,2,3]
        got      [1,2,3,4]

Start with 01 and go in order — each file builds on the one before. Details are in practice/session-1/README.md.

Don't use an AI assistant for these. It will produce correct answers instantly and you will learn nothing. You're training the judgment you'll later use to check its work, and that only happens if you struggle first.

If a task takes more than ten minutes, something from the session didn't land. Note it, move on, and bring it to next session — the first ten minutes are for exactly that.

---

Reading the slides

The decks are plain Markdown, so you can read them straight from decks/.

To view one as an actual presentation you need neovim with present.nvim:

nvim decks/session-1.md -c PresentStart

Key	Action
n / p	next / previous slide
X	run the code block on this slide
q	quit

Almost every code block in the deck is runnable — including the ones that crash on purpose. The exception is the DOM section at the end, which needs a browser; paste those into your console instead.

---

Layout

decks/          the slides
practice/       exercises

Teaching notes and solutions are kept separately. The exercises only work if you haven't seen the answers first.