React,js

Deze training biedt een praktijkgerichte introductie tot React, het toonaangevende JavaScript-framework voor interactieve webinterfaces. Je leert werken met componenten, state en events, en maakt kennis met moderne features zoals hooks, de Context API en functionele componenten.

Tijdens hands-on opdrachten bouw je o.a. een todo-app, een filterbare productcatalogus en een eenvoudige social feed. Je leert hoe je externe API’s koppelt met fetch of Axios, routing toepast met React Router, en globale state beheert met Context of Redux Toolkit.

Onderwerpen die aan bod komen:

• JSX, props, events en componenthiërarchie
• useState, useEffect, useRef, useMemo en useCallback
• Context API en custom hooks
• Routing, authenticatie en lazy loading
• Tools zoals React DevTools, Webpack en Testing Library
• Introductie tot Redux Toolkit en alternatieven zoals Zustand

Deze training is geschikt voor developers met basiskennis van JavaScript die moderne frontendtoepassingen willen bouwen met React. Lesmateriaal is Engelstalig, de training Nederlandstalig.

• Frontend-developers die moderne frameworks willen leren.
• Full-stack ontwikkelaars die UI-logica willen scheiden van backend.
• JavaScript-ontwikkelaars die hun vaardigheden willen uitbreiden.
• UI/UX-designers die interactieve prototypes willen coderen.

Dag 1: Core Concepts & API Development

• Runtime fundamentals: Event loop en async programming
• Core modules: fs, http, path (hands-on met streams)
• NPM essentials: package.json scripts, dependency installs
• Express.js setup: Middleware chain en routing
• REST API basics: CRUD endpoints met JSON
• Database connectie: MongoDB + Mongoose basis
• Error handling: Custom middleware en logging
• Deployment prep: Docker basis en PM2 process manager

Programma

• Node REPL en debug technieken (--inspect)
• EventEmitter class en custom events
• Streams voor file processing
• Express middleware: body-parser, cors
• Route params: GET /users/:id
• Mongoose schema design (new Schema())
• Basis queries: find(), save()
• Error middleware met next(err)
• JWT authenticatie basis
• Dockerfile configuratie (FROM node:18-alpine)
• PM2 basics (pm2 start app.js)

Dag 2: React Basis en Componenten

• Omgeving opzetten: Node.js, npm, Create React App (npx create-react-app).
• JSX-syntax: combinatie van HTML en JavaScript, expressies ({variabele}).
• Functionele componenten: props, children, compositie.
• State management: useState, useEffect voor levenscyclusbeheer.
• Event handling: onClick, onChange, synthetic events.

Dag 3: Geavanceerde Features en Integratie

• Custom hooks: herbruikbare logica (bijv. useFetch voor API-calls).
• Context API: createContext, useContext voor globale state.
• Routing: React Router (BrowserRouter, Route, Link, dynamische routes).
• API-integratie: fetch of Axios, error handling, loading states.
• Introductie tot state management met Redux Toolkit (optioneel).
• 
  

Programma:

• Core Concepts:
• React-componenten: functioneel vs. class-based (kort).
• JSX: conditional rendering (&&, ternary operator), lists (map met key).
• Props: typechecking met PropTypes of TypeScript.
• State en Lifecycle:
• Hooks: useState, useEffect, useRef, useMemo, useCallback.
• Formulierbeheer: controlled vs. uncontrolled components.
• Geavanceerde Technieken:
• Context API: theming, gebruikerssessies.
• Error boundaries: componentDidCatch (class-based).
• Lazy loading: React.lazy(), Suspense.
• Routing en Data Fetching:
• React Router: nested routes, route guards.
• Data fetching: abort controllers, caching strategieën.
• Authentication: JWT-tokens, localStorage.
• Tools en Optimalisatie:
• DevTools: React Developer Tools extensie.
• Bundelen: Webpack-configuratie (basis), code-splitting.
• Testing: Jest en React Testing Library (render, fireEvent).
• State Management:
• Redux Toolkit: createSlice, configureStore, useSelector/useDispatch.
• Alternatieven: Zustand, Recoil (kort benoemd).

• Bereidt voor op Meta Front-End Developer Professional Certificate (Coursera).
• Relevant voor React Certified Developer (door derden, bijv. CertiProf).