PricingLoginStart free
React Academy logo
ReactNybegynnerNettMobilNivåer A1 → C122 språk

React Academy

Lær deg ReactJS for å bygge dynamiske brukergrensesnitt med ReactJS Academy. En læringssti fra CoddyKit med 88 korte kurs og 324 interaktive leksjoner, med en AI-veileder tilgjengelig døgnet rundt.

Kurs
88
Leksjoner
324
Interaktive trinn
3,793
Gratis å komme i gang
Kurs 1
GET IT ONGoogle PlayDownload on theApp Store
Kursinnhold

88 kurs i denne læringsstien

Alle kursene i læringsstien React Academy, i læringsrekkefølge. Det første er gratis.

1

A13 leksjonerGratis

Kom i gang med det grunnleggende i React: komponenter, deklarativt brukergrensesnitt og hvordan diffing oppdaterer DOM-en effektivt. Sett deretter opp et prosjekt (for eksempel med Vite), kjør en utv…

  1. 1React-start: konsepter og oppsett
  2. 2Prosjektoppsett: Vite, layout og utviklingsserver
  3. 3Første komponent og rendering
Start læringen gratis
2

A13 leksjonerPRO

Lær JSX-regler: uttrykk og attributter, retur av fragments, rendering av lister med nøkler, enkle betingelser og alternativer for styling (CSS-moduler, inline-stiler, klassehjelpere).

  1. 1JSX-regler: uttrykk, attributter og fragments
  2. 2Lister og nøkler; betinget rendering
  3. 3Stylingalternativer: CSS Modules, inline-stiler og klassehjelpere
Start læringen gratisLås opp med PRO
3

A24 leksjonerPRO

Bli fortrolig med nettleserutvidelsen React DevTools for å inspisere komponenttrær, profilere gjengivelse og feilsøke state og props effektivt.

  1. 1Installere og åpne React DevTools
  2. 2Inspisere komponenttrær og props
  3. 3Bruke Profiler-fanen
  4. +1 flere
Start læringen gratisLås opp med PRO
4

A24 leksjonerPRO

Lag jevne animasjoner for innlasting, avslutning og tilstandsendringer i React ved hjelp av CSS-overganger og keyframes – uten behov for et animasjonsbibliotek.

  1. 1CSS-overganger ved endringer i React-tilstand
  2. 2CSS-nøkkelbørjeanimasjoner med React
  3. 3Bruk useLayoutEffect til målinger før animasjon
  4. +1 flere
Start læringen gratisLås opp med PRO
5

A24 leksjonerPRO

Del state mellom søskenkomponenter ved å løfte den opp, og forstå når prop drilling blir et problem som bør løses.

  1. 1Løfte state opp: Prinsipper og eksempler
  2. 2Prop drilling: Når det skaper problemer og når det er greit
  3. 3Mønstre for kommunikasjon mellom søsken
  4. +1 flere
Start læringen gratisLås opp med PRO
6

A24 leksjonerPRO

Bevar React-tilstand på tvers av sideinnlastinger ved hjelp av localStorage, håndter synkronisering mellom faner og velg riktig lagrings-API i nettleseren for hvert bruksområde.

  1. 1Lese og skrive localStorage i React
  2. 2Synkronisere tilstand med localStorage
  3. 3Håndtere storage-hendelser på tvers av faner
  4. +1 flere
Start læringen gratisLås opp med PRO
7

A24 leksjonerPRO

Bygg et robust system for mørk modus med egendefinerte CSS-egenskaper, React context og mediespørringen prefers-color-scheme – uten at feil tema blinker frem.

  1. 1Registrere systemets fargeskjema
  2. 2CSS-variabler for temabytte
  3. 3React Context for tematilstand
  4. +1 flere
Start læringen gratisLås opp med PRO
8

A23 leksjonerPRO

Send data med props , angi enkle defaults via destructuring, sett sammen brukergrensesnitt med children , og foretrekk komposisjon fremfor arv for gjenbrukbare presentasjonskomponenter.

  1. 1Sending av props og komposisjonsmønstre
  2. 2Props og komposisjon
  3. 3Gjenbrukbare presentasjonskomponenter
Start læringen gratisLås opp med PRO
9

A23 leksjonerPRO

Bli fortrolig med useState og hendelseshåndtering: oppdater state riktig, håndter onClick/onChange, og forbered Dem på kontrollerte inputfelter.

  1. 1Grunnleggende useState og riktige oppdateringer
  2. 2Håndtering av hendelser: onClick og onChange
  3. 3Kontrollerte og ukontrollerte inputfelt (introduksjon)
Start læringen gratisLås opp med PRO
10

A23 leksjonerPRO

Lær å bygge kontrollerte skjemaer med flere inputfelter, bruke grunnleggende validering og håndtere innsendinger på en smidig måte i React.

  1. 1Kontrollerte skjemaer med flere inputfelt
  2. 2Grunnleggende valideringsmønstre og håndtering av innsending
  3. 3Feilmeldinger og touched/dirty-tilstander (vanilla)
Start læringen gratisLås opp med PRO
11

A23 leksjonerPRO

Forstå ruting på klientsiden: hvordan SPA-er bytter visning uten å laste inn hele siden på nytt, grunnleggende stier og parametere samt tilstanden for aktiv navigasjon.

  1. 1Konsepter for routing på klientsiden
  2. 2Nestede ruter og ruteparametere
  3. 3Navigasjonslenker og aktive tilstander
Start læringen gratisLås opp med PRO
12

A23 leksjonerPRO

Bli fortrolig med useRef : bevar verdier på tvers av rendringer uten å utløse nye rendringer, få tilgang til DOM-noder og håndter tidsur på en trygg måte.

  1. 1Bevare verdier uten ny rendering
  2. 2Få tilgang til DOM-noder, måling og fokusering
  3. 3Mutable refs for timere og id-er
Start læringen gratisLås opp med PRO
13

A23 leksjonerPRO

Hold koden ryddig med ESLint og React-regler, og formater automatisk med Prettier . Legg til skript og rett feil raskt.

  1. 1ESLint + React-regler samt Prettier-integrasjon
  2. 2Filnavn, komponentgrenser og navn på props
  3. 3Miljøvariabler og organisering av konfigurasjon
Start læringen gratisLås opp med PRO
14

A22 leksjonerPRO

Bli fortrolig med kontrollerte og ukontrollerte inputfelter: når De bør velge hver variant, enkle ref-mønstre og trygge standardverdier.

  1. 1Avveininger, ref-mønstre og standardverdier
  2. 2Prop-gettere og tilstandsreduksjon (lett variant)
Start læringen gratisLås opp med PRO
15

B14 leksjonerPRO

Lær hva StrictMode gjør, hvilke advarsler det viser, og hvilke kodingskonvensjoner som gjør React-apper enklere å vedlikeholde.

  1. 1Hva StrictMode gjør
  2. 2Rene komponenter og unngå bivirkninger under gjengivelse
  3. 3Beste praksis for key og ref
  4. +1 flere
Start læringen gratisLås opp med PRO
16

B14 leksjonerPRO

Gjengi innhold utenfor det overordnede DOM-hierarkiet ved hjelp av React Portals for å bygge modaler, verktøytips og overlegg.

  1. 1Hva er React-portaler?
  2. 2Bygge en modal komponent med portaler
  3. 3Håndtere fokus og tastaturlåser i modaler
  4. +1 flere
Start læringen gratisLås opp med PRO
17

B14 leksjonerPRO

Arbeid med props.children og React.Children-verktøyene, og implementer fleksible komponent-API-er basert på slots.

  1. 1Grunnleggende om props.children
  2. 2React.Children-verktøy
  3. 3Navngitte slots via objekt-props
  4. +1 flere
Start læringen gratisLås opp med PRO
18

B14 leksjonerPRO

Bruk ukontrollerte inndatafelt med useRef, les verdier fra filinndata og håndter arbeidsflyter for filopplasting i React.

  1. 1Ukontrollerte inndata med useRef
  2. 2Filinndata og lese fildata
  3. 3Brukergrensesnitt for dra-og-slipp-filopplasting
  4. +1 flere
Start læringen gratisLås opp med PRO
19

B14 leksjonerPRO

Utform Context-leverandører som minimerer nye gjengivelser ved hjelp av memoization, oppdelte kontekster og selektormønstre.

  1. 1Dele opp kontekster for å begrense nye rendringer
  2. 2Memoisere kontekstverdier med useMemo
  3. 3Mønsteret Context Selector
  4. +1 flere
Start læringen gratisLås opp med PRO
20

B14 leksjonerPRO

Legg til støtte for flere språk i React-apper med react-i18next, administrer oversettelsesfiler og håndter bytte av lokalitet.

  1. 1Sette opp react-i18next
  2. 2Bruke useTranslation-hooken
  3. 3Flertallsformer og interpolering
  4. +1 flere
Start læringen gratisLås opp med PRO
21

B14 leksjonerPRO

Integrer kraftige nettleser-API-er – Clipboard, Geolocation, Notifications og IntersectionObserver – i React-komponenter med riktig opprydding og håndtering av tillatelser.

  1. 1Clipboard API: kopiere og lime inn i React
  2. 2Geolocation API i React-komponenter
  3. 3Notifications API og håndtering av tillatelser
  4. +1 flere
Start læringen gratisLås opp med PRO
22

B14 leksjonerPRO

Unngå unødvendige re-renders og API-kall ved å implementere debounce- og throttle-mønstre som gjenbrukbare React-hooks for søke-, scroll- og resize-hendelser.

  1. 1Hvorfor debounce og throttle er viktig i brukergrensesnitt
  2. 2Implementere en egendefinert useDebounce-hook
  3. 3Implementere en egendefinert useThrottle-hook
  4. +1 flere
Start læringen gratisLås opp med PRO
23

B14 leksjonerPRO

Bygg tilgjengelige, tastaturnavigerbare komponenter for autocomplete og type-ahead fra bunnen av med React state og refs – uten bibliotek.

  1. 1Kontrollert inndatafelt med forslagsliste
  2. 2Tastaturnavigasjon i forslagslister
  3. 3Asynkrone forslag med debounce
  4. +1 flere
Start læringen gratisLås opp med PRO
24

B14 leksjonerPRO

Bygg effektive og fleksible skjemaer i React med React Hook Form: registrering, validering, visning av feil og integrasjon med skjemaer.

  1. 1Kom i gang med React Hook Form
  2. 2Valideringsregler og feilmeldinger
  3. 3Skjemavalidering med Zod
  4. +1 flere
Start læringen gratisLås opp med PRO
25

B14 leksjonerPRO

Bruk Zustand til å håndtere global state i React-apper: stores, handlinger, selektorer, persistens og integrasjon med devtools.

  1. 1Opprette din første Zustand-store
  2. 2Selectorer og forebygging av unødvendige nye rendringer
  3. 3Bevare state med Persist-middleware
  4. +1 flere
Start læringen gratisLås opp med PRO
26

B14 leksjonerPRO

Gå videre enn grunnleggende ruter med nestede oppsett, loaders, actions, beskyttede ruter og håndtering av state i søkeparametere.

  1. 1Nestede ruter og Outlet-layouts
  2. 2Loaders og actions (Data Router-API)
  3. 3Beskyttede ruter og auth guards
  4. +1 flere
Start læringen gratisLås opp med PRO
27

B14 leksjonerPRO

Legg til TypeScript i React-prosjekter: typ komponenter, hendelser, hooks, kontekst og generiske komponenter med trygghet.

  1. 1Type props og returtyper for komponenter
  2. 2Type events og refs i TypeScript
  3. 3Generiske komponenter og utility-typer
  4. +1 flere
Start læringen gratisLås opp med PRO
28

B14 leksjonerPRO

Bygg datatabeller klare for produksjon, med sortering, filtrering, paginering og radvalg, ved hjelp av TanStack Tables kraftige headless-arkitektur.

  1. 1TanStack Table: filosofi og headless-design
  2. 2Definere kolonner og gjengi rader
  3. 3Sortering, filtrering og paginering
  4. +1 flere
Start læringen gratisLås opp med PRO
29

B14 leksjonerPRO

Administrer React-tilstand med Jotais minimale atomiske modell – komponerbare atoms som avleder verdier, håndterer asynkronitet og integreres sømløst med React Suspense.

  1. 1Atomer: grunnenheten for tilstand i Jotai
  2. 2Lese og skrive atomer med useAtom
  3. 3Deriverte og asynkrone atomer
  4. +1 flere
Start læringen gratisLås opp med PRO
30

B14 leksjonerPRO

Bruk SWRs strategi stale-while-revalidate for rask og pålitelig datahenting med automatisk revalidering, mutasjon og støtte for offline-modus.

  1. 1SWR-grunnprinsipper: stale-while-revalidate
  2. 2useSWR-hook: henting, innlasting og feiltillstander
  3. 3Mutasjoner og optimistiske oppdateringer med SWR
  4. +1 flere
Start læringen gratisLås opp med PRO
31

B14 leksjonerPRO

Bygg tilgjengelige, berøringsvennlige dra-og-slipp-grensesnitt i React med dnd-kit – sorterbare lister, kanban-tavler og dra-og-slipp-interaksjoner mellom flere containere.

  1. 1dnd-kit-arkitektur og tilgjengelighetsfokusert design
  2. 2DndContext, useDraggable og useDroppable
  3. 3SortableContext for lister som kan omorganiseres
  4. +1 flere
Start læringen gratisLås opp med PRO
32

B14 leksjonerPRO

Lag flytende, fjærfysikkbaserte animasjoner i React med react-spring – fra enkle verdi­overganger til komplekse, geststyrte interaksjoner.

  1. 1React Spring-grunnlag: useSpring-hooken
  2. 2Animerte komponenter og stilinterpolasjon
  3. 3useTrail og useChain for sekvenser
  4. +1 flere
Start læringen gratisLås opp med PRO
33

B14 leksjonerPRO

Implementer sanntidsdataflyter i React med Server-Sent Events og polling-strategier – og forstå avveiningene mot WebSockets for ulike bruksområder.

  1. 1Sammenligning av SSE, WebSockets og polling
  2. 2Bruke SSE-strømmer i React med EventSource
  3. 3Mønster for long polling og logikk for gjenoppretting
  4. +1 flere
Start læringen gratisLås opp med PRO
34

B13 leksjonerPRO

Forstå useEffect : når den kjøres sammenlignet med rendering, hvordan avhengighetsarrayer styrer den, og hvordan De skriver trygge oppryddingsfunksjoner.

  1. 1Effekter kontra rendering, avhengigheter og opprydding
  2. 2Vanlige fallgruver: utdaterte closures og manglende avhengigheter
  3. 3Grunnleggende datahenting i effekter (avbryt og rydd opp)
Start læringen gratisLås opp med PRO
35

B13 leksjonerPRO

Utform robuste data-grensesnitt: håndter lasting -, feil -, tom - og vellykket -tilstand med tydelige tilbakemeldinger og enkle skeleton-skjermer.

  1. 1Lasting, feil, tomme tilstander og skjeletter
  2. 2Ideer for nye forsøk og backoff samt kansellering av forespørsler
  3. 3Introduksjon til hjelpefunksjoner for Fetch (uten tunge biblioteker)
Start læringen gratisLås opp med PRO
36

B13 leksjonerPRO

Del state mellom komponenter som ligger langt fra hverandre med Context for å unngå prop drilling; sett opp en Provider og les verdier via useContext .

  1. 1Grunnleggende Context og unngåelse av prop drilling
  2. 2Grunnleggende useReducer og handlingsmønstre
  3. 3Context + Reducer: enkle tilstandskontainere
Start læringen gratisLås opp med PRO
37

B13 leksjonerPRO

Trekk ut gjenbrukbar logikk i egendefinerte hooks : definer tydelige parametere, returner stabile verdier/handlinger og hold effektene ryddige.

  1. 1Flytte logikk til hooks: parametere og returverdier
  2. 2Navngivning, memoisering og ryddige effekter
  3. 3Testing av egendefinerte hooks (forhåndsvisning)
Start læringen gratisLås opp med PRO
38

B13 leksjonerPRO

Bygg inkluderende brukergrensesnitt: bruk ekte semantikk, tydelige etiketter og roller, og håndter tastaturfokus for smidig navigasjon.

  1. 1Semantikk, etiketter, roller og fokus
  2. 2Tastaturinteraksjoner og hopp over-lenker
  3. 3Grunnleggende testing av tilgjengelighet
Start læringen gratisLås opp med PRO
39

B14 leksjonerPRO

Legg til jevne animasjoner og overganger i React-apper med Framer Motion: motion-komponenter, varianter, bevegelser og layoutanimasjoner.

  1. 1Motion-komponenter og grunnleggende animasjoner
  2. 2Varianter for orkestrerte animasjoner
  3. 3Gestanimasjoner: Hover, Tap og Drag
  4. +1 flere
Start læringen gratisLås opp med PRO
40

B13 leksjonerPRO

Fang feil under rendering med Error Boundaries, vis trygge reservevisninger og sørg for at resten av appen fortsatt er responsiv.

  1. 1Error Boundary-komponenter (klassebasert wrapper)
  2. 2Gjenoppretting av brukergrensesnitt og strategier for rapportering
  3. 3Sikring av effekter og opprydding
Start læringen gratisLås opp med PRO
41

B13 leksjonerPRO

Legg til lette typer i React-komponenter. Begynn med props, og trekk deretter ut gjenbrukbare generiske typer for å holde UI-koden trygg og tydelig.

  1. 1Typer for props og generiske typer for gjenbrukbare komponenter
  2. 2Typer for hendelser, refs og Context
  3. 3Trinnvis migrering
Start læringen gratisLås opp med PRO
42

B13 leksjonerPRO

Organiser React-apper: feature-baserte mapper, små UI-primitiver kontra sammensatte komponenter, hooks og tester samlet, samt tydelige regler for refaktorering.

  1. 1Funksjonsmapper og brukergrensesnitt- kontra sammensatte komponenter
  2. 2Konvensjoner for hooks-mapper og samlokalisering av tester
  3. 3Retningslinjer for refaktorering
Start læringen gratisLås opp med PRO
43

B24 leksjonerPRO

Gjengi tusenvis av listeelementer uten redusert ytelse ved å bruke react-window til å virtualisere DOM-utdata – slik at bare det som er synlig i visningsområdet, gjengis.

  1. 1Problemet med gjengivelse av store lister
  2. 2FixedSizeList: Gjengi tusenvis av elementer
  3. 3VariableSizeList: Dynamiske radhøyder
  4. +1 flere
Start læringen gratisLås opp med PRO
44

B24 leksjonerPRO

Håndter asynkrone operasjoner på idiomatisk vis i React med useEffect, useTransition, useDeferredValue og Suspense.

  1. 1Kappløpsforhold og opprydding i effekter
  2. 2useTransition for ikke-blokkerende UI-oppdateringer
  3. 3useDeferredValue for debouncing av inndata
  4. +1 flere
Start læringen gratisLås opp med PRO
45

B24 leksjonerPRO

Forstå render props og høyereordenskomponenter som klassiske mønstre for gjenbruk av kode, før hooks erstattet dem.

  1. 1Mønsteret Render Props
  2. 2Higher-Order Components (HOC-er) forklart
  3. 3HOC-er kontra Render Props kontra egendefinerte hooks
  4. +1 flere
Start læringen gratisLås opp med PRO
46

B24 leksjonerPRO

Forstå den subtile, men avgjørende forskjellen mellom useEffect og useLayoutEffect – når hver av dem kjører i forhold til DOM-commit – og bruk dem riktig.

  1. 1Gjengivelsesfasen og DOM-commit
  2. 2Når useLayoutEffect kjører sammenlignet med useEffect
  3. 3Måle DOM-elementer med useLayoutEffect
  4. +1 flere
Start læringen gratisLås opp med PRO
47

B24 leksjonerPRO

Håndter kompleks app-state med slices og thunks i Redux Toolkit, samt RTK Query for bufring og synkronisering av server-state.

  1. 1Redux Toolkit-slices og createSlice
  2. 2Asynkron logikk med createAsyncThunk
  3. 3RTK Query: Endpoints og automatisk caching
  4. +1 flere
Start læringen gratisLås opp med PRO
48

B24 leksjonerPRO

Forstå React Server Components, use()-hooken, Actions og andre React 19-API-er som endrer hvordan data flyter i apper.

  1. 1React Server Components forklart
  2. 2use()-hooken for asynkrone ressurser
  3. 3React Actions og useActionState
  4. +1 flere
Start læringen gratisLås opp med PRO
49

B24 leksjonerPRO

Håndter server-state med TanStack Query: henting, bufring, bakgrunnshenting, mutasjoner og paginering.

  1. 1Sette opp React Query og QueryClient
  2. 2Caching, stale-tid og bakgrunnshenting
  3. 3Mutations med useMutation
  4. +1 flere
Start læringen gratisLås opp med PRO
50

B24 leksjonerPRO

Skriv integrasjonstester med React Testing Library og ende-til-ende-tester med Playwright for å kontrollere reelle brukerflyter.

  1. 1Integrasjonstesting med React Testing Library
  2. 2Teste asynkront brukergrensesnitt og API-kall med MSW
  3. 3Kom i gang med Playwright for React
  4. +1 flere
Start læringen gratisLås opp med PRO
51

B24 leksjonerPRO

Dokumenter, utvikle og test React UI-komponenter isolert ved hjelp av Storybook med CSF3-stories og tillegg.

  1. 1Sette opp Storybook i et React-prosjekt
  2. 2Skrive CSF3 Stories
  3. 3Args, Controls og Actions Addon
  4. +1 flere
Start læringen gratisLås opp med PRO
52

B24 leksjonerPRO

Bygg React-grensesnitt som oppdateres i sanntid, ved hjelp av WebSockets og biblioteker som Socket.IO for chat, varsler og dashbord.

  1. 1Grunnleggende om WebSocket i nettleseren
  2. 2Bruke Socket.IO med React
  3. 3Bygge en chatkomponent i sanntid
  4. +1 flere
Start læringen gratisLås opp med PRO
53

B24 leksjonerPRO

Bygg fullstendig typesikre API-er uten schemas eller kodegenerering med tRPC – og del automatisk typer mellom React-frontend og Node.js-backend.

  1. 1Problemet tRPC løser
  2. 2Konfigurere tRPC med React og Next.js
  3. 3Spørringer, mutasjoner og abonnementer
  4. +1 flere
Start læringen gratisLås opp med PRO
54

B24 leksjonerPRO

Integrer GraphQL i React-applikasjoner med Apollo Client – hent og endre data, bruk caching og hold brukergrensesnittet synkronisert med data fra serveren.

  1. 1GraphQL-grunnlag for React-utviklere
  2. 2Konfigurere Apollo Client i React
  3. 3useQuery- og useMutation-hooks
  4. +1 flere
Start læringen gratisLås opp med PRO
55

B24 leksjonerPRO

Bygg raske og responsive brukergrensesnitt som viser resultater umiddelbart før serveren bekrefter dem – med riktig tilbakerulling ved feil og strategier for konfliktløsning.

  1. 1Hva er optimistisk brukergrensesnitt, og når bør det brukes
  2. 2Implementere optimistiske oppdateringer manuelt
  3. 3Tilbakerulling ved feil og konfliktløsning
  4. +1 flere
Start læringen gratisLås opp med PRO
56

B24 leksjonerPRO

Pakk og publiser gjenbrukbare React-komponentbiblioteker til npm – med håndtering av ESM/CJS-dobbel output, peer dependencies, tree shaking og automatisert versjonering.

  1. 1Pakking med Rollup og tsup for biblioteker
  2. 2ESM- og CJS-utdata i samme pakke
  3. 3Peer-avhengigheter og tree shaking
  4. +1 flere
Start læringen gratisLås opp med PRO
57

B23 leksjonerPRO

Forstå Reacts render - og commit -faser, når komponenter oppdateres og når memoisering er nyttig.

  1. 1Nye renderinger kontra commits: når bør De optimalisere
  2. 2React.memo, useMemo, useCallback – i praksis
  3. 3Avledet tilstand og unngåelse av ekstra renderinger
Start læringen gratisLås opp med PRO
58

B23 leksjonerPRO

Lær det grunnleggende om samtidige brukergrensesnitt med useTransition : sørg for responsiv skriving, vis et hint om venting og utsett oppdateringer som ikke haster.

  1. 1useTransition for ventende brukergrensesnitt (grunnleggende samtidighet)
  2. 2Suspense for asynkrone grenser (begreper)
  3. 3Reservevisninger og oppdeling av trege baner
Start læringen gratisLås opp med PRO
59

B23 leksjonerPRO

Last bare inn det De trenger ved å dele opp kode for skjermer og widgeter. Bruk React.lazy og Suspense for apper som oppleves raskere.

  1. 1React.lazy og Suspense – late komponenter
  2. 2Rute- og komponentbasert kodeoppdeling
  3. 3Bunter, hurtigbuffer og hint om forhåndslasting
Start læringen gratisLås opp med PRO
60

B23 leksjonerPRO

Sett opp tester med Vitest/Jest og React Testing Library ; rendre komponenter, søk etter rolle/etikett og kjør i et jsdom-miljø.

  1. 1Oppsett av React Testing Library + Vitest/Jest
  2. 2Forespørsler, hendelser og påstander – skjemaer og asynkront brukergrensesnitt
  3. 3Mocking av Fetch og timere
Start læringen gratisLås opp med PRO
61

B24 leksjonerPRO

Bygg fullstack-nettapper med Next.js 14+ App Router: filbasert ruting, oppsett, serverkomponenter og metadata.

  1. 1Filkonvensjoner for App Router
  2. 2Server- kontra klientkomponenter i Next.js
  3. 3Dynamiske ruter og rutegrupper
  4. +1 flere
Start læringen gratisLås opp med PRO
62

B24 leksjonerPRO

Hent, bufre og valider data på nytt i Next.js App Router ved hjelp av fetch-alternativer, unstable_cache og behovsstyrt revalidering.

  1. 1fetch() med cache-alternativer i Next.js
  2. 2unstable_cache og React cache()
  3. 3Inkrementell statisk regenerering (ISR)
  4. +1 flere
Start læringen gratisLås opp med PRO
63

B24 leksjonerPRO

Legg til autentisering i Next.js-apper med Auth.js (NextAuth v5): OAuth-leverandører, legitimasjon, økter og rutevern.

  1. 1Sette opp Auth.js i Next.js App Router
  2. 2Sesjonsadministrasjon og useSession-hooken
  3. 3Credentials Provider og egendefinert innlogging
  4. +1 flere
Start læringen gratisLås opp med PRO
64

B24 leksjonerPRO

Overfør React-kunnskapene til mobil ved å lære om React Native-primitiver, styling, navigasjon og opprinnelige enhets-API-er.

  1. 1React Native-kjernekomponenter kontra Web DOM
  2. 2Styling med StyleSheet-API-et og Flexbox
  3. 3Navigasjon med Expo Router
  4. +1 flere
Start læringen gratisLås opp med PRO
65

B24 leksjonerPRO

Distribuer React- og Next.js-apper til produksjon med Vercel, AWS S3/CloudFront og Docker-containere gjennom CI/CD-pipelines.

  1. 1Rulle ut til Vercel: null konfigurasjon og forhåndsvisnings-URL-er
  2. 2Drifte en React-SPA på AWS S3 og CloudFront
  3. 3Dockerisere en React/Next.js-app
  4. +1 flere
Start læringen gratisLås opp med PRO
66

B24 leksjonerPRO

Bruk React 19 Server Actions og Next.js form actions til å håndtere mutasjoner på serversiden – og fjern behovet for API-ruter i vanlige skjemamønstre med progressiv forbedring.

  1. 1Server Actions i React 19 og Next.js
  2. 2Skjemaactions: Erstatt API-ruter for mutasjoner
  3. 3useActionState og useFormStatus
  4. +1 flere
Start læringen gratisLås opp med PRO
67

B24 leksjonerPRO

Sikre React-applikasjoner bedre mot XSS, CSRF og andre sårbarheter – med praktisk veiledning i Content Security Policy, håndtering av secrets og trygg rendering.

  1. 1XSS i React: dangerouslySetInnerHTML og tredjepartsskript
  2. 2CSRF-beskyttelse i React- og API-oppsett
  3. 3Content Security Policy for React-apper
  4. +1 flere
Start læringen gratisLås opp med PRO
68

B24 leksjonerPRO

Bygg et skalerbart design tokens-system som driver React-komponentbiblioteker med flere temaer – fra definisjon av tokens via CSS-variabler og Tailwind-integrasjon til Style Dictionary.

  1. 1Hva er designtoken, og hvorfor er de viktige
  2. 2Style Dictionary: Transformering og generering av token
  3. 3Tokens i Tailwind, CSS-variabler og CSS-in-JS
  4. +1 flere
Start læringen gratisLås opp med PRO
69

B24 leksjonerPRO

Bygg plattformuavhengige skrivebordsapplikasjoner med Electron og en React-frontend – med IPC-kommunikasjon, native API-er og pakking for distribusjon.

  1. 1Electron-arkitektur: Hoved- og renderer-prosesser
  2. 2Sette opp React med Electron
  3. 3IPC-kommunikasjon mellom prosesser
  4. +1 flere
Start læringen gratisLås opp med PRO
70

B23 leksjonerPRO

Bygg sammensatte komponenter: den overordnede komponenten tilbyr context, mens underkomponentene bruker den for fleksible API-er.

  1. 1Koordinering mellom foreldre og barn via Context
  2. 2Ergonomiske API-er med komposisjon
  3. 3Slot-mønster med tydelig navngitte barn
Start læringen gratisLås opp med PRO
71

B23 leksjonerPRO

Bygg store skjemaer med små, robuste deler: feltarrayer, dynamiske seksjoner og enkle valideringsflyter.

  1. 1Feltarrayer, dynamiske skjemaer og valideringsflyter
  2. 2Asynkron validering og avhengige felt
  3. 3Ytelsestriks for store skjemaer
Start læringen gratisLås opp med PRO
72

B23 leksjonerPRO

Gå videre enn det grunnleggende: nestede oppsett, konseptuelle route loaders og enkle ideer for forhåndshenting som gir smidigere navigasjon.

  1. 1Nestede oppsett, loadere (begrep) og forhåndshenting
  2. 2Autentiseringsflyter og beskyttede ruter
  3. 3Gjenoppretting av rulleposisjon og ruter som ikke finnes
Start læringen gratisLås opp med PRO
73

B23 leksjonerPRO

Vit hva som hører hjemme i servercachen, og hva som er lokal UI-state. Hent og oppdater data uten å blande ansvarsområder.

  1. 1Skillet mellom serverdata og lokal brukergrensesnitttilstand
  2. 2Normalisering og optimistiske oppdateringer (begreper)
  3. 3Synkroniseringsmønstre uten tunge biblioteker
Start læringen gratisLås opp med PRO
74

B23 leksjonerPRO

Lag tilgjengelige overlegg: rendre med portaler, hold fokus inne i overlegget og støtt rask lukking med Escape eller klikk på bakgrunnen.

  1. 1Portaler, fokusfelle og lukking med Escape
  2. 2Global overlay-behandler (Context + Reducer)
  3. 3Kunngjøringer for tilgjengelighet (aria-live)
Start læringen gratisLås opp med PRO
75

B23 leksjonerPRO

Gjør appene klare for produksjon: bygg for utvikling kontra produksjon, kildekart, enkle miljøvariabler og små kontroller for trygg levering.

  1. 1Utviklings- og produksjonsbygg, kildekart og miljøer
  2. 2Buntanalyse og fjerning av ubrukt kode
  3. 3Grunnleggende CI: lint → test → bygg
Start læringen gratisLås opp med PRO
76

C14 leksjonerPRO

Bli fortrolig med imperative React-API-er – eksponer egendefinerte komponentinstansverdier for overordnede komponenter ved hjelp av forwardRef og useImperativeHandle når deklarative mønstre ikke stre…

  1. 1forwardRef: Gjør DOM-referanser tilgjengelige for foreldre
  2. 2useImperativeHandle: Tilpassede instansverdier
  3. 3Bygg et imperativt komponent-API
  4. +1 flere
Start læringen gratisLås opp med PRO
77

C14 leksjonerPRO

Lær deg React 18-hooken useSyncExternalStore – den riktige måten å synkronisere React-komponenter med eksterne tilstandskilder som nettleser-API-er, globale stores og tredjepartsbiblioteker.

  1. 1Problemet med abonnementer på eksterne stores
  2. 2useSyncExternalStore-API-et og parametere
  3. 3Abonner på nettleser-API-er
  4. +1 flere
Start læringen gratisLås opp med PRO
78

C14 leksjonerPRO

Del opp store React-frontendapplikasjoner i mikrofrontender som distribueres uavhengig, ved hjelp av Module Federation og single-spa.

  1. 1Mikrofrontend-konsepter og avveininger
  2. 2Module Federation med Webpack 5
  3. 3Delt state og ruting mellom MFE-er
  4. +1 flere
Start læringen gratisLås opp med PRO
79

C14 leksjonerPRO

Forstå mekanismene bak gjengivelse på serversiden, hydrering, selektiv hydrering og strømming av HTML med Reacts renderToPipeableStream.

  1. 1Slik fungerer React SSR under panseret
  2. 2Hydreringsfeil: årsaker og løsninger
  3. 3Selektiv hydrering og strømming av HTML
  4. +1 flere
Start læringen gratisLås opp med PRO
80

C14 leksjonerPRO

Videreutvikle TypeScript-ferdighetene i React med diskriminerte unioner, mapped types, betingede typer og typesikre komponent-API-er.

  1. 1Diskriminerte unioner for komponentvarianter
  2. 2Conditional- og mapped-typer i React
  3. 3Polymorfe komponenter med 'as'-prop
  4. +1 flere
Start læringen gratisLås opp med PRO
81

C14 leksjonerPRO

Mål og forbedre Core Web Vitals (LCP, INP, CLS) i React-apper med profileringsverktøy, pakkeanalyse og målrettede optimaliseringer.

  1. 1Måle Core Web Vitals i React-apper
  2. 2Buntanalyse og strategi for kodedeling
  3. 3Optimalisering av bilder og skrifter i React
  4. +1 flere
Start læringen gratisLås opp med PRO
82

C14 leksjonerPRO

Organiser flere React-apper og delte biblioteker i et monorepo med Nx, smart oppgaveplanlegging og CI basert på berørte deler.

  1. 1Opprette et Nx-monorepo med React-apper
  2. 2Delte biblioteker og interne pakker
  3. 3Nx Affected-kommandoer og caching
  4. +1 flere
Start læringen gratisLås opp med PRO
83

C14 leksjonerPRO

Unngå hydration av hele sider ved å ta i bruk Islands Architecture – og hydrere bare de interaktive React-komponentene som trenger det, med Astro.

  1. 1Problemet med full hydrering
  2. 2Islands-arkitektur: Selektiv hydrering
  3. 3Oppsett av Astro og React Islands
  4. +1 flere
Start læringen gratisLås opp med PRO
84

C14 leksjonerPRO

Integrer WebAssembly-moduler i React-applikasjoner for beregningsintensive oppgaver – fra Rust WASM-moduler til delt minne og worker-tråder.

  1. 1Hva er WebAssembly, og hvor passer React inn
  2. 2Laste inn WASM-moduler i React
  3. 3Fra Rust til WASM med wasm-pack og React
  4. +1 flere
Start læringen gratisLås opp med PRO
85

C14 leksjonerPRO

Server React-applikasjoner fra edge med responstid på under ett millisekund – ved hjelp av Cloudflare Workers, streaming-SSR og edge-native caching-strategier.

  1. 1Hva er edge-rendering, og hvorfor er det viktig
  2. 2React på Cloudflare Workers med Hono
  3. 3Strømmende SSR fra edge
  4. +1 flere
Start læringen gratisLås opp med PRO
86

C14 leksjonerPRO

Instrumenter React-applikasjoner med OpenTelemetry for å samle inn traces, måle ytelse hos reelle brukere og koble frontend-hendelser til spans i backend.

  1. 1Frontend-observabilitet: Hva og hvorfor
  2. 2OpenTelemetry-spor fra nettleseren
  3. 3Overvåking av reelle brukere og Web Vitals
  4. +1 flere
Start læringen gratisLås opp med PRO
87

C14 leksjonerPRO

Bruk streaming-SSR og Suspense i React 18 til å levere HTML trinnvis til nettleseren – og forbedre opplevd ytelse uten å vente på at alle data skal lastes inn.

  1. 1Strømming i React 18: Slik fungerer renderToPipeableStream
  2. 2Suspense-grenser og prioritet ved strømming
  3. 3Progressiv hydrering med selektiv hydrering
  4. +1 flere
Start læringen gratisLås opp med PRO
88

C14 leksjonerPRO

Implementer Webpack Module Federation for å bygge og distribuere React-micro frontends uavhengig av hverandre – med deling av avhengigheter, tilstand og routing mellom eksterne applikasjoner.

  1. 1Module Federation: Dynamiske importer ved kjøring
  2. 2Konfigurere verts- og eksterne React-apper
  3. 3Dele tilstand og ruting mellom remoter
  4. +1 flere
Start læringen gratisLås opp med PRO
CoddyKit PRO

Lås opp alle 88 kursene i denne læringsstien og alle andre læringsstier

AI-veileder, sertifiseringseksamen og sertifikat. Fungerer på web, iOS og Android.

Se alle abonnementene
Årlig$29.90 / årOmtrent $2.49 per månedBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for alltid.
Kursoversikt

Bygg ekte grensesnitt med React

React er JavaScript-biblioteket som definerer hvordan de fleste brukergrensesnitt i produksjon bygges i dag – fra enkeltsideapper og Next.js-nettsteder til mobil- og skrivebordsapplikasjoner på tvers av plattformer. Dette læringsløpet dekker hele fagområdet: komponentarkitektur, tilstandsbehandling, datainnhenting, ytelse, testing og utrulling. Det er forankret i hvordan React faktisk fungerer – avstemmingsmotoren, fiber-modellen og semantikken til hooks – ikke bare i overflate-API-et.

Dette lærer De

De begynner med JSX, props, state og kontrollerte komponenter, før De går videre til useEffect, useRef og useReducer. Praktiske kurs dekker ruting med React Router v6, skjemahåndtering med React Hook Form, servertilstand med React Query og SWR, samt global tilstand med Redux Toolkit, Zustand og Jotai. De arbeider med TypeScript i React, skriver integrasjons- og E2E-tester, bygger designsystemer med Storybook, håndterer sanntidsgrensesnitt over WebSockets og leverer typesikre API-er med tRPC. Læringsløpet omfatter også Next.js App Router, serverkomponenter, serverhandlinger og autentisering med NextAuth.js.

Læringsløpet

De 95 kursene går fra A1 til C1. Kursene på A1- og A2-nivå etablerer grunnlaget i React, JSX-gjengivelse, CSS-animasjoner, vedvarende lagring med local storage og mørk modus. B1-kursene bygger trygghet med kontekst-mønstre, i18n, React Spring, Framer Motion, dra-og-slipp med dnd-kit og komplekse datatabeller med TanStack Table. B2-kursene tar for seg gjengivelse og memoization, Suspense, kodedeling, React Native for React-utviklere, utrulling til Vercel og AWS samt Electron for skrivebordsapper. C1-nivået avsluttes med avanserte emner: Micro-Frontend Architecture, SSR and Hydration Deep Dive, Module Federation, Islands Architecture with Astro, WebAssembly integration, Edge Rendering with Cloudflare Workers og OpenTelemetry for frontend observability.

Slik fungerer det

Hvert kurs er delt inn i korte, fokuserte leksjoner som De fullfører i den innebygde kodeeditoren med tilbakemelding i sanntid. En AI-veileder er tilgjengelig når De står fast med et konsept eller en test som feiler. De kan følge læringsløpet i rekkefølge eller hoppe til nivået som passer med Deres nåværende erfaring.

Verktøy

Øv med AI, ikke bare les

Få mer ut av læringen med AI-drevne verktøy og funksjoner

AI-kodegeneratorGenerer kode med AIAI-feilrettingFinn og rett feil i kodenPROAI-innsiktGrundig kodeanalysePROAI-chatChat med AI-veilederenStill et superspørsmålFå svar på ekspertnivåPROOpprett leksjonAI-drevet leksjonsbyggerPROStart sertifiseringseksamenFå sertifikatet dittPROKodeeditorSkriv og kjør kodeStart utfordringTest ferdighetene dine

Slik lærer du

  1. 01

    Interaktive leksjoner

    Praktiske kodeøvelser med tilbakemelding i sanntid

  2. 02

    AI-veileder

    Få øyeblikkelig hjelp fra AI-en vår når du står fast

  3. 03

    Innebygd kodeeditor

    Skriv og kjør kode direkte i nettleseren

  4. 04

    Sertifikat

    Få et sertifikat når du fullfører kurset

Fortsett å utforske

Relaterte læringsstier

Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.TypeScript Academy logoTypeScript AcademyEnhance your JavaScript projects with TypeScript through lessons at TypeScript Academy.C# Academy logoC# AcademyMaster C# programming and develop versatile software solutions with C# Academy.Firebase Auth & Realtime Database Apps logoApper med Firebase Auth og Realtime DatabaseMaster Firebase Authentication and Realtime Database to build scalable, secure, and dynam…Design Systems & Component Libraries logoDesignsystemer og komponentbibliotekerMaster the art of creating robust design systems and efficient component libraries to acc…
FAQ

Ofte stilte spørsmål

Er kurset i React Academy gratis?

Ja. Du kan starte på kurset i React Academy gratis og fullføre de interaktive leksjonene uten kostnad. Et valgfritt PRO-abonnement låser opp avanserte AI-verktøy og et delbart sertifikat.

Trenger jeg tidligere erfaring for å lære React?

Nei. Kurset begynner med det grunnleggende og går gradvis videre til mer avanserte emner, slik at du kan starte selv uten tidligere erfaring med React.

Hvordan lærer jeg React på CoddyKit?

Du lærer gjennom praksis. Korte, interaktive leksjoner kombinerer en tydelig forklaring med en praktisk kodeøvelse som kjører i sanntid, og en AI-veileder som er tilgjengelig døgnet rundt, gir deg personlig hjelp når du står fast.

Får jeg et sertifikat når jeg fullfører React Academy?

Ja. PRO-brukere kan ta en eksamen og få et delbart fullføringssertifikat med en verifiserbar kode for kurset i React Academy.

Kan jeg lære React på telefonen?

Ja. CoddyKit er tilgjengelig på nettet og som native iOS- og Android-apper, slik at du kan lære React på alle enheter, mens fremdriften synkroniseres mellom dem.

Hvor mye koster CoddyKit PRO?

Det første kurset i React Academy er gratis. CoddyKit PRO gir tilgang til alle kurs: $5.90 per uke, $7.90 per måned, $29.90 per år eller $69.99 én gang for tilgang på livstid uten fornyelser.

Hvor lang tid tar det å fullføre React Academy?

React Academy består av 88 kurs og 324 leksjoner. De fleste leksjonene tar omtrent 5–10 minutter, så hele læringsstien tar rundt 38 timer med praktisk øving i eget tempo.

Start på React Academy nå

Bli med tusenvis av elever som lærer programmering med AI-drevne leksjoner.

Start læringen gratisSe alle kurs