Filnavn, komponentgrenser og navn på props
Ta i bruk enkle konvensjoner: PascalCase for komponenter, tydelige mapper, små komponentgrenser og beskrivende prop-navn.
Filnavn, komponentgrenser og navn på props 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.
Hvorfor konvensjoner er nyttige
Mål: Gjør kodebasen forutsigbar.
- Komponentfiler i PascalCase
- Små, fokuserte komponenter
- Tydelige, beskrivende prop-navn
Kort oversikt over navngivning og mapper
- Filer: UserCard.jsx, ProductList.jsx
- Mapper: components/UserCard, pages/Profile
- Eksporter: default eller named, men la dem samsvare med filnavnet
Demonstrasjon: lite prosjekt-tre
En liten prosjektstruktur med komponentfiler i PascalCase.
<div id="root"></div>
Demonstrasjon: små, gjenbrukbare deler
Hold komponentene fokuserte: en liten UserCard som brukes i en Profile.
<div id="root"></div>
Demonstrasjon: tydelige props og standardverdier
Bruk beskrivende prop-navn, og angi enkle standardverdier i destruktureringen.
<div id="root"></div>
Sjekkliste
- PascalCase for komponenter og filer
- Én fil, én hovedkomponent
- Props: tydelige navn (label, onPress), enkle standardverdier
Beste praksis for filnavn
Oppsummering
Oppsummering: Bruk PascalCase i fil- og komponentnavn, hold komponentene fokuserte, og velg uttrykksfulle prop-navn med enkle standardverdier.
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 «Filnavn, komponentgrenser og navn på props» gratis?
Ja – hele teksten i «Filnavn, komponentgrenser og navn på props» 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 «Filnavn, komponentgrenser og navn på props»?
Ta i bruk enkle konvensjoner: PascalCase for komponenter, tydelige mapper, små komponentgrenser og beskrivende prop-navn. 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 «Filnavn, komponentgrenser og navn på props»?
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
- ESLint + React-regler samt Prettier-integrasjon
- Filnavn, komponentgrenser og navn på props
- Miljøvariabler og organisering av konfigurasjon