React (Webudvikling) Produkter

React Landkort: https://drive.google.com/file/d/1d3oXzqYdiUZv5LARQJQqvj3yRengw-xW/view?usp=drive_link

• Opdateres løbende med begreber og kode stumper

Ser indtil videre sådan her ud: 29-03

Card Component

• Returnere et genanvendlige kort

• Kan kaldes fra App, som samler alle components

• Derudover kan man style det fra index.css

Fulgt tutorial fra 6.6 i litteraturliste og tilføjet css styling:

• Gør brug af onChange event handler, og useState funktioner fra react.

• Ligger i github "OrderingReact"

  
  

  

Color Picker lavet i React, ligger i samme sted som den ovenover "OrderingReact"

To-Do-List page, bruger css html til at style og javascript til behandle array'et og flytte elementerne til forskellige index Up/Down og fjerne dem helt.

• Kode ligger i git

React solo quiz Projekt:

Quizcomponents loades udfra, hvor mange quiz objekter der findes i en js fil.

bruger .map, til at iterere over alle objekter i quizss - for hvert objekt, genere den et quizcards comopnent. Den sender hver quiz-spørgsmål's data (som id, question, answer osv.) til Quizcard-komponenten som props ved hjælp af ...item. Til sidst, sender den også updatescore funktionen, så den kan updatere den samlede score fra quizcard componenet.

Derudover er der tilføjet en del css, bland andet dette for at lave en baggrund med flere farver:

radial-gradient, gør det muligt at lave fler farvede baggrunde og definere hvordan de skal se ud.

Det færdige resultat:

Jeg har udarbejdet en "bistans" form for op.gg, hvor det er muligt at lave http request til at indhente sommunoer data fra riotgames api.

Jeg har inddelt min side i 2 components, henholdvis søge delen og en account gemme del.

Søgedelen:

Her gør jeg brug af 2 api kald, det første til at hente en række informationer baseret på et puuid, og region. Derefter kan man hente, rank infomrationer hvor man f.eks. kan se wins/losses

For at få bruger data til søgninger har jeg lavet costum html element, som bruges som input:

Dette kan kaldes som html input, og bruges til at lave input felter

Her bruges de, og der skal vælges de nødvendige data til at lave api kaldende.

Efter det, loades der html hvis data fra api kaldet findes.

Her et eskempel på en successøgning.

Jeg har lavet et login/register projekt hvor firebase er backend host.

Først er database sat op i med data, som man får leveret af firebase's hjemmeside.

I denne jsx, bliver en bruger oprettet og det gøres via bruger inputs til en indbygget metode fra firebase.

Her indtastes bruger input, og bliver behandlet af en form med en submit knap.

Login er samme princip, som signup her bruges en login metode fra firebase istedet

Den har lignede html, for at behandle bruger input til login

Her kan man se et succesful signup, det bliver logget i consolen.

Her et succesful login forsøg, med det nyoprettede bruger email og password.

I min firebase backend, kan man nu se en bruger som er oprettet med tilsvarende mail.

For at være sikker på jeg opfylder læringsmålene omkring de forskellige begreber jeg nævner herunder, useState, useEffekt, good practices, debugging, props, useNavigate, Conditional Rendering, API, og authentication har jeg lavet et cheatsheet, som forklarer begrebet og kommer med et eksempel.

• Skal lige finde ud hvordan det uploades bedst.