Tænk på en quiz med et spørgsmål, svarmuligheder og feedback. De dele kan beskrives som komponenter, mens den valgte besvarelse bestemmer, hvilken tilstand brugerfladen viser.
Komponenter deler brugerfladen op i forståelige dele
En React-komponent kan være en lille knap eller en hel visning. I quizeksemplet kan spørgsmål, svarmulighed og resultat have hver sit ansvar. En god opdeling gør det tydeligt, hvilke oplysninger hver del skal bruge, og hvilke handlinger den kan sætte i gang.
Opdelingen bør følge et praktisk behov. Det er ikke nødvendigvis en forbedring at gøre hvert enkelt stykke tekst til sin egen komponent. Start med dele, som gentages, har selvstændig adfærd eller gør koden lettere at forstå. Navngiv dem efter deres rolle frem for deres midlertidige farve eller placering.
Props leverer oplysninger til komponenten
Props er de oplysninger, en komponent modtager udefra. En svarmulighed kan eksempelvis modtage teksten og en besked om, hvorvidt den er valgt. Den samme komponent kan dermed bruges til flere svar uden at få spørgsmålets konkrete formulering skrevet ind i sin egen kode.
Det hjælper ved ændringer. Hvis alle svar skal have en tydeligere valgt tilstand, kan den fælles komponent justeres. Indholdet i spørgsmålene kan fortsat være forskelligt. Genbrug fungerer bedst, når delene faktisk deler opgave og adfærd; ens udseende alene er ikke altid tilstrækkeligt.
State beskriver det, der kan ændre sig
State er komponentens hukommelse om værdier, som påvirker visningen. I quizzen kan det være den valgte svarmulighed og om besvarelsen er indsendt. En handling ændrer værdierne, hvorefter React opdaterer den relevante visning. Det gør sammenhængen mellem tilstand og skærmbillede tydelig.
Beskriv tilstandene, før du finpudser dem: ubesvaret, valgt, indsendt, korrekt og forkert. Hvad sker der, hvis brugeren trykker to gange eller går videre? Sådanne spørgsmål er stadig design- og udviklingsarbejde. Biblioteket træffer ikke automatisk de rigtige produktbeslutninger for dig.
React erstatter ikke websidens andre ansvar
Der er stadig brug for meningsfuld HTML, passende CSS og forståelig tekst. En klikbar boks bliver ikke en god tastaturbetjent knap, alene fordi den er skrevet i React. Tilsvarende skal du planlægge fokus, fejlbeskeder og feedback, så quizzen kan forstås og betjenes på forskellige måder.
En database, sikker adgang til personlige oplysninger og gemte resultater kræver yderligere dele af løsningen. Du kan bygge en lokal øvelse uden en backend, men en funktion, der gemmer resultater på en konto, har flere krav. Skeln mellem demonstreret brugerflade og et færdigt system med sikker databehandling.
Vælg React, når strukturen hjælper projektet
React kan være relevant, når mange dele af brugerfladen skal reagere på fælles data, eller når en eksisterende løsning allerede bruger det. Ved en lille informationsside kan enklere midler være tilstrækkelige. Vurder også, hvem der skal rette fejl og vedligeholde afhængigheder efter lancering.
Vil du lære det, så byg én lille interaktion efter at have øvet JavaScript. Forklar, hvilke værdier der er props, hvilke der er state, og hvorfor de ligger, hvor de gør. Udvid først derefter til flere skærme. Så får værktøjet en konkret funktion i din læring frem for at blive en samling nye begreber.
Tag med videre
Det vigtigste
at huske.
- React strukturerer brugerflader i komponenter med data og tilstand.
- HTML, CSS, tilgængelighed og systemansvar er stadig relevante.
- Vælg værktøjet efter interaktionerne og den fremtidige vedligeholdelse.
Lad os gøre det klart
Spørgsmål & svar
Er React et programmeringssprog?
Nej. React er et bibliotek, som bruges med JavaScript. Mange projekter bruger også TypeScript og JSX, men du arbejder stadig med webteknologiernes grundlag.
Er React et framework eller et bibliotek?
React beskriver sig som et bibliotek til brugerflader. Et komplet projekt bruger ofte flere værktøjer eller et framework omkring React til eksempelvis routing og datahåndtering.
Hvad er en React-komponent?
Det er en afgrænset del af brugerfladen med sin egen beskrivelse og eventuelt adfærd. Eksempler er en svarmulighed, et søgefelt eller en hel resultatvisning.
Hvad er forskellen på props og state?
Props kommer ind i komponenten udefra. State er værdier, som komponenten husker mellem opdateringer. Begge kan påvirke, hvad brugeren ser.
Skal jeg stadig lære HTML og CSS?
Ja. React løser ikke grundlæggende struktur, layout og tilgængelighed for dig. De færdige elementer i browseren skal stadig give mening og fungere.
Er en React-side automatisk hurtig?
Nej. Mængden af kode, billeder, dataarbejde og opdateringer har betydning. Mål den konkrete side, og undersøg de handlinger, brugeren skal kunne gennemføre.
Kan React bruges uden en backend?
Ja, eksempelvis til en lokal quiz eller beregner. Kræver produktet gemte konti, delte oplysninger eller beskyttede data, skal de behov løses særskilt.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
