React is in Amsterdamse productteams geen bibliotheek meer die u “er even bij doet”. Het is de taal waarin schermen, data-grenzen en foutstaten worden onderhandeld. De React cursus van NLCodeCraft Frontend Academy traint u om componenten te bouwen die een lead frontend zou mergen: duidelijke props, voorspelbare state, geen verborgen side effects. Mark van Leeuwen weigert een todo-app als eindopdracht. U bouwt een scherm met laden, leeg, fout en succes — dezelfde vier staten die in productie bestaan.
Wij starten bij wat u al kent. Beheerst u HTML en JavaScript, dan gaan wij in week één naar functionele componenten en props als contract. Beheerst u al hooks, dan gaan wij naar data-fetching, cachegrenzen en het verschil tussen UI-state en server-state. De instroom staat in de cursuskaart. Zonder JavaScript-fundament verwijzen wij u eerst naar het Frontend Lab.
Wat de cursus wél en niet is
Wél: componentontwerp, hooks als gereedschap met kosten, lijsten en keys, formulieren zonder magie, toegankelijke interactie, en een kleine ontwerpdiscipline zodat uw JSX leesbaar blijft. Niet: een encyclopedie van elk RFC, en niet “React 19 in één weekend”. Nieuwe API’s behandelen wij wanneer ze uw team raken, niet wanneer ze op Twitter staan.
| Blok | Uitkomst | Reviewcriterium |
|---|---|---|
| Componenten & props | Scherm opgeknipt in verantwoordelijkheden | Geen god-component, props tekenen het contract |
| State & effects | Voorspelbare updates, effects met reden | Geen fetch-in-render, cleanup waar nodig |
| Data & fouten | Laden/leeg/fout/succes als eerste klas staten | Gebruiker ziet nooit een stille crash |
| Samenstelling | Lijsten, slots, kleine patronen | Hergebruik zonder copy-paste van businesslogica |
Leermodules React
Week 1–2: JSX als HTML met discipline
Semantiek eerst. Div-soep is geen component. U leert waarom een button een button is, ook in React.
Week 3–4: State die u kunt tekenen
Lokale state, tillen naar boven, en het moment waarop context een last wordt in plaats van een cadeau.
Week 5–6: Data de deur wijzen
Fetching, abort, stale closures. U koppelt dit later aan TypeScript-types in de vervolgtrack.
Week 7–8: Scherm als product
Toegankelijke dialogs, focus, toetsenbord. Een mooie demo die alleen met de muis werkt, zakt de review.
TypeScript is in deze cursus aanwezig als annotatie zodra u het aankunt; de diepte zit in de TypeScript-track. Wie beide combineert, bouwt hetzelfde scherm twee keer: eerst werkend, daarna contractueel. Dat is trager in week drie en sneller in maand drie.
type LoadState<T> =
| { status: "idle" }
| { status: "loading" }
| { status: "error"; message: string }
| { status: "success"; data: T };
function Panel({ state }: { state: LoadState<User[]> }) {
if (state.status === "loading") return <p>Gegevens worden geladen.</p>;
if (state.status === "error") return <p role="alert">{state.message}</p>;
if (state.status !== "success") return null;
return <UserList users={state.data} />;
}
Huiswerk is een pull request, geen screenshot. U werkt in een academy-repo met branchbescherming. Mark van Leeuwen commentarieert alsof het een interne PR is: kort, specifiek, zonder emoji-regens. Wie de commentaarronde overslaat, rondt de module niet af — aanwezigheid is geen vakmanschap.
Veelgestelde vragen
Moet ik Redux kennen?
Nee. Wij beginnen met lokale state en een dunne data-laag. Redux of een query-library komt pas wanneer het probleem dat eist.
Behandelt u class components?
Alleen als u legacy moet lezen. Nieuwe code schrijven wij functioneel.
Kan ik met mijn werkproject instromen?
Na intake, als de code deelbaar is of u een gestript voorbeeld meeneemt.
Wat als ik al Next.js gebruik?
Dan volgt u React-fundamenten gericht op server/client-grenzen, of u start in de Next.js-module na een korte toets.
Leslocatie en bereik in Amsterdam
NLCodeCraft geeft klassikale en hybride frontend-opleidingen vanaf de Wibautstraat, op de Knowledge Mile tussen Amstel en Weesperplein. Cursisten komen uit de onderstaande stadsdelen; avondgroepen starten na kantoortijd zodat u vanuit Zuid, Noord of Oud-West kunt aansluiten zonder een extra reisdag in te plannen.
- Centrum
- De Pijp
- Oud-West
- Oost
- Watergraafsmeer
- Amsterdam-Noord
- Zuid
- Westerpark
NLCodeCraft Frontend Academy
Uw aanspreekpunt: Mark van Leeuwen
Wibautstraat 131
1091 GL Amsterdam
Telefoon: +31 20 244 3188
E-mail: [email protected]