# REACT | Basis # Les 1 - Introductie React 🎯 Leerdoelen - Je weet wat React is. - Je kunt Node.js installeren. - Je kunt een React-project starten. - Je begrijpt de projectstructuur. 💡 Uitleg - Front-end versus Back-end - Waarom React? - npm - package.json - src - public - App.jsx 🛠️ Opdracht Maak een nieuwe React-app. Pas App.jsx aan zodat deze laat zien: ``` Welkom bij mijn eerste React applicatie! Naam: Studentnummer: Klas: ```

🧠 Reflectie - Waarom gebruiken we React? - Welke map bevat jouw code? 📤 Inleveren Screenshot van draaiende applicatie. --- # Les 2 - JSX en Componenten 🎯 Leerdoelen - JSX begrijpen - Eerste component maken - Props gebruiken 💡 Uitleg - JSX - className - Componenten - Props 🛠️ Opdracht Maak: ``` Header.jsx Footer.jsx GameCard.jsx ```

Gebruik vervolgens: ``` ```

🧠 Reflectie Wat is het voordeel van componenten? 📤 Inleveren Screenshot + code. --- # Les 3 - useState 🎯 Leerdoelen - useState gebruiken - State wijzigen - Events afhandelen 💡 Uitleg - useState - onClick - Rendering 🛠️ Opdracht Maak: ✔ Teller ``` Aantal games: 0 [ + ] [ - ] ```

Daarna: Favoriet aan/uit ❤️ 🤍 🧠 Reflectie Waarom gebruiken we state? --- # Les 4 - Lijsten met map() 🎯 Leerdoelen - Arrays tonen - map() - key 💡 Uitleg Array → ``` [ { title:"Minecraft" } ] ```

→ GameCards 🛠️ Opdracht Toon vijf games. Extra: voeg afbeelding toe. --- # Les 5 - Formulieren 🎯 Leerdoelen - Input - onChange - Zoeken 🛠️ Opdracht Maak een zoekveld. ``` Zoeken: Minecraft ```

Alleen passende games blijven zichtbaar. --- # Les 6 - JSON laden 🎯 Leerdoelen - JSON begrijpen - fetch() - useEffect() 💡 Uitleg ``` games.json ```

in ``` public/ ```

Inladen met ``` fetch() ```

🛠️ Opdracht Laad: ``` games.json ```

Toon alle games. --- # Les 7 - Details tonen 🎯 Leerdoelen - State combineren - Eén geselecteerde game tonen 🛠️ Opdracht Klik op een game. Rechts verschijnt ``` Naam Platform Genre Beschrijving ```

--- # Les 8 - Favorieten 🎯 Leerdoelen - Arrays aanpassen - State uitbreiden 🛠️ Opdracht Maak ⭐ Favoriet Filter: ``` Alle Favorieten ```

--- # Les 9 - AI Challenge 🎯 Leerdoelen AI gebruiken. 🛠️ Opdracht Laat ChatGPT een React-component maken. Bijvoorbeeld: ``` Rating sterren of Dark Mode of Sorteerfunctie ```

Verbeter de code zelf. Lever ook je prompt in. --- # Les 10 - Eindopdracht Maak jouw eigen Game Collection. Verplicht: ✅ Header ✅ Footer ✅ Componenten ✅ JSON ✅ useState ✅ useEffect ✅ Zoekfunctie ✅ Favorieten Keuze: ⭐ Dark Mode ⭐ Eigen styling ⭐ React Icons ⭐ Categorieën ⭐ Eigen JSON --- # Bonuslessen ## Les 11 React Router ``` / Games /game/3 ```

--- ## Les 12 Externe API Bijvoorbeeld: ``` https://dummyjson.com/products ```

of ``` RAWG Game API ```

Studenten leren echte API's gebruiken. --- # AI-opdracht in iedere les Net als bij SQL. Bijvoorbeeld: 🤖 AI-opdracht Vraag ChatGPT: > Leg uit wat useState doet alsof je het uitlegt aan een eerstejaars mbo-student. Controleer daarna zelf of de uitleg klopt.