Integratie externe functionaliteiten (60 lestijden)

In deel 4 maak je kennis met React, een krachtige JavaScript-bibliotheek waarmee je moderne, interactieve webapplicaties bouwt volgens het principe van Single Page Applications (SPA’s). Je leert hoe je een applicatie opdeelt in herbruikbare componenten, je state efficiënt beheert en je externe API’s integreert om dynamische gegevens op te halen. Daarnaast ontdek je hoe je navigatie tussen pagina’s aanpakt via client-side routing en hoe je je toepassing stijlvol vormgeeft met moderne stylingtechnieken. Je leert typische React-patronen toepassen om goed gestructureerde en onderhoudbare applicaties te bouwen.

Volgende onderwerpen staat op het programma:

Introductie tot React

• Wat is React en waarom is het zo populair?
• Verschil met klassieke HTML/CSS/JS of jQuery
• Virtual DOM & componentdenken
• Opzetten van een React-project met Vite of Create React App
• Mappenstructuur en basisbestanden

JSX en Componenten

• JSX-syntax (inclusief valkuilen)
• Functionele componenten
• Props doorgeven aan componenten
• Compositie: componenten in componenten

State en Events

• useState hook gebruiken
• Events afhandelen (onClick, onChange…)
• Data en status bijhouden binnen een component
• Condities en herhalingen in JSX (if, &&, .map())

Styling in React

• Inline styles, CSS modules of externe stylesheets
• Dynamische styling met className
• Responsief design in combinatie met frameworks (zoals Tailwind of Bootstrap)

Formulieren en gebruikersinput

• Controlled components
• Formdata beheren met useState
• Validatie (basis)
• Gebruik van onSubmit en voorkomen van page reload

useEffect en lifecycle

• useEffect gebruiken voor side effects (API-calls, timers…)
• Component lifecycle in functionele componenten
• Cleanup functions
• Verschil tussen dependency arrays

Werken met API’s

• Data ophalen met fetch of axios
• Laden, fouten en weergave beheren
• Lijsten renderen met .map()
• API-responses herstructureren voor weergave

Routing en meervoudige pagina’s

• React Router gebruiken
• Navigatie tussen pagina’s met <Link> en <Route>
• Params en dynamische routes
• 404-pagina toevoegen

Herbruikbare componenten & props drilling

• Componenten generiek maken
• Props vs state (en waar wat gebruiken)
• Prop drilling vs context
• Intro tot useContext

Structuur, debugging en best practices

• Componenten structureren in folders
• Debugging in React (React DevTools)
• Best practices: naamgeving, herbruikbaarheid, leesbaarheid

Hosting en deployment

• App builden voor productie (npm run build)
• Uploaden naar Vercel, Netlify of DigitalOcean
• Gebruik van eigen domein
• (Optioneel) Nginx configureren voor SPA-routing
• HTTPS en omgeving instellen met .env

---

Deze cursus wordt in 100% e-learning georganiseerd.

• Dit betekent dat de leerstof in afstandsonderwijs via Teams (2/3) en een elektronisch leerplatform (1/3) wordt aangeboden, begeleid en geëvalueerd.
• De onlinelessen worden telkens opgenomen zodat je ze kan herhalen of bekijken op een ander tijdstip in geval van belet door bv. ziekte of verplichtingen op je werk.
• Deze cursus worden georganiseerd per semester, van begin september tot eind januari (semester 1), of van februari tot eind juni (semester 2).

Voor vragen of meer info kan je mailen naar wim.verlinden@cvofocus.be

---

Deze module komt uit de opleiding “ICT Programmeren”.