React Cheat Sheet

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.

Basics

5 onderwerpen

Project Setup

Maak een nieuw React-project aan met Vite.

Denken in Code

Zet elke opdracht om naar duidelijke React-code in 6 stappen.

Components

Bouw herbruikbare UI-componenten — de bouwstenen van React.

Props

Geef data door tussen componenten en maak ze flexibel.

Lists & Keys

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

Hooks & State

3 onderwerpen

State (useState)

Onthoud en update waardes — de basis van interactieve apps.

State Lifting

Til state op naar de gezamenlijke ouder om data tussen componenten te delen.

useEffect

Side effects: API-calls, timers en meer.

Routing

2 onderwerpen

React Router

Navigatie tussen pagina's met Router, Link en Outlet.

useNavigate & useParams

Programmatisch navigeren en URL-parameters gebruiken.

Interaction

3 onderwerpen

Events

Reageer op clicks, inputs en andere user-interacties.

Conditional Rendering

Toon verschillende content op basis van condities en state.

Forms & Input

Werk met formulieren, inputs en controlled components.

Data & API's

3 onderwerpen

Data Fetching

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

Loading & Error States

Geef feedback aan gebruikers tijdens laden en bij fouten.

localStorage

Bewaar data in de browser tussen sessies.

Authentication

4 onderwerpen

Context API

Deel state door je hele app zonder props drilling.

AuthContext Setup

Maak een AuthContext voor globale login state met localStorage.

Login & Register

Bouw login- en registratieformulieren met validatie.

Protected Routes

Beveilig routes zodat alleen ingelogde users toegang hebben.

Styling

2 onderwerpen

Styling

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

Tailwind CSS

Utility-first CSS framework installeren en gebruiken in React.

Deploy

1 onderwerp

Website Publiceren

Zet je React-portfolio online met GitHub Pages.

Opdrachten

1 onderwerp

React Opdrachten

Werk per niveau aan opdrachten gekoppeld aan de theoriepagina's.

Leerpad

Aanbevolen volgorde

1 Start Setup Denken in Code Components Props State
2 Daarna Lists & Keys State Lifting useEffect Router Events Forms
3 Advanced Fetching Loading/Error localStorage Context API AuthContext Login/Register Protected Routes Tailwind Publiceren