Lasting, feil, tomme tilstander og skjeletter
Planlegg for lasting, feil, tomt resultat og suksess. Vis skjeletter under lasting, og hold meldingene tydelige på små skjermer.
Lasting, feil, tomme tilstander og skjeletter er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 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 flere tilstander
Mål: Dekk alle datatilstander for en god brukeropplevelse.
- Loading: vis skeletons
- Error: kort, hjelpsom tekst
- Empty: forklar og foreslå neste handling
- Success: gjengi liste eller detalj
Grunnleggende om skeletons
Skeletons antyder layouten mens data lastes inn. Hold dem diskrete, ikke prangende, og unngå layoutforskyvning når innholdet kommer.
Demo: loading/error/empty/success
Simuler henting: vis skeletons mens data lastes inn, og gjengi deretter listen. Bytt for å se flytene for error og empty.
<div id="root"></div>
Tips for tom tilstand
En tom tilstand bør avklare forventningene og foreslå et neste steg (for eksempel «Ingen elementer ennå. Legg til ett.»). Hold teksten kort og vennlig.
Tips for feiltilstand
Feiltilstand: vis en kort melding og en knapp for å prøve på nytt. Ikke eksponer rå stack traces på mobil. Gjør meldingen handlingsrettet.
Sjekkliste for skeletons
Skeletons bør:
- Tilpasses størrelsen på den endelige layouten
- Bruke en diskret skimmereffekt
- Forsvinne raskt
Unngå:
- Å blokkere interaksjoner unødvendig
- Å forårsake layout-hopp
Kontroll av tilstandsdekning
Oppsummering
Oppsummering: Dekk loading, error, empty og success. Bruk diskrete skeletons mens data lastes inn, og hold meldingene korte og handlingsrettede.
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 «Lasting, feil, tomme tilstander og skjeletter» gratis?
Ja – hele teksten i «Lasting, feil, tomme tilstander og skjeletter» 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 «Lasting, feil, tomme tilstander og skjeletter»?
Planlegg for lasting, feil, tomt resultat og suksess. Vis skjeletter under lasting, og hold meldingene tydelige på små skjermer. 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 1 av 3.
Hvor lang tid tar leksjonen «Lasting, feil, tomme tilstander og skjeletter»?
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
- Lasting, feil, tomme tilstander og skjeletter
- Ideer for nye forsøk og backoff samt kansellering av forespørsler
- Introduksjon til hjelpefunksjoner for Fetch (uten tunge biblioteker)