I dagens uppgift ska vi öva på global state med Redux och hooks-for-redux.
- Öppna en terminal och gå med
cd
där du vill skapa projektet. - Skriv
npm create vite@latest quizz-redux -- --template react
. - Gå in i projektet:
cd quizz-redux
. - Installera dependencies:
npm install
. - Installera hooks-for-redux (H4R):
npm install hooks-for-redux
. - Installera react-router-dom:
npm install react-router-dom
-
Använd react router för att skapa 2 sidor: Admin och Quizz.
-
På Admin-sidan ska man kunna skapa nya frågor, ta bort frågor och uppdatera frågor.
-
På Quizz-sidan ska man kunna starta ett quizz och sen få ett resultat.
-
Frågorna ska vara flervalsfrågor så att man bara behöver klicka på ett alternativ.
-
Tänk efter vilken data som behövs för frågor med tillhörande svarsalternativ och hur man kan hålla reda på antal rätt i ett quizz.
-
Tänk efter vilka funktioner i redux som behövs för att förändra datat.
- Skapa ett repo på github.
- Ladd up dina filer till github:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <Adressen till ditt repo>
git push -u origin main
- Klicka på uppgiften i canvas och ange länken till ditt repo.
Efter denna uppgift ska ni kunna använda global state med Redux.
Klar? Här är lite mer att göra:
-
Lägg till localStorage för att spara och ladda frågor.
-
Lägg till spelare. Håll reda på vilken spelare som gör quizzet och skapa en sida med en toplista över bästa resultat.