Leer & oefen React

Leer React door het zelf te schrijven. Deze React JS-tutorial brengt je van je eerste regel JSX naar hooks, statebeheer en complete apps, en elke component die je schrijft wordt direct op je telefoon weergegeven in een live voorbeeld.

88 cursussen en 324 interactieve lessen, van niveau A1 tot C1. Lees een kort concept, typ echte code, tik op Uitvoeren en bekijk het resultaat. Geen laptop en geen installatie nodig.

CODE SCHRIJVEN OP JE TELEFOON

• Een code-editor voor JSX, met een live voorbeeld dat je component in de app weergeeft

• De runtime (ReactDOM en Babel) is ingebouwd in de app, zodat je code op het apparaat draait en niet op een server

• Projecten met meerdere bestanden: importeer de ene component in een andere, zoals echte apps worden gebouwd

• Tik op je weergegeven knop, typ in je formulier en kijk hoe de UI reageert

HET LAB

• Hooks Lab: zie elke statuswijziging en elke nieuwe render terwijl het gebeurt

• Props-knoppen: wijzig een prop met een schuifregelaar en kijk hoe de component wordt bijgewerkt

• Renderprofiler en statustijdlijn (Pro): ontdek welke component opnieuw werd gerenderd en waarom, en blader daarna terug door je status

STAP VOOR STAP, VAN BEGINNER TOT GEVORDERD

• Basis: JSX, componenten, props, state, events, lijsten en keys, conditionele rendering

• Hooks: useState, useEffect, useRef, useReducer, aangepaste hooks, useLayoutEffect en meer

• Formulieren en validatie, React Hook Form, gecontroleerde en ongecontroleerde invoervelden

• Statebeheer: Context, Redux Toolkit en RTK Query, Zustand en Jotai

• React Router, gegevens ophalen, TanStack Query, SWR en optimistische UI

• TypeScript, testen, Storybook, toegankelijkheid en beveiliging

• Prestaties: memoization, code splitting, Suspense, transities, gevirtualiseerde lijsten

• React 19 en Server Components, SSR en hydratatie, streaming

• Next.js App Router, gegevens ophalen en authenticatie

• De basis van React Native voor webontwikkelaars

• Implementatie, micro-frontends en module federation

BOUW ECHTE PROJECTEN

20 begeleide projecten, stap voor stap: een like-knop, profielkaarten, een fooiencalculator, een quizspel, een stopwatch, een registratieformulier, een winkelwagen, een afbeeldingscarrousel, een lijst met paginering, een todo-app en meer. Elke stap controleert of je component echt werkt voordat je verdergaat.

OEFEN TOT HET BLIJFT HANGEN

• 30 programmeermissies (makkelijk, gemiddeld en moeilijk) over hooks, rendering, formulieren, context en prestaties

• UI Match: bouw een doelcomponent opnieuw en krijg een score voor structuur, stijl en tekst

• Bug Hunt: vind en verhelp de bug in een defecte component

• Component Recall: typ het ontbrekende onderdeel terug in code die al werkte, met gespreide herhaling

• Quizzen met 50 vragen, 50 interviewvragen en een spiekbriefje

• Dagelijkse uitdaging, reeksen, XP en een klassement

AI-MENTOR (PRO)

Vastgelopen op een hook of fout? Vraag de AI-mentor om een duidelijke uitleg, laat AI je code beoordelen en een oplossing voorstellen, of genereer een aangepaste les over elk onderwerp.

CERTIFICAAT (PRO)

Leg het eindexamen af en verdien een certificaat dat je kunt delen.

GRATIS EN PRO

Gratis: de eerste cursus, één begeleid project, 2 programmeermissies, de code-editor met live voorbeeld, Hooks Lab, props-knoppen, Bug Hunt en 3 UI Match-controles per dag. De gratis versie toont advertenties.

Pro: alle 88 cursussen, alle projecten en missies, de AI-mentor, de renderprofiler en statustijdlijn, het certificaatexamen en geen advertenties.

De app is beschikbaar in 22 talen.

React is een handelsmerk van Meta Platforms, Inc. Next.js is een handelsmerk van Vercel, Inc. Dit is een onafhankelijke leerapp, die niet verbonden is aan of wordt aanbevolen door Meta of Vercel.

Privacybeleid: https://www.coddykit.com/terms/privacy-policy