Getting Started

Welkom bij de React Cheat Sheet! Leer hoe je moderne web applicaties bouwt met React.

Wat is React?

React helpt je om websites te bouwen. Je maakt losse stukjes (components) die je kunt hergebruiken. Denk aan LEGO blokjes die samen een grote website vormen!

Hoe te gebruiken

  • Nieuw? Start bij Basics
  • Zoek iets? Gebruik de sidebar links
  • Alle code kun je copy-pasten

Opdrachten

Wil je niet alleen lezen maar ook oefenen? Gebruik de opdrachtenpagina met opbouw van beginner tot mini-projecten.

Oefenen

React Opdrachten

Werk per niveau aan opdrachten die direct gekoppeld zijn aan de theoriepagina's.

Basics

Begin hier met de fundamenten van React.

Basis

Project Setup

Leer hoe je een nieuw React project aanmaakt met Vite.

 Basis

Denken in Code

Leer hoe je elke opdracht omzet naar duidelijke React code met 6 stappen.

 Basis

Components

Bouw herbruikbare UI componenten. De bouwstenen van React!

 Basis

Props

Geef data door tussen componenten. Maak je componenten flexibel!

 Basis

Lists & Keys

Render arrays van data met .map() en gebruik keys correct.

Hooks & State

Leer werken met state en lifecycle in React.

State

State (useState)

Onthoud en update waardes in je component. De basis van interactieve apps!

 State

useEffect

Gebruik side effects: API calls, timers, en meer!

Routing

Navigatie tussen paginas met React Router.

Basis

React Router

Navigatie tussen paginas met Router, Link en Outlet.

 Basis

useNavigate & useParams

Programmatisch navigeren en URL parameters gebruiken.

Interaction

Reageer op user interacties en werk met formulieren.

Advanced

Events

Reageer op user interacties zoals clicks, inputs en meer!

 Advanced

Conditional Rendering

Toon verschillende content gebaseerd op condities en state.

 Advanced

Forms & Input

Werk met formulieren, inputs en controlled components.

Data & API's

Haal data op van API's en sla lokaal op.

Data

Data Fetching

Haal data op van API's met fetch en async/await.

 Data

Loading & Error States

Geef feedback aan gebruikers tijdens het laden en bij fouten.

 Data

localStorage

Sla data op in de browser om te bewaren tussen sessies.

Authentication

Bouw een complete login/register systeem met Context API en localStorage.

Advanced

Context API

Deel state door je hele app zonder props drilling.

 Advanced

AuthContext Setup

Maak een AuthContext voor globale login state met localStorage.

 Advanced

Login & Register

Bouw login en registratie formulieren met validation.

 Advanced

Protected Routes

Beveilig routes zodat alleen ingelogde users toegang hebben.

Styling

Style je React componenten met CSS en frameworks.

Basis

Styling

CSS in React: className, inline styles en CSS bestanden.

 Advanced

Tailwind CSS

Utility-first CSS framework installeren en gebruiken in React.

Deploy

Zet je React app online.

Deploy

Website Publiceren

Zet je React portfolio online met GitHub Pages.

Leerpad

Nieuw? Volg deze volgorde:

Start hier

  1. Project Setup - Maak je eerste React app
  2. Denken in Code - Leer React denken
  3. Components - Bouw herbruikbare componenten
  4. Props - Geef data door
  5. State - Maak interactieve apps

Daarna

  1. Lists & Keys - Render arrays
  2. useEffect - Side effects
  3. React Router - Navigatie
  4. Events - User interacties
  5. Forms - Formulieren

Advanced

  1. Data Fetching - API calls
  2. Loading & Error - UX feedback
  3. localStorage - Data opslaan
  4. Context API - Global state
  5. AuthContext - Login systeem
  6. Login & Register - Auth formulieren
  7. Protected Routes - Route beveiliging
  8. Tailwind CSS - Modern styling
  9. Website Publiceren - Online zetten

Tips

Console.log alles

Debug met console.log

React DevTools

Installeer de browser extensie

Klein beginnen

Baby steps werken beter

Lees errors

Stack traces helpen debug