Props och komposition
Skicka props, ange standardvärden via destructuring, jämför komposition med arv, använd mönster för children/slots och skapa enkla presentational components.
Props och komposition är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Översikt
Mål: Skicka data med props, ange standardvärden och bygg UI genom att komponera små komponenter.
- Props förmedlar data till komponenter.
- Standardvärden via enkel destrukturering.
- Komposition och children-slots.
Skicka props
Props är skrivskyddade indata. En förälder renderar ett barn och skickar med värden; barnet läser dem från sina parametrar.
- Ändra inte props.
- Rendering sker på nytt när föräldrar ändrar state eller props.
Standardvärden för props (enkelt)
Ange standardvärden för props genom destrukturering i parameterlistan: function Card({ title = "Untitled" }).
- Gör komponenterna robusta.
- Undviker kontroller av undefined i markupen.
Komposition, inte arv
Komposition innebär att bygga större UI:n av mindre delar (children eller slots). Föredra det framför arv för flexibilitet och ett tydligt dataflöde.
Demo: props + children
Exempel: skicka props, ange standardvärden och komponera children i en enkel kortlayout.
<div id="root"></div>
Återanvändbar presentation
Presentationskomponenter fokuserar på layout och visuellt innehåll. Låt dem styras av props och vara utan eget state när det är möjligt, så blir de enkla att återanvända.
- Litet API (endast props).
- Styla med klasser och undvik dolda sidoeffekter.
Komposition jämfört med arv
Sammanfattning
Sammanfattning: Skicka data med props, ange säkra standardvärden och komponera children för att bygga flexibla, återanvändbara UI:n. Undvik hierarkier som bygger på arv.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Props och komposition” gratis?
Ja – hela texten till ”Props och komposition” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Props och komposition”?
Skicka props, ange standardvärden via destructuring, jämför komposition med arv, använd mönster för children/slots och skapa enkla presentational components. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Props och komposition”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Att skicka props och kompositionsmönster
- Props och komposition
- Återanvändbara presentational components