# React 2 (React To-Do Master - concept 13/1)

**ChatGPT:**  Hier is een ander leuk projectidee dat geschikt is voor beginnende studenten om Vite + React te leren:

---

### **Projectnaam: "React To-Do Master"**

**Beschrijving:** Studenten maken een eenvoudige maar functionele to-do lijstapplicatie waarin gebruikers taken kunnen toevoegen, bewerken, verwijderen en als voltooid kunnen markeren. Dit project introduceert de basisprincipes van React en laat studenten werken met state, props en eenvoudige interacties.

---

**Functionaliteiten:**

1. **Taken toevoegen:**
    
    
    - Gebruikers kunnen een nieuwe taak toevoegen via een invoerveld.
    - Elke taak heeft een titel en een optionele beschrijving.
2. **Taken weergeven:**
    
    
    - Een lijst van taken wordt weergegeven.
    - Taken die voltooid zijn, worden visueel anders getoond (bijvoorbeeld door een streep of grijze kleur).
3. **Taken beheren:**
    
    
    - Gebruikers kunnen een taak als voltooid markeren.
    - Gebruikers kunnen taken verwijderen.
    - Optioneel: gebruikers kunnen de taaknaam en beschrijving bewerken.
4. **LocalStorage-integratie:**
    
    
    - De takenlijst wordt opgeslagen in `localStorage`, zodat taken blijven bestaan na een herstart van de applicatie.
5. **Responsief design:**
    
    
    - De app werkt zowel op desktop als mobiel.

---

**Extra Opties voor Gevorderde Studenten:**

- **Categorisatie:** Voeg categorieën toe (bijvoorbeeld "School", "Persoonlijk", "Werk").
- **Filteren:** Voeg filters toe om alleen voltooide, onvoltooide of alle taken te zien.
- **Deadline-functionaliteit:** Voeg een deadline-optie toe en markeer taken die bijna verlopen.
- **Drag-and-Drop:** Laat gebruikers taken herschikken.

---

### **Benodigde tools en kennis:**

1. **Tools:**
    
    
    - [Vite](https://vitejs.dev/): Voor het opzetten van het project.
    - React: Voor het bouwen van componenten.
    - CSS of een framework zoals Tailwind voor styling.
2. **Kennis:**
    
    
    - Basis JavaScript (ES6+) en React-beginselen (`useState`, props).
    - HTML/CSS voor eenvoudige opmaak.

---

### **Projectopbouw:**

1. **Les 1:** Introductie en opzet
    
    
    - Installeer Vite en maak een nieuw project.
    - Begrijp de folderstructuur en bouw een "Hello World" component.
    - Maak een basisonderdeel voor de to-do lijst (bijvoorbeeld een leeg invoerveld en een knop).
2. **Les 2:** Taken toevoegen en weergeven
    
    
    - Gebruik `useState` om een takenlijst in de state op te slaan.
    - Bouw een eenvoudige lijstweergave waarin ingevoerde taken worden getoond.
3. **Les 3:** Taken beheren
    
    
    - Voeg functionaliteit toe om taken te verwijderen en als voltooid te markeren.
    - Gebruik conditionele rendering om voltooide taken visueel anders weer te geven.
4. **Les 4:** Styling en afronding
    
    
    - Voeg eenvoudige CSS-styling toe om de app aantrekkelijk te maken.
    - Integreer `localStorage` zodat taken behouden blijven na een herstart.

---

**Waarom dit project?**

- Het project is eenvoudig en overzichtelijk.
- Studenten leren direct werken met state en props, twee fundamentele concepten in React.
- Het kan stapsgewijs worden uitgebreid voor gevorderde functionaliteiten.
- Het resultaat is praktisch en bevredigend om te gebruiken.

Laat me weten of je hulp nodig hebt met het uitschrijven van een lesplan of codevoorbeelden! 😊