React.
From the JavaScript you actually need, through React's model, to shipping something you can defend in a viva.
7 stages · 32 stops
Who this is for
You have been told to learn React, or your project needs a front end, and every tutorial assumes JavaScript you were never taught.
Read this first
Most people who say they are stuck on React are stuck on JavaScript. Stage one is not a warm-up, and skipping it is the single most common reason the rest of this stops making sense.
Stage 1 of 7
the javascript underneath
By the end: You can read a React file and know which parts are React and which parts are just the language.
Values, and the two equals
What is actually in a variable, and why == and === are not the same question. Every confusing bug in your first month lives here.
everyone gets stuck here
Functions that return functions
Closures. If this is fuzzy, hooks will never make sense, because a hook is a closure with a rule attached.
map, filter, reduce
Rendering a list in React is map. Not a nice-to-have: you will write it on your first day and every day after.
Destructuring and spread
Half of React's syntax is this and nothing more. Once you see it, props stop looking like magic.
Modules: import and export
Where code comes from, and why the path matters. This is also the first thing that breaks when you copy code from a tutorial.
everyone gets stuck here
async, await, and the event loop
Why your data is undefined on the first render. Not a React problem, a JavaScript one, and the fix is understanding when things happen.
Stage 2 of 7
the browser it sits on
By the end: You know what React is replacing, so you can tell when you do not need it.
The DOM is a tree
React's whole job is keeping this tree in step with your data. Knowing what it is doing by hand makes the abstraction honest instead of mysterious.
Events, and what bubbling means
Clicks, typing, submitting. React wraps these but does not change the model underneath.
fetch, JSON, and the network tab
How your page talks to a server, and how to see it happening. The network tab answers more questions than any tutorial.
node, npm, and what a bundler does
Why a browser language needs a build step at all. Worth an hour so the tooling stops feeling like weather.
Stage 3 of 7
react's actual model
By the end: You can build a screen from scratch without copying one.
JSX is a function call
Look at what JSX compiles to once and the syntax stops being a language you have to trust.
Components and props
One-way data flow: data goes down, and that constraint is the whole reason React scales.
everyone gets stuck here
State, and why the screen changes
The mental model worth carrying: your UI is a function of your state. You do not update the page, you update the state and let React work out the page.
Lists and keys
Why React shouts about keys, and what actually goes wrong when you use the array index.
Forms and controlled inputs
The point where most people first fight the framework. There is a rule here, and once you have it forms stop being painful.
Stage 4 of 7
effects and real data
By the end: Your app talks to a server without lying to the user about what is happening.
everyone gets stuck here
Most useEffect is wrong
Including in the tutorial you learned it from. Learn what an effect is for before you learn its syntax, and you will write a tenth as many.
Loading, error, empty
Three states every screen has and most student projects forget. This is the difference between a demo and something someone can use.
Cleanup and race conditions
Two requests, the slow one lands last, the wrong data wins. Everyone hits this; almost nobody is taught it.
Where the data actually lives
Sooner or later the answer is a database, and the shape you choose there decides how hard your front end has to work.
Stage 5 of 7
structure, once it grows
By the end: You can add a feature to your own app without dreading it.
Composition instead of prop drilling
The first real design decision you will make. Usually the answer is a better shape, not a bigger library.
Custom hooks
Pulling logic out of a component without pulling it into a library. This is where React starts feeling like a language rather than a chore.
When you do not need a state library
Which is more often than the internet suggests. Knowing when you genuinely do is worth more than knowing any particular one.
Auth, and who is allowed to do what
Logging in is the easy half. Authorisation on every request is the half that gets projects marked down, and it is a backend problem wearing a frontend costume.
Stage 6 of 7
shipping it
By the end: It is on the internet and it does not fall over in the demo.
Build, deploy, and a real URL
A project that only runs on your laptop is hard to defend and impossible to show.
Accessibility, the basic version
Labels, focus, keyboard. Cheap to do from the start, miserable to retrofit the night before submission.
What actually re-renders
Measure before you memoise. And note that the React Compiler now writes most of that memoisation for you, which changes the advice you will find in older tutorials.
Making it fast enough
Perceived speed is mostly about what you do before the network answers. The systems side of this is the same everywhere.
Stage 7 of 7
building with claude, honestly
By the end: You can move fast with an agent and still answer for every line of it.
everyone gets stuck here
Scaffolding with an agent
What to hand it, what to keep. It is very good at the parts you already understand and dangerous at the parts you do not.
Reviewing what it wrote
Reading unfamiliar code critically is a skill, and it is now the main one. Most of a session on this is spent slowing down and asking why.
everyone gets stuck here
The viva test
Point at any line and say why it is there. If you cannot, you do not own that code yet, whatever the commit history says.
What it cannot do for you
It cannot know whether it is right. Judgement about your own domain stays yours, and that is precisely what an examiner is testing.
Nobody finishes this alone
The map is free and it will still be here later. What it does not do is sit with you at the stop you are stuck on, which is the part we actually offer.
Book an hour