Leer & oefen React
Leer & oefen React — Leer React-programmeren door JSX te schrijven en het op je telefoon uit te voeren
Leer & oefen React is een gratis te beginnen iOS- en Android-app die beginners met een beetje HTML, CSS of JavaScript en ontwikkelaars die overstappen van een ander framework React-programmeren leert. Schrijf JSX in een code-editor, tik op Uitvoeren en bekijk hoe je component in een livevoorbeeld wordt gerenderd in de app. 88 cursussen en 324 lessen brengen je van je eerste component via hooks en state management naar Next.js, met onderweg 20 begeleide projecten.
- Prijs
- Gratis, Pro-upgrade
- Platforms
- iOS en Android
- Talen
- 22
- Leeftijdsclassificatie
- 4+
- Versie
- 82.6.1
- Vereist
- iOS 15.1 of hoger
- App Store
- 3.8 ★ (4)
Je component wordt op de telefoon gerenderd, niet op een server.
De runtime, ReactDOM en Babel zijn in de app ingebouwd, zodat de JSX die je schrijft op het apparaat wordt gecompileerd en weergegeven. Je kunt op de knop tikken die je zojuist hebt gebouwd, tekst in je formulier typen en zien hoe de UI reageert. Dat is de feedbacklus waardoor hooks begrijpelijk worden.
Wat het is
Leer & oefen React is een gratis te beginnen React-cursus voor iOS en Android met 88 cursussen en 324 interactieve lessen, van de eerste regel JSX tot hooks, state management, React 19 en de Next.js App Router. De ingebouwde editor compileert je code op het apparaat en rendert de component in een livevoorbeeld, terwijl 20 begeleide projecten elke stap controleren voordat je verdergaat. Het is een onafhankelijke leerapp en is niet verbonden aan Meta of Vercel.
In de app
Hoe het eruitziet
De cursus
Wat de React-cursus behandelt
88 cursussen uit de eigen lijst van de app, gerangschikt in de volgorde waarin je React doorgaans voor het eerst leert.
React Kickoff, JSX en Props & Composition
Components, declaratieve UI en hoe React de DOM bijwerkt, gevolgd door JSX-regels, lijsten renderen en data doorgeven met props.
State, Events, Forms en useRef
useState en eventafhandeling, gecontroleerde forms met validatie, en useRef voor waarden en DOM-toegang die geen render activeren.
useEffect, Data Fetching en Custom Hooks
Wanneer effects worden uitgevoerd, dependency arrays, laad- en foutstatussen voor API-aanroepen, en herbruikbare logica onderbrengen in je eigen hooks.
Context, Redux Toolkit en Zustand
State delen zonder prop drilling met Context en useReducer, gevolgd door Redux Toolkit met RTK Query, Zustand en Jotai voor grotere apps.
Routing, React Query en Forms op schaal
Client-side routing en React Router-patronen, server state met TanStack Query en SWR, React Hook Form en optimistische UI.
Performance, Testing en TypeScript
Rendering en memoisation, code splitting, gevirtualiseerde lijsten, testen met React Testing Library en components en hooks typen.
React 19, Server Components en Next.js
Server Components en Actions, SSR en hydration, gevolgd door de Next.js App Router met data fetching, caching en authenticatie.
Hoe het werkt
Zo werkt een les
Een les behandelt eerst een kort concept en daarna meteen code die je schrijft en uitvoert, zodat het idee en het resultaat op hetzelfde scherm staan.
Lees één concept
Open een cursus uit het leerpad en lees een korte les, bijvoorbeeld over hoe state wordt bijgewerkt of waarom een lijst keys nodig heeft. In het cursusoverzicht staat aangegeven welke lessen gratis zijn, zodat je de opzet kunt bekijken voordat je je vastlegt.
Schrijf JSX en tik op Uitvoeren
Typ de component in de code-editor en voer deze uit. Het livevoorbeeld rendert je component in de app, zodat je op de knop kunt klikken, tekst in het veld kunt typen en kunt zien wat de code doet.
Controleer het en bouw erop voort
Quizzen, programmeermissies en begeleide projecten bevestigen dat je het idee hebt begrepen, en de AI-mentor legt een hook of fout uit die je niet kunt ontcijferen. Bug Hunt en UI Match laten je het concept nog een keer oefenen.
Wat erin zit
Wat je bij de app krijgt
88
Cursussen, 324 lessen
Van JSX, props en state via custom hooks, formulieren, Context en Redux Toolkit tot Server Components, SSR en de Next.js App Router, ingedeeld van A1 tot C1.
Live
Editor met livevoorbeeld
Een code-editor voor JSX waarin de component in de app wordt gerenderd. Met projecten met meerdere bestanden kun je de ene component in een andere importeren, zoals echte apps worden gebouwd.
20
Begeleide projecten
Bouw stap voor stap een like-knop, profielkaarten, een fooi-calculator, een quizgame, een winkelwagen en meer. Elke stap controleert of de component echt werkt.
Lab
Hooks Lab en props-knoppen
Bekijk elke verandering van state en elke re-render terwijl die plaatsvindt, en wijzig een prop met een schuifregelaar om te zien hoe de component wordt bijgewerkt. Een renderprofiler en tijdlijn van de state maken deel uit van Pro.
30
Programmeermissies
Missies op eenvoudig, gemiddeld en moeilijk niveau over hooks, renderen, formulieren, context en performance, plus UI Match, Bug Hunt en Component Recall met gespreide herhaling.
AI
AI-mentor
Vraag om uitleg, laat de AI je code beoordelen en een oplossing voorstellen, of genereer een aangepaste les over elk onderwerp. De mentor en het certificaatexamen maken deel uit van Pro.
Achtergrond
Wat moet je nu echt begrijpen om React te schrijven, en in welke volgorde?
React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces uit kleine, herbruikbare componenten die zichzelf opnieuw tekenen wanneer hun gegevens veranderen. De meeste beginners lopen niet vast op de syntaxis, maar op het onderliggende model: wat een render is, wat als state geldt en wanneer effects worden uitgevoerd. Die ideeën in de juiste volgorde leren, met iets op het scherm om elk idee te testen, gaat sneller dan alles tegelijk lezen.
Componenten en propsde basis voor hergebruik
Een component is een functie die een deel van de interface retourneert, en props zijn de invoer die de component van zijn parent ontvangt. Omdat gegevens via props naar beneden stromen, kun je een component lezen en voorspellen wat deze zal tekenen.
Statewat in de loop van de tijd verandert
State is gegevens die een component tussen renders onthoudt, zoals de tekst in een veld of de vraag of een menu geopend is. Het bijwerken van state plant een nieuwe render in. Dat is het mechanisme achter vrijwel elk interactief scherm.
Hooks en effectswaar beginners vastlopen
Hooks zoals useState, useRef en useReducer zorgen ervoor dat een component state kan bevatten en toegang tot de DOM kan krijgen. useEffect voert code uit na een render, en een onjuiste dependency array is de meest voorkomende oorzaak van loops en verouderde waarden.
Renderen en opnieuw renderenwaarom de app traag aanvoelt
Een component wordt opnieuw gerenderd wanneer zijn state of props veranderen, en dat geldt ook voor de componenten erin. Weten waardoor een render is geactiveerd, is het uitgangspunt voor elke performanceverbetering, van memoïsatie tot code splitting.
Past bij jou
Voor wie het is — en voor wie niet
Past goed bij je als je
- Je kent een beetje HTML, CSS of JavaScript en wilt goed beginnen met React
- Je bent developer met ervaring in een ander framework en moet snel overstappen op React
- Je leert het best wanneer het resultaat meteen op het scherm verschijnt zodra de code wordt uitgevoerd
- Je bouwt aan een portfolio met kleine projecten en wilt stapsgewijze begeleiding
- Je bereidt je voor op een front-endinterview en wilt vragen oefenen
Niet het juiste hulpmiddel als je
- Je hebt JavaScript nog nooit gezien, omdat de cursus uitgaat van enige voorkennis
- Je wilt een volledig project bouwen en deployen, waarvoor je nog steeds een laptop nodig hebt
- Je verwacht dat alles gratis is, terwijl alleen de eerste cursus gratis is en Pro de rest ontgrendelt
- Je wilt een officiële cursus van het React-team, terwijl dit een onafhankelijke app is
Vragen
Veelgestelde vragen
Kun je React programmeren op een telefoon leren?
De basisideeën, components, props, state en hooks kun je op een telefoon leren als je kunt uitvoeren wat je schrijft. Leer & oefen React bundelt ReactDOM en Babel, zodat je JSX in een livevoorbeeld op het apparaat wordt gerenderd. Een laptop wordt handig zodra je een groter project bouwt en deployt.
Moet ik JavaScript kennen voordat ik React leer?
Een beetje helpt. Leer & oefen React is bedoeld voor mensen die enige HTML, CSS of JavaScript kennen, zoals variabelen, functies en arrays. Als je nog nooit JavaScript hebt geschreven, leer dat dan eerst, want de React-lessen gaan ervan uit dat je het kunt lezen.
Wat is het verschil tussen props en state?
Props zijn invoer die een component van zijn parent ontvangt en niet hoort te veranderen, terwijl state data is die de component beheert en in de loop van de tijd bijwerkt. In Leer & oefen React zie je dit in het Hooks Lab, dat elke statewijziging en re-render toont, en met de props-knoppen kun je een prop met een slider aanpassen.
Leert de app hooks zoals useEffect?
Ja. Leer & oefen React behandelt useState, useEffect, useRef, useReducer, custom hooks en useLayoutEffect. Afzonderlijke lessen gaan dieper in op wanneer effects worden uitgevoerd, dependency arrays en veelgemaakte fouten, met een Bug Hunt-modus om bugs in defecte components te vinden.
Is React hetzelfde als React Native, en leert de app beide?
Nee. React is de library voor het bouwen van user interfaces, en React Native gebruikt dezelfde ideeën om mobiele apps te bouwen. Leer & oefen React leert eerst React voor het web, en een cursus React Native fundamentals helpt webdevelopers om die vaardigheden toe te passen op mobiel.
Behandelt Leer & oefen React Next.js en React 19?
Ja. De cursussen behandelen functies van React 19 en Server Components, SSR en hydration, streaming en de Next.js App Router met data fetching, caching en authenticatie. Er is ook een cursus React Native fundamentals voor webdevelopers.
Wat voor projecten kan ik bouwen?
Er zijn 20 begeleide projecten, die stap voor stap worden opgebouwd: een like-knop, profielkaarten, een fooi-calculator, een quizgame, een stopwatch, een registratieformulier, een winkelmandje, een afbeeldingscarrousel, een gepagineerde lijst en een todo-app. Bij elke stap wordt gecontroleerd of je component werkt voordat je verdergaat.
Is Leer & oefen React gratis?
De app is gratis te downloaden. De gratis versie bevat de eerste cursus, één begeleid project, twee coding missions, de code-editor met livevoorbeeld, Hooks Lab, props-knoppen, Bug Hunt en drie UI Match-controles per dag, en toont advertenties. Pro ontgrendelt alle cursussen, projecten en missions, de AI-mentor, de render profiler en het certificaatexamen, en verwijdert advertenties.
Is er een certificaat of voorbereiding op sollicitatiegesprekken?
Als je slaagt voor het eindexamen, krijg je een deelbaar certificaat, dat onderdeel is van Pro. Voor sollicitatiegesprekken zijn er 50 interviewvragen, een quiz met 50 vragen en een cheat sheet om de basisconcepten te oefenen.
Draait de code op een server?
Nee. De runtime is in de app gebundeld, waardoor je code op het apparaat wordt gecompileerd en gerenderd. Daarom kun je op de knop tikken die je hebt gebouwd en in het voorbeeld zien hoe de UI reageert.
Welke talen en platforms worden ondersteund?
Leer & oefen React werkt op iOS en Android en is beschikbaar in 22 talen. De app heeft een leeftijdsclassificatie van 4+ en vereist iOS 15.1 of hoger op iPhone.
Aan de slag
Render vandaag nog je eerste component
Gratis om te beginnen op iOS en Android, in 22 talen.
Meer van CoddyKit
Beschikbaar op iOS en Android.