Category · React
A screen made of functions, not one big HTML canvas
Component and JSX, props and state, lists, forms, effects, data from a server. Eight short lessons: the foundation people already build screens with. Stuck on a line? Ask about it with Ask right in that spot.
8 lessons89 min
To the first lessonCheatsheet nowTopics, each as its own lesson
01Component and JSXDemoUI is a function that returns markup. Not an HTML string, but a tree of elements.
10 min
02Props and stateProps come from above. What's yours and changes is state. Don't mix them up.
11 min
03Lists, keys and effectsAn array in JSX is `.map`. A key isn't the index if the list moves. An effect isn't for calculations.
12 min
04Events and a form without reloadingonClick gets a function. A form needs preventDefault, otherwise the page flashes and reloads.
10 min
05A controlled inputYou take the field's value from state and write it back in onChange. One source of truth.
11 min
06useEffect: outside the componentAn effect is the network, a subscription, the tab title. Not for adding first + last.
12 min
07State is lifted, children are insertedWhat two children share lives in the parent. A markup slot is children, not copy-paste.
11 min
08Data from a serverFetch in an effect. While loading — a separate state. An error is a state too, not an alert.
12 min0/8 topics open. This is the course intro, not the whole course on one page.
In the knowledge base
Reference pages for the technologies on this topic: who maintains them, when to use them and what interviews ask.
