Denken in Code

1. Wat moet je maken?

Voordat je begint met programmeren, moet je eerst begrijpen wat de opdracht van je vraagt.

Stel jezelf drie vragen:

Wat moet de gebruiker zien?
Wat moet de gebruiker kunnen doen?
Wat verandert er wanneer de gebruiker iets doet?

Tip: Begin altijd met woorden, niet met code.

2. Knip het probleem in stukjes → Componenten

Een component is een herbruikbaar blokje UI. Elk component heeft één taak.

Gebruik een component als je iets vaker nodig hebt
Gebruik een component als iets visueel bij elkaar hoort
Splits grote componenten op

// Slecht: 1 gigantisch component
const Page = () => {
  // 300 regels code...
};

// Beter: losse componenten
const Header = () => <h1>Titel</h1>;
const Card = () => <section>Kaartje</section>;

const Page = () => (
  <>
    <Header />
    <Card />
  </>
);

3. Wat verandert? → Dat is State

State gebruik je alleen voor dingen die verdwijnen, verschijnen, wijzigen of reageren op acties.

Zichtbaarheid (modal open/dicht)
Input waardes
Een lijst die groeit/krimpt
Iets dat verandert door een klik

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <section>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </section>
  );
};

Let op: Als iets niet verandert → dan hoort het geen state te zijn.

4. Teken of beschrijf de Flow

De flow is: actie → state → render

Voorbeeld (modal):

Gebruiker klikt op knop
setOpen(true)
Component rendert opnieuw
Modal wordt zichtbaar

Tip: Als je flow niet duidelijk is, wordt je code dat ook niet.

5. Schrijf eerst Pseudo-code → daarna pas echte code

// Pseudo-code
- Start met een teller op 0
- Bij klikken: teller + 1
- Toon teller

→ React code:

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
};

De 3-check:

Heeft elk component één taak?
Zit de state op de juiste plek?
Verandert er iets? → dan gebruik je state

Voorbeeld: Hoe pak je een opdracht aan?

Opdracht:

"Maak een lijst waar de gebruiker taken kan toevoegen. Elke taak moet zichtbaar worden in een lijst."

Stap 1 – Wat moet de gebruiker zien?

Een input
Een button
Een lijst van taken

Stap 2 – Wat moet de gebruiker kunnen doen?

Tekst typen
Op 'Toevoegen' klikken

Stap 3 – Wat verandert?

De ingevoerde tekst (state)
De lijst met taken (state)

Stap 4 – Flow uitschrijven

Gebruiker typt → inputValue wordt geüpdatet
Gebruiker klikt op toevoegen
tasks krijgt een nieuwe taak erbij
Lijst rendert opnieuw

Stap 5 – Pseudo-code

- Maak state: inputValue = ""
- Maak state: tasks = []
- Bij veranderen input → update inputValue
- Bij klikken → voeg inputValue toe aan tasks
- Toon tasks in een lijst
- Leeg inputValue

Stap 6 – Structuur van componenten

TaskInput component (input + button)
TaskList component (lijst tonen)
App component → bevat de state

Finale Code

import { useState } from 'react';

const TodoApp = () => {
  const [input, setInput] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (input.trim()) {
      setTasks([...tasks, input]);
      setInput('');
    }
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Nieuwe taak"
      />
      <button onClick={addTask}>Toevoegen</button>
      
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
};