React Academy logo
ReactBeginnerWebMobielNiveaus A1 → C122 talen

React Academy

Beheers ReactJS om dynamische gebruikersinterfaces te bouwen met ReactJS Academy. Een CoddyKit-leertraject met 88 korte cursussen en 324 interactieve lessen, met een AI-tutor die 24/7 voor je klaarstaat.

Cursussen
88
Lessen
324
Interactieve stappen
3,793
Gratis beginnen
Cursus 1
Lesprogramma

88 cursussen in dit leertraject

Elke cursus in het leertraject React Academy, in de juiste leer volgorde. De eerste is gratis.

1

A13 lessenGratis

Begin met de basis van React: componenten, declaratieve UI en hoe diffing de DOM efficiënt bijwerkt. Stel daarna een project in (bijvoorbeeld met Vite), start een developmentserver en render uw eerst…

2

A13 lessenPRO

Leer de regels van JSX: expressies en attributen, fragments retourneren, lijsten met keys renderen, eenvoudige conditionals en opties voor styling (CSS-modules, inline styles, class helpers).

3

A24 lessenPRO

Beheers de browserextensie React DevTools om componentbomen te inspecteren, renders te profileren en state en props effectief te debuggen.

4

A24 lessenPRO

Maak vloeiende animaties voor binnenkomst, vertrek en statuswijzigingen in React met CSS-transities en keyframes — zonder animatiebibliotheek.

5

A24 lessenPRO

Deel state tussen componenten op hetzelfde niveau door deze omhoog te tillen en begrijp wanneer prop drilling een probleem wordt dat u moet oplossen.

6

A24 lessenPRO

Bewaar React-status tussen pagina-herladingen met localStorage, verwerk synchronisatie tussen tabbladen en kies voor elke use case de juiste browseropslag-API.

7

A24 lessenPRO

Bouw een robuust darkmode-systeem met CSS custom properties, React context en de prefers-color-scheme-mediaquery, zonder flits van het verkeerde thema.

8

A23 lessenPRO

Geef gegevens door met props , stel eenvoudige defaults in via destructuring, stel UI's samen met children en geef voor herbruikbare presentatiecomponenten de voorkeur aan compositie boven overerving.

9

A23 lessenPRO

Beheers useState en eventafhandeling: werk state correct bij, verwerk onClick/onChange en bereid u voor op controlled inputs.

10

A23 lessenPRO

Leer controlled forms met meerdere inputs bouwen, pas basisvalidatie toe en verwerk inzendingen soepel in React.

11

A23 lessenPRO

Begrijp client-side routing: hoe SPA's van weergave wisselen zonder volledige paginaherlaadbeurten, wat basispaden en parameters zijn en hoe actieve navigatiestatussen werken.

12

A23 lessenPRO

Beheers useRef : behoud waarden tussen renders zonder nieuwe renders te veroorzaken, krijg toegang tot DOM-nodes en beheer timers veilig.

13

A23 lessenPRO

Houd code schoon met ESLint en React-regels en formatteer automatisch met Prettier . Voeg scripts toe en los problemen snel op.

14

A22 lessenPRO

Beheers controlled en uncontrolled inputs: leer wanneer u welke kiest, ontdek eenvoudige ref-patronen en gebruik veilige standaardwaarden.

15

B14 lessenPRO

Leer wat StrictMode doet, welke waarschuwingen het toont en welke codeconventies React-apps onderhoudsvriendelijker maken.

16

B14 lessenPRO

Render inhoud buiten de DOM-hiërarchie van de parent met React Portals om modals, tooltips en overlays te bouwen.

17

B14 lessenPRO

Werk met props.children en React.Children-hulpprogramma's en implementeer flexibele component-API's op basis van slots.

18

B14 lessenPRO

Gebruik ongecontroleerde invoervelden met useRef, lees waarden van bestandsvelden en verwerk workflows voor bestandsuploads in React.

19

B14 lessenPRO

Ontwerp Context-providers die re-renders beperken met memoization, gesplitste contexts en selectorpatronen.

20

B14 lessenPRO

Voeg meertalige ondersteuning toe aan React-apps met react-i18next, beheer vertaalbestanden en laat gebruikers van locale wisselen.

21

B14 lessenPRO

Integreer krachtige browser-API's — Clipboard, Geolocation, Notifications en IntersectionObserver — in React-components, met correcte opruiming en afhandeling van machtigingen.

22

B14 lessenPRO

Voorkom overmatige re-renders en API-aanroepen door debounce- en throttlepatronen als herbruikbare React-hooks te implementeren voor zoek-, scroll- en resize-events.

23

B14 lessenPRO

Bouw vanaf nul toegankelijke, met het toetsenbord bedienbare autocomplete- en type-ahead-components met React-state en refs, zonder library.

24

B14 lessenPRO

Bouw performante, flexibele formulieren in React met React Hook Form: registratie, validatie, foutweergave en integratie met schema's.

25

B14 lessenPRO

Gebruik Zustand om globale state in React-apps te beheren: stores, acties, selectors, persistentie en integratie met devtools.

26

B14 lessenPRO

Ga verder dan basisroutes met geneste layouts, loaders, actions, beveiligde routes en statebeheer met zoekparameters.

27

B14 lessenPRO

Voeg TypeScript toe aan React-projecten: typ props, events, hooks, context en generieke componenten met vertrouwen.

28

B14 lessenPRO

Bouw datatabellen voor productie met sorteren, filteren, paginering en rijselectie via de krachtige headless architectuur van TanStack Table.

29

B14 lessenPRO

Beheer React-state met Jotai's minimale atomische model: composable atoms die waarden afleiden, asynchrone bewerkingen afhandelen en naadloos integreren met React Suspense.

30

B14 lessenPRO

Gebruik SWR's stale-while-revalidate-strategie voor snel en betrouwbaar ophalen van data, met automatische revalidatie, mutations en offlineondersteuning.

31

B14 lessenPRO

Bouw toegankelijke, aanraakvriendelijke drag-and-drop-interfaces in React met dnd-kit: sorteerbare lijsten, kanbanborden en draginteracties met meerdere containers.

32

B14 lessenPRO

Maak vloeiende animaties op basis van veerfysica in React met react-spring, van eenvoudige waardetransities tot complexe, door gestures aangestuurde interacties.

33

B14 lessenPRO

Implementeer realtime datafeeds in React met Server-Sent Events en pollingstrategieën, en begrijp de afwegingen ten opzichte van WebSockets voor verschillende toepassingen.

34

B13 lessenPRO

Begrijp useEffect : wanneer deze wordt uitgevoerd ten opzichte van render, hoe dependency-arrays dit sturen en hoe u veilige cleanups schrijft.

35

B13 lessenPRO

Ontwerp robuuste data-UI's: verwerk loading -, error -, empty - en success -states met duidelijke feedback en lichte skeletons.

36

B13 lessenPRO

Deel state tussen ver uit elkaar liggende componenten met Context om prop drilling te voorkomen; stel een Provider in en lees waarden via useContext .

37

B13 lessenPRO

Haal herbruikbare logica uit naar custom hooks : definieer duidelijke parameters, retourneer stabiele waarden en acties en houd effects schoon.

38

B13 lessenPRO

Bouw inclusieve UI's: gebruik echte semantiek en duidelijke labels en rollen, en beheer toetsenbordfocus voor soepele navigatie.

39

B14 lessenPRO

Voeg vloeiende animaties en overgangen toe aan React-apps met Framer Motion: motion-componenten, varianten, gestures en layoutanimaties.

40

B13 lessenPRO

Vang fouten tijdens het renderen op met Error Boundaries, toon veilige fallbacks en houd de rest van de app responsief.

41

B13 lessenPRO

Voeg lichte types toe aan React-componenten. Begin met props en haal daarna herbruikbare generics uit om UI-code veilig en duidelijk te houden.

42

B13 lessenPRO

Organiseer React-apps: feature-first-mappen, kleine UI-primitieven tegenover samengestelde componenten, hooks en tests bij elkaar en duidelijke regels voor refactoring.

43

B24 lessenPRO

Render duizenden lijstitems zonder prestatieverlies door react-window te gebruiken om de DOM-uitvoer te virtualiseren: alleen wat zichtbaar is in de viewport wordt gerenderd.

44

B24 lessenPRO

Verwerk asynchrone bewerkingen op een idiomatische manier in React met useEffect, useTransition, useDeferredValue en Suspense.

45

B24 lessenPRO

Begrijp render props en higher-order components als klassieke patronen voor codehergebruik, voordat hooks deze grotendeels vervingen.

46

B24 lessenPRO

Begrijp het subtiele maar cruciale verschil tussen useEffect en useLayoutEffect — wanneer ze worden uitgevoerd ten opzichte van de DOM-commit — en gebruik beide correct.

47

B24 lessenPRO

Beheer complexe app-state met slices en thunks van Redux Toolkit en gebruik RTK Query voor caching en synchronisatie van server-state.

48

B24 lessenPRO

Begrijp React Server Components, de use()-hook, Actions en andere React 19-API's die de manier veranderen waarop gegevens door apps stromen.

49

B24 lessenPRO

Beheer server-state met TanStack Query: ophalen, cachen, op de achtergrond opnieuw ophalen, mutaties en paginering.

50

B24 lessenPRO

Schrijf integratietests met React Testing Library en end-to-endtests met Playwright om echte gebruikersstromen te valideren.

51

B24 lessenPRO

Documenteer, ontwikkel en test React UI-componenten geïsoleerd met Storybook, CSF3-stories en addons.

52

B24 lessenPRO

Bouw React-interfaces die live worden bijgewerkt met WebSockets en bibliotheken zoals Socket.IO voor chat, meldingen en dashboards.

53

B24 lessenPRO

Bouw volledig typeveilige API's zonder schema's of codegeneratie met tRPC, waarbij types automatisch worden gedeeld tussen uw React-frontend en Node.js-backend.

54

B24 lessenPRO

Integreer GraphQL in React-applicaties met Apollo Client: query's uitvoeren, mutations verwerken, cachen en de UI synchroniseren met serverdata.

55

B24 lessenPRO

Bouw snelle, responsieve UI's die resultaten direct tonen vóór bevestiging door de server, met correct terugdraaien bij fouten en strategieën voor conflictresolutie.

56

B24 lessenPRO

Package en publiceer herbruikbare React-componentlibraries naar npm, met ondersteuning voor dubbele ESM/CJS-output, peer dependencies, tree shaking en geautomatiseerde versioning.

57

B23 lessenPRO

Begrijp de fasen render en commit van React, wanneer componenten worden bijgewerkt en wanneer memoization helpt.

58

B23 lessenPRO

Leer de basis van concurrent UI met useTransition : houd typen responsief, toon een indicatie van een lopende bewerking en stel niet-urgente updates uit.

59

B23 lessenPRO

Laad alleen wat u nodig hebt door schermen en widgets met code splitting te laden. Gebruik React.lazy en Suspense voor apps die sneller aanvoelen.

60

B23 lessenPRO

Stel tests in met Vitest/Jest en React Testing Library ; render componenten, zoek op role/label en voer tests uit in een jsdom-omgeving.

61

B24 lessenPRO

Bouw full-stackwebapps met de App Router van Next.js 14+: routing op basis van bestanden, layouts, servercomponenten en metadata.

62

B24 lessenPRO

Haal gegevens op, cache ze en valideer ze opnieuw in de Next.js App Router met fetch-opties, unstable_cache en on-demand revalidatie.

63

B24 lessenPRO

Voeg authenticatie toe aan Next.js-apps met Auth.js (NextAuth v5): OAuth-providers, inloggegevens, sessies en routebeveiliging.

64

B24 lessenPRO

Zet uw React-kennis om naar mobiel door React Native-primitieven, styling, navigatie en native apparaat-API's te leren.

65

B24 lessenPRO

Implementeer React- en Next.js-apps in productie met Vercel, AWS S3/CloudFront en Docker-containers met CI/CD-pijplijnen.

66

B24 lessenPRO

Gebruik React 19 Server Actions en Next.js form actions om mutations server-side af te handelen, zodat API-routes voor veelvoorkomende formpatronen overbodig worden dankzij progressive enhancement.

67

B24 lessenPRO

Versterk React-applicaties tegen XSS, CSRF en andere kwetsbaarheden, met praktische richtlijnen voor Content Security Policy, secrets management en veilig renderen.

68

B24 lessenPRO

Bouw een schaalbaar design-tokensysteem voor React-componentlibraries met meerdere thema's, van token-definitie tot CSS-variabelen, Tailwind-integratie en Style Dictionary.

69

B24 lessenPRO

Bouw cross-platform desktopapplicaties met Electron en een React-frontend, inclusief IPC-communicatie, native API's en packaging voor distributie.

70

B23 lessenPRO

Bouw compound components: de parent levert de context en de children gebruiken deze voor flexibele API's.

71

B23 lessenPRO

Bouw grote formulieren met kleine, robuuste onderdelen: field arrays, dynamische secties en eenvoudige validatiestromen.

72

B23 lessenPRO

Ga verder dan de basis: leer over geneste layouts, route loaders als concept en eenvoudige ideeën voor prefetching voor soepelere navigatie.

73

B23 lessenPRO

Weet wat in de servercache thuishoort en wat lokale UI-state is. Haal data op, vernieuw deze en voorkom dat u verantwoordelijkheden vermengt.

74

B23 lessenPRO

Maak toegankelijke overlays: render met portals, houd de focus binnen de overlay en ondersteun snel sluiten met Escape of de backdrop.

75

B23 lessenPRO

Bereid apps voor op productie: builds voor development en productie, source maps, eenvoudige environmentvariabelen en kleine controles om met vertrouwen te releasen.

76

C14 lessenPRO

Beheers imperatieve React-API's: stel aangepaste waarden van componentinstanties beschikbaar aan bovenliggende componenten met forwardRef en useImperativeHandle voor situaties waarin declaratieve pat…

77

C14 lessenPRO

Leer de useSyncExternalStore-hook van React 18 kennen: de juiste manier om React-componenten te synchroniseren met externe statusbronnen zoals browser-API's, globale stores en bibliotheken van derden.

78

C14 lessenPRO

Splits grote React-frontends op in onafhankelijk geïmplementeerde microfrontends met Module Federation en single-spa.

79

C14 lessenPRO

Begrijp de werking van server-side rendering, hydration, selectieve hydration en het streamen van HTML met React's renderToPipeableStream.

80

C14 lessenPRO

Verbeter uw React TypeScript-vaardigheden met discriminated unions, mapped types, conditional types en typeveilige component-API's.

81

C14 lessenPRO

Meet en verbeter Core Web Vitals (LCP, INP, CLS) in React-apps met profileringstools, bundelanalyse en gerichte optimalisaties.

82

C14 lessenPRO

Organiseer meerdere React-apps en gedeelde bibliotheken in een monorepo met Nx, slimme taakplanning en affected-based CI.

83

C14 lessenPRO

Vermijd hydration van volledige pagina's door de Islands Architecture toe te passen: hydrateer met Astro alleen de interactieve React-components die dit nodig hebben.

84

C14 lessenPRO

Integreer WebAssembly-modules in React-applicaties voor rekenintensieve taken, van Rust WASM-modules tot shared memory en worker threads.

85

C14 lessenPRO

Serveer React-applicaties vanaf de edge met submilliseconde-latentie, met Cloudflare Workers, streaming SSR en edge-native cachingstrategieën.

86

C14 lessenPRO

Instrumenteer React-applicaties met OpenTelemetry om traces te verzamelen, de prestaties voor echte gebruikers te meten en frontend-events aan backend-spans te koppelen.

87

C14 lessenPRO

Gebruik streaming SSR van React 18 en Suspense om HTML stapsgewijs aan de browser te leveren, zodat de ervaren performance verbetert zonder te wachten tot alle data is geladen.

88

C14 lessenPRO

Implementeer Webpack Module Federation om React-micro-frontends onafhankelijk te bouwen en te deployen, met gedeelde dependencies, state en routing tussen remote applicaties.

CoddyKit PRO

Ontgrendel alle 88 cursussen in dit leertraject en in elk ander leertraject

AI-begeleider, certificeringsexamen en certificaat. Werkt op het web, iOS en Android.

Alle abonnementen bekijken
Jaarlijks$29.90 per jaarOngeveer $2.49 per maandEenmalig betalenLevenslang$69.99 eenmaligGeen verlengingen. PRO voor altijd.
Cursusoverzicht

Bouw echte interfaces met React

React is de JavaScript-bibliotheek die bepaalt hoe de meeste productiegerichte gebruikersinterfaces tegenwoordig worden gebouwd — van singlepage-apps en Next.js-sites tot cross-platform mobiele en desktoptoepassingen. In dit leertraject behandelt u het volledige vakgebied: componentarchitectuur, statusbeheer, gegevens ophalen, prestaties, testen en implementatie. De inhoud is gebaseerd op hoe React daadwerkelijk werkt — de reconciler, het fibermodel en de semantiek van hooks — en niet alleen op de zichtbare API.

Wat u leert

U begint met JSX, props, status en gecontroleerde componenten en gaat daarna verder met useEffect, useRef en useReducer. Praktische cursussen behandelen routering met React Router v6, formulierverwerking met React Hook Form, serverstatus met React Query en SWR, en globale status met Redux Toolkit, Zustand en Jotai. U werkt met TypeScript in React, schrijft integratie- en E2E-tests, bouwt ontwerpsystemen met Storybook, verwerkt realtime gebruikersinterfaces via WebSockets en levert typeveilige API's met tRPC. Het traject omvat ook de Next.js App Router, servercomponenten, serveracties en authenticatie met NextAuth.js.

Het leertraject

Vijfennegentig cursussen lopen van A1 tot en met C1. De cursussen op A1- en A2-niveau leggen de basis voor React, JSX-weergave, CSS-animaties, persistentie met lokale opslag en de donkere modus. De B1-cursussen bouwen uw vertrouwen op met contextpatronen, i18n, React Spring, Framer Motion, slepen en neerzetten met dnd-kit en complexe gegevenstabellen met TanStack Table. De B2-cursussen behandelen rendering en memoisatie, Suspense, het splitsen van code, React Native voor React-ontwikkelaars, implementatie op Vercel en AWS en Electron voor desktopapps. Op C1 rondt u het traject af met geavanceerde onderwerpen: Micro-frontendarchitectuur, SSR en een diepgaande blik op hydratatie, Module Federation, Islands-architectuur met Astro, WebAssembly-integratie, Edge-rendering met Cloudflare Workers en OpenTelemetry voor observability van frontendtoepassingen.

Zo werkt het

Elke cursus is opgedeeld in korte, gerichte lessen die u in de ingebouwde code-editor voltooit met realtime feedback. Een AI-tutor is beschikbaar wanneer u vastloopt op een concept of een mislukte test. U kunt het traject in volgorde doorlopen of meteen naar het niveau gaan dat bij uw huidige ervaring past.

Zo leer je

  1. 01

    Interactieve lessen

    Praktische codeeroefeningen met realtime feedback

  2. 02

    AI-docent

    Krijg direct hulp van onze AI als je vastloopt

  3. 03

    Ingebouwde editor

    Schrijf en voer code direct uit in je browser

  4. 04

    Certificaat

    Behaal een certificaat wanneer je de cursus afrondt

FAQ

Veelgestelde vragen

Is de React Academy-cursus gratis?

Ja. Je kunt gratis aan de React Academy-cursus beginnen en de interactieve lessen kosteloos doorlopen. Met een optioneel PRO-abonnement krijg je toegang tot geavanceerde AI-tools en een deelbaar certificaat.

Heb ik voorafgaande ervaring nodig om React te leren?

Nee. De cursus begint bij de basis en behandelt geleidelijk steeds geavanceerdere onderwerpen. Je kunt dus ook zonder eerdere ervaring met React beginnen.

Hoe leer ik React op CoddyKit?

Je leert door te doen. Korte interactieve lessen combineren een duidelijke uitleg met een praktische codeeroefening die in realtime wordt uitgevoerd. Een AI-begeleider is 24/7 beschikbaar voor persoonlijke hulp wanneer je vastloopt.

Krijg ik een certificaat als ik React Academy afrond?

Ja. PRO-leerlingen kunnen een examen afleggen en een deelbaar certificaat van voltooiing behalen, met een verifieerbare code voor de React Academy-cursus.

Kan ik React op mijn telefoon leren?

Ja. CoddyKit is beschikbaar op het web en als native iOS- en Android-app, zodat je React op elk apparaat kunt leren en je voortgang op al je apparaten wordt gesynchroniseerd.

Wat kost CoddyKit PRO?

De eerste cursus van React Academy is gratis. Met CoddyKit PRO ontgrendel je elke cursus: $5.90 per week, $7.90 per maand, $29.90 per jaar of eenmalig $69.99 voor levenslange toegang zonder verlengingen.

Hoe lang duurt het om React Academy te voltooien?

React Academy bevat 88 cursussen en 324 lessen. De meeste lessen duren ongeveer 5–10 minuten, dus het hele leertraject kost ongeveer 38 uur aan praktische oefeningen, in je eigen tempo.

Begin nu met React Academy

Sluit je aan bij duizenden leerlingen die met AI-ondersteunde lessen leren programmeren.