Props og komposisjon
Send props, angi standardverdier via destructuring, sammenlign komposisjon med arv, bruk children-/slots-mønstre, og lag enkle presentasjonskomponenter.
Props og komposisjon er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 3 leksjoner.
Oversikt
Mål: Send data med props, angi standardverdier og bygg brukergrensesnitt ved å komponere små komponenter.
- Props fører data inn i komponenter.
- Standardverdier kan angis med enkel destrukturering.
- Komposisjon og children-slots.
Sende props
Props er skrivebeskyttede inndata. En forelder renderer et barn og oppgir verdier; barnet leser dem fra parameterne sine.
- Ikke muter props.
- Ny rendering skjer når foreldre endrer tilstand eller props.
Standardverdier for props (enkelt)
Gi props standardverdier ved å bruke destrukturering i parameterlisten: function Card({ title = "Untitled" }).
- Gjør komponentene robuste.
- Unngår kontroller av undefined i markeringen.
Komposisjon, ikke arv
Komposisjon betyr å bygge større brukergrensesnitt av mindre deler (children/slots). Foretrekk dette fremfor arv for større fleksibilitet og tydelig dataflyt.
Demo: props + children
Eksempel: Send props, angi standardverdier og komponer children i et enkelt kortoppsett.
<div id="root"></div>
Gjenbrukbar presentasjon
Presentasjonskomponenter fokuserer på layout og visuelt uttrykk. Hold dem prop-styrte og tilstandsløse når det er mulig, slik at de blir enkle å gjenbruke.
- Lite API (bare props).
- Bruk klasser til styling, og unngå skjulte bivirkninger.
Komposisjon kontra arv
Oppsummering
Oppsummering: Send data med props, angi trygge standardverdier og komponer children for å bygge fleksible, gjenbrukbare brukergrensesnitt. Unngå hierarkier basert på arv.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Props og komposisjon» gratis?
Ja – hele teksten i «Props og komposisjon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Props og komposisjon»?
Send props, angi standardverdier via destructuring, sammenlign komposisjon med arv, bruk children-/slots-mønstre, og lag enkle presentasjonskomponenter. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Props og komposisjon»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Sending av props og komposisjonsmønstre
- Props og komposisjon
- Gjenbrukbare presentasjonskomponenter