React 2 Boter Kaas en Eieren (concept 19-1-25)
01 - React
React is een tool die je helpt om websites te bouwen die snel en interactief zijn. Stel je voor dat je een website maakt zoals Instagram of YouTube, waar je op knoppen kunt klikken, reacties kunt plaatsen, of video’s kunt bekijken zonder dat de hele pagina opnieuw geladen hoeft te worden. React zorgt ervoor dat dit soepel en makkelijk werkt.
In plaats van dat je alles steeds opnieuw bouwt, kun je met React kleine bouwstenen maken (we noemen die componenten). Bijvoorbeeld: een knop, een zoekbalk of een bericht. Je kunt die bouwstenen hergebruiken, net als LEGO-blokjes, om snel een complete website te maken.
React is dus als een gereedschap voor moderne webbouwers om gave, interactieve websites te maken!
Ga naar linkedin.com/learning React Essential Training en Bekijk hoofdstuk 1
Wat is React en hoe werkt React
Opdracht
Beantwoord de volgende vragen:
- Wat is React?
- Welke bedrijven gebruiken React, noem er 5?
- Vertel in eigen woorden hoe React werkt.
Inleveren:
- Noteer je vragen met antwoorden in de tekstvenster en
- lever een schreenshot van de Training waarbij vinkjes staan bij hoofdstuk 1.
02 - Versie beheer
Wat is versiebeheer met GitHub?
Stel je voor dat je aan een schoolproject werkt, bijvoorbeeld een presentatie of een website, en je wilt elke stap opslaan. Zo kun je altijd teruggaan naar een eerdere versie als iets fout gaat. Dat is wat versiebeheer doet: het bewaart alle veranderingen die je maakt.
GitHub is een soort online kluis voor je projecten. Je kunt er jouw werk opslaan, delen met anderen en samenwerken zonder dat je bestanden kwijtraakt of per ongeluk iets overschrijft. Het werkt samen met een programma genaamd Git, dat al je wijzigingen netjes bijhoudt.
Als je nog geen account hebt op GitHub maak dan een account op GitHub
Ga naar github.com en maak een gratis account aan. Installeer Git op je computer en koppel het aan VS code, zodat je kan werken met versiebeheer.
Opdracht
Zorg ervoor dat git en github werkt.
Inleveren:
- Lever één screenshot in dat je laat zien dat je github werkt.
03 - React vite
Stap voor stap gaan wij een Boter Kaas en Eieren (Tic-Tac-Toe) spel maken in React
Onderstaande handleiding is bedoeld voor studenten om eenvoudig een Boter Kaas en Eieren-spel te maken met React. We gebruiken Vite als bundler en ontwikkelserver omdat die lekker snel werkt.
Handleiding boter kaas en eieren:
Stap 0: Benodigdheden
- Node.js (12+ of hoger) Controleer met node -v en npm -v in de terminal of je Node en npm hebt.
- Basiskennis van React: kennis van componenten, props en state.
Stap 1: Nieuw React-project opzetten met Vite
npm create vite@latest tictactoe -- --template react
cd tictactoe
npm install
npm run dev