PricingLoginStart free
React Academy logo
ReactBegynderWebMobilNiveauer A1 → C122 sprog

React Academy

Mestr ReactJS, og byg dynamiske brugergrænseflader med ReactJS Academy. Et læringsforløb på CoddyKit med 88 korte kurser og 324 interaktive lektioner – med en AI-vejleder ved din side døgnet rundt.

Kurser
88
Lektioner
324
Interaktive trin
3,793
Gratis at komme i gang
Kursus 1
GET IT ONGoogle PlayDownload on theApp Store
Kursusindhold

88 kurser på denne sti

Alle kurser på React Academy-stien i læringsrækkefølge. Det første kursus er gratis.

1

A13 lektionerGratis

Kom i gang med React-grundlaget: komponenter, deklarativ UI og hvordan diffing effektivt opdaterer DOM'en. Opsæt derefter et projekt (f.eks. Vite), start en udviklingsserver, og render din første kom…

  1. 1React-start: koncepter og opsætning
  2. 2Projektopsætning: Vite, layout og dev-server
  3. 3Første komponent og rendering
Start gratis
2

A13 lektionerPRO

Lær JSX-reglerne: udtryk og attributter, returnering af fragments, rendering af lister med nøgler, enkle betingelser og muligheder for styling (CSS-moduler, inline-styles og class helpers).

  1. 1JSX-regler: udtryk, attributter og fragments
  2. 2Lister og keys samt betinget rendering
  3. 3Stylingmuligheder: CSS Modules, inline styles og class-hjælpere
Start gratisLås op med PRO
3

A24 lektionerPRO

Bliv fortrolig med browserudvidelsen React DevTools, så De effektivt kan inspicere komponenttræer, profilere renders og fejlsøge state og props.

  1. 1Installation og åbning af React DevTools
  2. 2Inspektion af komponenttræer og props
  3. 3Brug af fanen Profiler
  4. +1 flere
Start gratisLås op med PRO
4

A24 lektionerPRO

Opret glidende animationer for indtræden, udtræden og tilstandsændringer i React med CSS-overgange og keyframes – uden behov for et animationsbibliotek.

  1. 1CSS-overgange ved ændringer i React-state
  2. 2CSS-keyframe-animationer med React
  3. 3Brug af useLayoutEffect til målinger før animation
  4. +1 flere
Start gratisLås op med PRO
5

A24 lektionerPRO

Del state mellem søskendekomponenter ved at løfte det op, og forstå, hvornår prop drilling bliver et problem, der bør løses.

  1. 1Løftning af state: Principper og eksempler
  2. 2Prop drilling: Hvornår det skader, og hvornår det er fint
  3. 3Mønstre for kommunikation mellem søskendekomponenter
  4. +1 flere
Start gratisLås op med PRO
6

A24 lektionerPRO

Bevar React-tilstand på tværs af genindlæsninger af siden med localStorage, håndtér synkronisering på tværs af faner, og vælg den rette browserlagrings-API til hvert anvendelsestilfælde.

  1. 1Læsning og skrivning i localStorage i React
  2. 2Synkronisering af state med localStorage
  3. 3Håndtering af storage-hændelser på tværs af faner
  4. +1 flere
Start gratisLås op med PRO
7

A24 lektionerPRO

Byg et robust system til mørk tilstand med CSS custom properties, React context og media query'en prefers-color-scheme — uden et kortvarigt forkert tema.

  1. 1Registrering af systemets farveskema
  2. 2CSS-variabler til skift af tema
  3. 3React Context til tematilstand
  4. +1 flere
Start gratisLås op med PRO
8

A23 lektionerPRO

Videregiv data med props , angiv enkle defaults via destructuring, sammensæt brugergrænseflader med children , og foretræk komposition frem for nedarvning i genanvendelige præsentationskomponenter.

  1. 1Send props og kompositionsmønstre
  2. 2Props og komposition
  3. 3Genanvendelige præsentationskomponenter
Start gratisLås op med PRO
9

A23 lektionerPRO

Bliv fortrolig med useState og eventhåndtering: opdatér state korrekt, håndtér onClick/onChange, og gør Dem klar til kontrollerede inputs.

  1. 1Grundlæggende useState og korrekte opdateringer
  2. 2Hændelseshåndtering: onClick og onChange
  3. 3Kontrollerede kontra ukontrollerede inputs (introduktion)
Start gratisLås op med PRO
10

A23 lektionerPRO

Lær at bygge kontrollerede formularer med flere inputs, anvende grundlæggende validering og håndtere indsendelser problemfrit i React.

  1. 1Kontrollerede formularer med flere inputs
  2. 2Grundlæggende valideringsmønstre og submit-håndtering
  3. 3Fejlmeddelelser og touched/dirty-tilstande (vanilla)
Start gratisLås op med PRO
11

A23 lektionerPRO

Forstå client-side routing: hvordan SPA'er skifter visning uden fulde sideindlæsninger, grundlæggende paths og parametre samt aktive navigationstilstande.

  1. 1Koncepter for routing på klientsiden
  2. 2Indlejrede routes og route-parametre
  3. 3Navigationslinks og aktive tilstande
Start gratisLås op med PRO
12

A23 lektionerPRO

Bliv fortrolig med useRef : bevar værdier på tværs af renders uden at udløse nye renders, tilgå DOM-noder, og håndtér timere sikkert.

  1. 1Bevaring af værdier uden ny rendering
  2. 2Adgang til DOM-noder, måling og fokusering
  3. 3Mutable refs til timere og id'er
Start gratisLås op med PRO
13

A23 lektionerPRO

Hold koden ren med ESLint og React-regler, og formatér automatisk med Prettier . Tilføj scripts, og ret problemer hurtigt.

  1. 1ESLint + React-regler og Prettier-integration
  2. 2Filnavne, komponentgrænser og prop-navngivning
  3. 3Miljøvariabler og organisering af konfiguration
Start gratisLås op med PRO
14

A22 lektionerPRO

Bliv fortrolig med kontrollerede og ukontrollerede inputs: hvornår De bør vælge hver løsning, enkle ref-mønstre og sikre standardværdier.

  1. 1Afvejninger, ref-mønstre og standardværdier
  2. 2Prop getters og state reducer (let)
Start gratisLås op med PRO
15

B14 lektionerPRO

Lær, hvad StrictMode gør, hvilke advarsler det viser, og hvilke kodningskonventioner der gør React-apps lettere at vedligeholde.

  1. 1Hvad StrictMode gør
  2. 2Pure Components og undgåelse af sideeffekter i render
  3. 3Bedste praksis for keys og refs
  4. +1 flere
Start gratisLås op med PRO
16

B14 lektionerPRO

Render indhold uden for det overordnede DOM-hierarki med React Portals for at bygge modaler, tooltips og overlays.

  1. 1Hvad er React Portals
  2. 2Opbygning af en modal-komponent med Portals
  3. 3Håndtering af fokus og tastaturfælder i modaler
  4. +1 flere
Start gratisLås op med PRO
17

B14 lektionerPRO

Arbejd med props.children og React.Children-værktøjer, og implementér fleksible komponent-API'er baseret på slots.

  1. 1Grundlæggende om props.children
  2. 2React.Children-værktøjer
  3. 3Navngivne slots via object props
  4. +1 flere
Start gratisLås op med PRO
18

B14 lektionerPRO

Brug ukontrollerede inputfelter med useRef, aflæs værdier fra filinput, og håndtér filuploadforløb i React.

  1. 1Ukontrollerede inputs med useRef
  2. 2Filinput og læsning af fildata
  3. 3Brugerflade til træk-og-slip-filuploads
  4. +1 flere
Start gratisLås op med PRO
19

B14 lektionerPRO

Design Context-providere, der minimerer genrenderinger ved hjælp af memoization, opdelte contexts og selectormønstre.

  1. 1Opdeling af kontekster for at begrænse genrenderinger
  2. 2Memoisering af kontekstværdier med useMemo
  3. 3Mønsteret Context Selector
  4. +1 flere
Start gratisLås op med PRO
20

B14 lektionerPRO

Tilføj understøttelse af flere sprog i React-apps med react-i18next, administrér oversættelsesfiler, og håndtér skift af locale.

  1. 1Opsætning af react-i18next
  2. 2Brug af useTranslation-hooken
  3. 3Pluralisering og interpolation
  4. +1 flere
Start gratisLås op med PRO
21

B14 lektionerPRO

Integrér effektive browser-API'er — Clipboard, Geolocation, Notifications og IntersectionObserver — i React-komponenter med korrekt oprydning og håndtering af tilladelser.

  1. 1Clipboard API: Kopiér og indsæt i React
  2. 2Geolocation API i React-komponenter
  3. 3Notifications API og håndtering af tilladelser
  4. +1 flere
Start gratisLås op med PRO
22

B14 lektionerPRO

Forebyg unødvendige re-renders og API-kald ved at implementere debounce- og throttle-mønstre som genanvendelige React-hooks til søge-, scroll- og resize-hændelser.

  1. 1Hvorfor debounce og throttle er vigtige i brugergrænseflader
  2. 2Implementering af en brugerdefineret useDebounce-hook
  3. 3Implementering af en brugerdefineret useThrottle-hook
  4. +1 flere
Start gratisLås op med PRO
23

B14 lektionerPRO

Byg tilgængelige, tastaturnavigerbare autocomplete- og type-ahead-komponenter fra bunden med React state og refs — uden et bibliotek.

  1. 1Kontrolleret input med forslagsliste
  2. 2Tastaturnavigation i forslagslister
  3. 3Asynkrone forslag med debounce
  4. +1 flere
Start gratisLås op med PRO
24

B14 lektionerPRO

Byg effektive og fleksible formularer i React med React Hook Form: registrering, validering, visning af fejl og integration af schemas.

  1. 1Kom godt i gang med React Hook Form
  2. 2Valideringsregler og fejlmeddelelser
  3. 3Skemavalidering med Zod
  4. +1 flere
Start gratisLås op med PRO
25

B14 lektionerPRO

Brug Zustand til at håndtere global state i React-apps: stores, actions, selectors, persistence og integration med devtools.

  1. 1Opret dit første Zustand-store
  2. 2Selectorer og forebyggelse af unødvendige genrenderinger
  3. 3Bevaring af tilstand med Persist-middleware
  4. +1 flere
Start gratisLås op med PRO
26

B14 lektionerPRO

Gå videre end grundlæggende routes med indlejrede layouts, loaders, actions, beskyttede routes og håndtering af state i søgeparametre.

  1. 1Indlejrede routes og Outlet-layouts
  2. 2Loaders og actions (Data Router API)
  3. 3Beskyttede routes og auth guards
  4. +1 flere
Start gratisLås op med PRO
27

B14 lektionerPRO

Tilføj TypeScript til React-projekter: typ props, events, hooks, context og generiske komponenter med sikkerhed.

  1. 1Typning af props og komponenters returtyper
  2. 2Typning af events og refs i TypeScript
  3. 3Generiske komponenter og utility-typer
  4. +1 flere
Start gratisLås op med PRO
28

B14 lektionerPRO

Byg datatabeller i produktionskvalitet med sortering, filtrering, paginering og rækkevalg ved hjælp af TanStack Tables effektive headless-arkitektur.

  1. 1TanStack Tables filosofi og headless-design
  2. 2Definition af kolonner og gengivelse af rækker
  3. 3Sortering, filtrering og paginering
  4. +1 flere
Start gratisLås op med PRO
29

B14 lektionerPRO

Håndtér React state med Jotais minimalistiske atomære model — komponerbare atoms, der afleder værdier, håndterer asynkronitet og integreres perfekt med React Suspense.

  1. 1Atomer: Jotais tilstandsenhed
  2. 2Læsning og skrivning af atomer med useAtom
  3. 3Afledte og asynkrone atomer
  4. +1 flere
Start gratisLås op med PRO
30

B14 lektionerPRO

Brug SWR's stale-while-revalidate-strategi til hurtig og pålidelig datahentning med automatisk revalidering, mutationer og offline-understøttelse.

  1. 1SWR-grundbegreber: Stale-While-Revalidate
  2. 2useSWR-hook: Hentning, indlæsning og fejltilstande
  3. 3Mutationer og optimistiske opdateringer med SWR
  4. +1 flere
Start gratisLås op med PRO
31

B14 lektionerPRO

Byg tilgængelige, touchvenlige træk-og-slip-grænseflader i React med dnd-kit — sorterbare lister, kanban-tavler og trækinteraktioner på tværs af containere.

  1. 1dnd-kit-arkitektur og tilgængelighedsorienteret design
  2. 2DndContext, useDraggable og useDroppable
  3. 3SortableContext til lister, der kan omarrangeres
  4. +1 flere
Start gratisLås op med PRO
32

B14 lektionerPRO

Opret flydende, fjederfysikbaserede animationer i React med react-spring — fra simple værdiovergange til komplekse gestusstyrede interaktioner.

  1. 1React Spring i praksis: useSpring-hook
  2. 2Animerede komponenter og style-interpolation
  3. 3useTrail og useChain til sekvenser
  4. +1 flere
Start gratisLås op med PRO
33

B14 lektionerPRO

Implementér datafeeds i realtid i React med Server-Sent Events og pollingstrategier — og forstå afvejningerne i forhold til WebSockets til forskellige anvendelser.

  1. 1Sammenligning af SSE, WebSockets og polling
  2. 2Forbrug af SSE-streams i React med EventSource
  3. 3Mønsteret Long Polling og genforbindelseslogik
  4. +1 flere
Start gratisLås op med PRO
34

B13 lektionerPRO

Forstå useEffect : hvornår den kører i forhold til rendering, hvordan dependency-arrays styrer den, og hvordan De skriver sikre cleanups.

  1. 1Effekter vs. rendering, afhængigheder og oprydning
  2. 2Almindelige faldgruber: forældede closures og manglende afhængigheder
  3. 3Grundlæggende datahentning i effekter (afbrydelse og oprydning)
Start gratisLås op med PRO
35

B13 lektionerPRO

Design robuste data-UI'er: håndtér tilstandene indlæser , fejl , tom og succes med tydelig feedback og enkle skeletons.

  1. 1Loading-, fejl-, tom- og skeleton-tilstande
  2. 2Idéer til retry/backoff og annullering af forespørgsler
  3. 3Introduktion til fetch-hjælpere (uden tunge biblioteker)
Start gratisLås op med PRO
36

B13 lektionerPRO

Del state mellem komponenter, der ligger langt fra hinanden, med Context for at undgå prop drilling; opsæt en Provider, og læs værdier via useContext .

  1. 1Grundlæggende Context og undgåelse af prop drilling
  2. 2Grundlæggende useReducer og action-mønstre
  3. 3Context + Reducer: enkle state-containere
Start gratisLås op med PRO
37

B13 lektionerPRO

Udtræk genbrugelig logik i custom hooks : definér tydelige parametre, returnér stabile værdier/actions, og hold effects ryddelige.

  1. 1Udtrækning af logik til hooks: parametre og returværdier
  2. 2Navngivning, memoization og ryddelige effekter
  3. 3Test af custom hooks (forhåndsvisning)
Start gratisLås op med PRO
38

B13 lektionerPRO

Byg inkluderende UI'er: brug ægte semantik, tydelige labels og roller, og håndtér tastaturfokus for problemfri navigation.

  1. 1Semantik, labels, roller og fokus
  2. 2Tastaturinteraktioner og skip-links
  3. 3Grundlæggende test af tilgængelighed
Start gratisLås op med PRO
39

B14 lektionerPRO

Tilføj flydende animationer og overgange til React-apps med Framer Motion: motion-komponenter, varianter, gestures og layoutanimationer.

  1. 1Motion-komponenter og grundlæggende animationer
  2. 2Varianter til orkestrerede animationer
  3. 3Gesture-animationer: Hover, tap og træk
  4. +1 flere
Start gratisLås op med PRO
40

B13 lektionerPRO

Fang fejl under rendering med Error Boundaries, vis sikre fallback-visninger, og hold resten af appen responsiv.

  1. 1Error Boundary-komponenter (klassebaseret wrapper)
  2. 2Strategier til genoprettelse af UI og rapportering
  3. 3Sikring af effekter og oprydning
Start gratisLås op med PRO
41

B13 lektionerPRO

Tilføj lette typer til React-komponenter. Begynd med props, og udtræk derefter genbrugelige generics for at holde UI-koden sikker og tydelig.

  1. 1Typning af props og generics til genbrugelige komponenter
  2. 2Typning af events, refs og Context
  3. 3Trinvis migrering
Start gratisLås op med PRO
42

B13 lektionerPRO

Organisér React-apps: feature-first-mapper, små UI-primitiver kontra sammensatte komponenter, hooks og tests placeret sammen samt tydelige regler for refaktorering.

  1. 1Feature-mapper og UI- vs. kompositkomponenter
  2. 2Konventioner for hooks-mapper og samling af tests
  3. 3Retningslinjer for refaktorering
Start gratisLås op med PRO
43

B24 lektionerPRO

Gengiv tusindvis af listeelementer uden forringet ydeevne ved at bruge react-window til at virtualisere DOM-outputtet – så kun det, der er synligt i viewporten, gengives.

  1. 1Problemet med rendering af store lister
  2. 2FixedSizeList: Rendering af tusindvis af elementer
  3. 3VariableSizeList: Dynamiske rækkehøjder
  4. +1 flere
Start gratisLås op med PRO
44

B24 lektionerPRO

Håndtér asynkrone operationer idiomatisk i React med useEffect, useTransition, useDeferredValue og Suspense.

  1. 1Kapløbsbetingelser og oprydning i effekter
  2. 2useTransition til ikke-blokerende UI-opdateringer
  3. 3useDeferredValue til debounce af input
  4. +1 flere
Start gratisLås op med PRO
45

B24 lektionerPRO

Forstå render props og higher-order components som klassiske mønstre til genbrug af kode, før hooks erstattede dem.

  1. 1Mønsteret Render Props
  2. 2Higher-Order Components (HOCs) forklaret
  3. 3HOC vs. Render Props vs. Custom Hooks
  4. +1 flere
Start gratisLås op med PRO
46

B24 lektionerPRO

Forstå den subtile, men afgørende forskel mellem useEffect og useLayoutEffect — hvornår de hver især kører i forhold til DOM-commit — og brug dem korrekt.

  1. 1Renderingsfasen og DOM-commit
  2. 2Hvornår useLayoutEffect kører sammenlignet med useEffect
  3. 3Måling af DOM-elementer med useLayoutEffect
  4. +1 flere
Start gratisLås op med PRO
47

B24 lektionerPRO

Håndtér kompleks app-state med Redux Toolkit-slices og thunks samt RTK Query til caching og synkronisering af server-state.

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

B24 lektionerPRO

Forstå React Server Components, use()-hooket, Actions og andre React 19-API'er, der ændrer, hvordan data flyder gennem apps.

  1. 1React Server Components forklaret
  2. 2use()-hooken til asynkrone ressourcer
  3. 3React Actions og useActionState
  4. +1 flere
Start gratisLås op med PRO
49

B24 lektionerPRO

Håndtér server-state med TanStack Query: hentning, caching, genhentning i baggrunden, mutationer og paginering.

  1. 1Opsætning af React Query og QueryClient
  2. 2Caching, stale time og genhentning i baggrunden
  3. 3Mutationer med useMutation
  4. +1 flere
Start gratisLås op med PRO
50

B24 lektionerPRO

Skriv integrationstests med React Testing Library og end-to-end-tests med Playwright for at validere virkelige brugerforløb.

  1. 1Integrationstest med React Testing Library
  2. 2Test af asynkron brugerflade og API-kald med MSW
  3. 3Kom godt i gang med Playwright til React
  4. +1 flere
Start gratisLås op med PRO
51

B24 lektionerPRO

Dokumentér, udvikl og test React-UI-komponenter isoleret ved hjælp af Storybook med CSF3 stories og addons.

  1. 1Opsætning af Storybook i et React-projekt
  2. 2Skrivning af CSF3-stories
  3. 3Args, Controls og Actions-addonen
  4. +1 flere
Start gratisLås op med PRO
52

B24 lektionerPRO

Byg React-brugerflader, der opdateres live, med WebSockets og biblioteker som Socket.IO til chat, notifikationer og dashboards.

  1. 1Grundlæggende WebSocket i browseren
  2. 2Brug af Socket.IO med React
  3. 3Byg en chatkomponent i realtid
  4. +1 flere
Start gratisLås op med PRO
53

B24 lektionerPRO

Byg fuldt typesikre API'er uden schemas eller kodegenerering med tRPC — og del automatisk typer mellem Deres React-frontend og Node.js-backend.

  1. 1Problemet, som tRPC løser
  2. 2Opsætning af tRPC med React og Next.js
  3. 3Queries, mutationer og subscriptions
  4. +1 flere
Start gratisLås op med PRO
54

B24 lektionerPRO

Integrér GraphQL i React-applikationer med Apollo Client — forespørgsler, mutationer, caching og synkronisering af brugergrænsefladen med serverdata.

  1. 1GraphQL-grundlag for React-udviklere
  2. 2Opsætning af Apollo Client i React
  3. 3useQuery- og useMutation-hooks
  4. +1 flere
Start gratisLås op med PRO
55

B24 lektionerPRO

Byg hurtige, responsive brugergrænseflader, der viser resultater med det samme før serverens bekræftelse — med korrekt tilbagerulning ved fejl og strategier til konfliktløsning.

  1. 1Hvad er optimistisk brugergrænseflade, og hvornår bruges det
  2. 2Manuel implementering af optimistiske opdateringer
  3. 3Tilbagerulning ved fejl og konfliktløsning
  4. +1 flere
Start gratisLås op med PRO
56

B24 lektionerPRO

Pak og publicér genanvendelige React-komponentbiblioteker til npm — med håndtering af dobbelt ESM/CJS-output, peer dependencies, tree shaking og automatiseret versionering.

  1. 1Bundling med Rollup og tsup til biblioteker
  2. 2Dobbelt ESM- og CJS-package-output
  3. 3Peer-afhængigheder og tree shaking
  4. +1 flere
Start gratisLås op med PRO
57

B23 lektionerPRO

Forstå Reacts render - og commit -faser, hvornår komponenter opdateres, og hvornår memoization er nyttig.

  1. 1Ny rendering vs. commits: hvornår skal De optimere
  2. 2React.memo, useMemo, useCallback — i praksis
  3. 3Afledt state og undgåelse af ekstra rendering
Start gratisLås op med PRO
58

B23 lektionerPRO

Lær det grundlæggende i concurrent UI med useTransition : hold indtastning responsiv, vis en indikator for igangværende arbejde, og udskyd ikke-hastende opdateringer.

  1. 1useTransition til pending-UI (grundlæggende concurrent rendering)
  2. 2Suspense til asynkrone grænser (begreber)
  3. 3Fallbacks og opdeling af langsomme forløb
Start gratisLås op med PRO
59

B23 lektionerPRO

Indlæs kun det nødvendige ved at opdele skærme og widgets med code splitting. Brug React.lazy og Suspense til apps, der føles hurtigere.

  1. 1React.lazy og Suspense — lazy-komponenter
  2. 2Routebaseret og komponentniveau-baseret opdeling
  3. 3Bundles, cache og hints til preloading
Start gratisLås op med PRO
60

B23 lektionerPRO

Opsæt tests med Vitest/Jest og React Testing Library ; render komponenter, find elementer efter rolle/label, og kør dem i et jsdom-miljø.

  1. 1Opsætning af React Testing Library + Vitest/Jest
  2. 2Queries, events og assertions — formularer og asynkron UI
  3. 3Mocking af fetch og timere
Start gratisLås op med PRO
61

B24 lektionerPRO

Byg full-stack-webapps med Next.js 14+ App Router: filbaseret routing, layouts, server components og metadata.

  1. 1Filkonventioner i App Router
  2. 2Server- og klientkomponenter i Next.js
  3. 3Dynamiske routes og routegrupper
  4. +1 flere
Start gratisLås op med PRO
62

B24 lektionerPRO

Hent, cachelagr og genvalider data i Next.js App Router med fetch-indstillinger, unstable_cache og behovsbaseret genvalidering.

  1. 1fetch() med cacheindstillinger i Next.js
  2. 2unstable_cache og React cache()
  3. 3Incremental Static Regeneration (ISR)
  4. +1 flere
Start gratisLås op med PRO
63

B24 lektionerPRO

Tilføj authentificering til Next.js-apps med Auth.js (NextAuth v5): OAuth-udbydere, legitimationsoplysninger, sessioner og beskyttelse af routes.

  1. 1Opsætning af Auth.js i Next.js App Router
  2. 2Sessionshåndtering og useSession-hooken
  3. 3Credentials Provider og brugerdefineret login
  4. +1 flere
Start gratisLås op med PRO
64

B24 lektionerPRO

Overfør Deres React-viden til mobiludvikling ved at lære React Native-primitiver, styling, navigation og native enheds-API'er.

  1. 1React Native-kernekomponenter kontra web-DOM
  2. 2Styling med StyleSheet-API’en og Flexbox
  3. 3Navigation med Expo Router
  4. +1 flere
Start gratisLås op med PRO
65

B24 lektionerPRO

Deploy React- og Next.js-apps til produktion med Vercel, AWS S3/CloudFront og Docker-containere via CI/CD-pipelines.

  1. 1Deployment til Vercel: konfigurationsfrit og med preview-URL’er
  2. 2Hosting af en React-SPA på AWS S3 og CloudFront
  3. 3Dockerisering af en React/Next.js-app
  4. +1 flere
Start gratisLås op med PRO
66

B24 lektionerPRO

Brug React 19 Server Actions og Next.js-form actions til at håndtere mutationer på serversiden — og undgå API-ruter i almindelige formularmønstre med progressiv forbedring.

  1. 1Server Actions i React 19 og Next.js
  2. 2Form Actions: Erstatning af API-ruter til mutationer
  3. 3useActionState og useFormStatus
  4. +1 flere
Start gratisLås op med PRO
67

B24 lektionerPRO

Styrk React-applikationer mod XSS, CSRF og andre sårbarheder — med praktisk vejledning i Content Security Policy, håndtering af secrets og sikker rendering.

  1. 1XSS i React: dangerouslySetInnerHTML og tredjepartsscripts
  2. 2CSRF-beskyttelse i React- og API-opsætninger
  3. 3Content Security Policy til React-apps
  4. +1 flere
Start gratisLås op med PRO
68

B24 lektionerPRO

Byg et skalerbart design tokens-system, der driver React-komponentbiblioteker med flere temaer — fra definition af tokens til CSS-variabler, Tailwind-integration og Style Dictionary.

  1. 1Hvad er designtokens, og hvorfor er de vigtige
  2. 2Style Dictionary: Transformation og generering af tokens
  3. 3Tokens i Tailwind, CSS-variabler og CSS-in-JS
  4. +1 flere
Start gratisLås op med PRO
69

B24 lektionerPRO

Byg desktopapplikationer på tværs af platforme med Electron og en React-frontend — herunder IPC-kommunikation, native API'er og pakning til distribution.

  1. 1Electron-arkitektur: Main- og renderer-processer
  2. 2Opsætning af React med Electron
  3. 3IPC-kommunikation mellem processer
  4. +1 flere
Start gratisLås op med PRO
70

B23 lektionerPRO

Byg compound components: Forælderkomponenten leverer context, og børnene bruger den til fleksible API'er.

  1. 1Koordinering mellem forælder og børn via Context
  2. 2API-ergonomi med composition
  3. 3Slots-mønster med tydeligt navngivne børn
Start gratisLås op med PRO
71

B23 lektionerPRO

Byg store formularer med små, robuste dele: field arrays, dynamiske sektioner og enkle valideringsforløb.

  1. 1Felt-arrays, dynamiske formularer og valideringsforløb
  2. 2Asynkron validering og afhængige felter
  3. 3Performance-tricks til store formularer
Start gratisLås op med PRO
72

B23 lektionerPRO

Gå videre end det grundlæggende: indlejrede layouts, konceptuelle route loaders og enkle idéer til prefetching, der giver mere problemfri navigation.

  1. 1Indlejrede layouts, loaders (begreb) og prefetching
  2. 2Auth-forløb og beskyttede routes
  3. 3Gendannelse af scroll og Not-Found-routes
Start gratisLås op med PRO
73

B23 lektionerPRO

Forstå, hvad der hører til i servercachen, og hvad der er lokal UI-state. Hent og opdatér data, og undgå at blande ansvarsområder.

  1. 1Skelnen mellem serverdata og lokal UI-state
  2. 2Normalisering og optimistiske opdateringer (begreber)
  3. 3Synkroniseringsmønstre uden tunge biblioteker
Start gratisLås op med PRO
74

B23 lektionerPRO

Opret tilgængelige overlays: render med portals, hold fokus inde i dem, og understøt hurtig lukning med Escape eller klik på baggrunden.

  1. 1Portals, fokusfælde og lukning med Escape
  2. 2Global overlay-manager (Context + Reducer)
  3. 3Meddelelser for tilgængelighed (aria-live)
Start gratisLås op med PRO
75

B23 lektionerPRO

Gør apps klar til produktion: dev- og prod-builds, source maps, enkle environment variables og små kontroller, så De kan udgive med tryghed.

  1. 1Dev-/prod-builds, source maps og miljøer
  2. 2Bundle-analyse og fjernelse af ubrugt kode
  3. 3Grundlæggende CI: lint → test → build
Start gratisLås op med PRO
76

C14 lektionerPRO

Bliv fortrolig med imperative React-API'er – eksponér brugerdefinerede komponentinstansværdier for overordnede komponenter med forwardRef og useImperativeHandle i situationer, hvor deklarative mønstr…

  1. 1forwardRef: Eksponering af DOM-referencer for forældre
  2. 2useImperativeHandle: Tilpassede instansværdier
  3. 3Opbygning af et imperativt komponent-API
  4. +1 flere
Start gratisLås op med PRO
77

C14 lektionerPRO

Lær React 18's useSyncExternalStore-hook at kende – den korrekte måde at synkronisere React-komponenter med eksterne tilstandskilder som browser-API'er, globale stores og tredjepartsbiblioteker.

  1. 1Problemet med abonnementer på eksterne stores
  2. 2useSyncExternalStore-API'et og parametre
  3. 3Abonnementer på browser-API'er
  4. +1 flere
Start gratisLås op med PRO
78

C14 lektionerPRO

Opdel store React-frontends i micro-frontends, der kan deployes uafhængigt, ved hjælp af Module Federation og single-spa.

  1. 1Mikrofrontend-koncepter og afvejninger
  2. 2Module Federation med Webpack 5
  3. 3Delt tilstand og routing mellem MFE’er
  4. +1 flere
Start gratisLås op med PRO
79

C14 lektionerPRO

Forstå mekanismerne bag server-side rendering, hydration, selektiv hydration og streaming af HTML med React's renderToPipeableStream.

  1. 1Sådan fungerer React SSR under motorhjelmen
  2. 2Hydration-fejl: årsager og løsninger
  3. 3Selektiv hydration og streaming af HTML
  4. +1 flere
Start gratisLås op med PRO
80

C14 lektionerPRO

Styrk Deres React- og TypeScript-kompetencer med diskriminerede unions, mapped types, conditional types og typesikre komponent-API'er.

  1. 1Diskriminerede unions til komponentvarianter
  2. 2Betingede og mappede typer i React
  3. 3Polymorfe komponenter med 'as'-prop
  4. +1 flere
Start gratisLås op med PRO
81

C14 lektionerPRO

Mål og forbedr Core Web Vitals (LCP, INP, CLS) i React-apps med profileringsværktøjer, bundle-analyse og målrettede optimeringer.

  1. 1Måling af Core Web Vitals i React-apps
  2. 2Analyse af bundles og strategi for kodedeling
  3. 3Billed- og fontoptimering i React
  4. +1 flere
Start gratisLås op med PRO
82

C14 lektionerPRO

Organisér flere React-apps og delte biblioteker i et monorepo med Nx, smart opgaveplanlægning og affected-baseret CI.

  1. 1Oprettelse af et Nx-monorepo med React-apps
  2. 2Delte biblioteker og interne pakker
  3. 3Nx Affected-kommandoer og caching
  4. +1 flere
Start gratisLås op med PRO
83

C14 lektionerPRO

Undgå fuld-side-hydration ved at tage Islands-arkitekturen i brug — og hydrér kun de interaktive React-komponenter, der har brug for det, med Astro.

  1. 1Problemet med fuld hydration
  2. 2Islands-arkitektur: Selektiv hydration
  3. 3Opsætning af Astro og React Islands
  4. +1 flere
Start gratisLås op med PRO
84

C14 lektionerPRO

Integrér WebAssembly-moduler i React-applikationer til beregningstunge opgaver — fra Rust WASM-moduler til delt hukommelse og worker-tråde.

  1. 1Hvad er WebAssembly, og hvor passer React ind
  2. 2Indlæsning af WASM-moduler i React
  3. 3Fra Rust til WASM med wasm-pack og React
  4. +1 flere
Start gratisLås op med PRO
85

C14 lektionerPRO

Servér React-applikationer fra edge med latenstid under et millisekund — ved hjælp af Cloudflare Workers, streaming-SSR og edge-native cachingstrategier.

  1. 1Hvad er edge-rendering, og hvorfor er det vigtigt
  2. 2React på Cloudflare Workers med Hono
  3. 3Streamet SSR fra edge
  4. +1 flere
Start gratisLås op med PRO
86

C14 lektionerPRO

Instrumentér React-applikationer med OpenTelemetry for at indsamle traces, måle reel brugeroplevelse og sammenkæde frontend-hændelser med backend-spans.

  1. 1Frontend-observability: Hvad og hvorfor
  2. 2OpenTelemetry-traces fra browseren
  3. 3Overvågning af rigtige brugere og Web Vitals
  4. +1 flere
Start gratisLås op med PRO
87

C14 lektionerPRO

Brug React 18 streaming-SSR og Suspense til progressivt at levere HTML til browseren — og forbedr den oplevede ydeevne uden at vente på, at alle data indlæses.

  1. 1Streaming i React 18: Sådan fungerer renderToPipeableStream
  2. 2Suspense-grænser og streamingprioritet
  3. 3Progressiv hydration med selektiv hydration
  4. +1 flere
Start gratisLås op med PRO
88

C14 lektionerPRO

Implementér Webpack Module Federation for at bygge og deploye React-micro frontends uafhængigt — med deling af dependencies, state og routing på tværs af fjernapplikationer.

  1. 1Module Federation: Dynamiske runtime-imports
  2. 2Konfiguration af host- og remote-React-apps
  3. 3Deling af state og routing mellem remotes
  4. +1 flere
Start gratisLås op med PRO
CoddyKit PRO

Lås op for alle 88 kurser på denne sti og alle kurser på alle andre stier

AI-vejleder, certificeringseksamen og certifikat. Fungerer på web, iOS og Android.

Se alle abonnementer
Årligt$29.90 / årCa. $2.49 om månedenBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for altid.
Kursusoversigt

Byg ægte grænseflader med React

React er JavaScript-biblioteket, der i dag definerer, hvordan de fleste brugergrænseflader til produktion bygges – fra enkeltsideapplikationer og Next.js-websteder til mobil- og desktopapplikationer på tværs af platforme. Dette læringsforløb dækker hele disciplinen: komponentarkitektur, tilstandshåndtering, datahentning, ydeevne, testning og udrulning. Det bygger på, hvordan React faktisk fungerer – reconciler, fibermodellen og hooks-semantik – ikke kun på den synlige API.

Det lærer du

Du begynder med JSX, props, tilstand og kontrollerede komponenter og går derefter videre til useEffect, useRef og useReducer. De praktiske kurser dækker routing med React Router v6, formularhåndtering med React Hook Form, servertilstand med React Query og SWR samt global tilstand med Redux Toolkit, Zustand og Jotai. Du arbejder med TypeScript i React, skriver integrations- og E2E-test, bygger designsystemer med Storybook, håndterer brugergrænseflader i realtid over WebSockets og udgiver typesikre API'er med tRPC. Forløbet omfatter også Next.js App Router, serverkomponenter, serverhandlinger og godkendelse med NextAuth.js.

Læringsforløbet

Femoghalvfems kurser går fra A1 til C1. Kurserne på A1- og A2-niveau etablerer grundlaget i React, JSX-rendering, CSS-animationer, vedvarende lagring i lokalt lager og mørk tilstand. Kurserne på B1-niveau opbygger sikkerhed med kontekstpatterner, i18n, React Spring, Framer Motion, træk-og-slip med dnd-kit og komplekse datatabeller med TanStack Table. Kurserne på B2-niveau tager fat på rendering og memoization, Suspense, kodedeling, React Native for React-udviklere, udrulning til Vercel og AWS samt Electron til desktopapplikationer. C1-niveauet afsluttes med avancerede emner: mikrofrontend-arkitektur, dybdegående gennemgang af SSR og hydrering, Module Federation, ø-arkitektur med Astro, integration af WebAssembly, edge-rendering med Cloudflare Workers og OpenTelemetry til observerbarhed i frontend.

Sådan fungerer det

Hvert kursus er opdelt i korte, fokuserede lektioner, som du gennemfører i den indbyggede kodeeditor med feedback i realtid. En AI-underviser er tilgængelig, når du sidder fast i et koncept eller en test, der ikke består. Du kan gennemføre forløbet i rækkefølge eller springe til det niveau, der passer til din nuværende erfaring.

Værktøjer

Øv dig med AI – læs ikke bare

Få mere ud af din læring med AI-drevne værktøjer og funktioner

AI-kodegeneratorGenerér kode med AIAI-fejlretningFind og ret fejl i kodePROAI-indsigtDybdegående kodeanalysePROAI-chatChat med en AI-underviserStil et superspørgsmålFå svar på ekspertniveauPROOpret lektionAI-drevet værktøj til at oprette lektionerPROStart certificeringseksamenFå dit certifikatPROKodeeditorSkriv og kør kodeStart udfordringAfprøv dine færdigheder

Sådan lærer du

  1. 01

    Interaktive lektioner

    Praktiske kodeøvelser med feedback i realtid

  2. 02

    AI-underviser

    Få øjeblikkelig hjælp fra vores AI, når du sidder fast

  3. 03

    Indbygget editor

    Skriv og kør kode direkte i din browser

  4. 04

    Certifikat

    Få et certifikat, når du gennemfører kurset

Udforsk videre

Relaterede 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 logoFirebase-godkendelse og apps med realtidsdatabaseMaster 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…
Ofte stillede spørgsmål

Ofte stillede spørgsmål

Er React Academy-kurset gratis?

Ja. Du kan begynde på React Academy-kurset gratis og gennemføre de interaktive lektioner uden omkostninger. Et valgfrit PRO-abonnement giver adgang til avancerede AI-værktøjer og et certifikat, der kan deles.

Skal jeg have erfaring på forhånd for at lære React?

Nej. Kurset begynder med det grundlæggende og bevæger sig gradvist videre til mere avancerede emner, så du kan starte uden tidligere erfaring med React.

Hvordan lærer jeg React på CoddyKit?

Du lærer ved at øve dig. Korte interaktive lektioner kombinerer en tydelig forklaring med en praktisk kodeøvelse, der kører i realtid, og en AI-vejleder, der er tilgængelig døgnet rundt, hjælper dig personligt, når du sidder fast.

Får jeg et certifikat, når jeg gennemfører React Academy?

Ja. PRO-brugere kan tage en eksamen og få et certifikat for gennemførelse af React Academy-kurset, som kan deles og indeholder en verificerbar kode.

Kan jeg lære React på min telefon?

Ja. CoddyKit er tilgængeligt på nettet og som indbyggede iOS- og Android-apps, så du kan lære React på enhver enhed, og dine fremskridt synkroniseres på tværs af dem.

Hvad koster CoddyKit PRO?

Det første kursus på React Academy-stien er gratis. CoddyKit PRO giver adgang til alle kurser: $5.90 om ugen, $7.90 om måneden, $29.90 om året eller $69.99 én gang for livstidsadgang uden fornyelser.

Hvor lang tid tager det at gennemføre React Academy?

React Academy har 88 kurser og 324 lektioner. De fleste lektioner tager cirka 5–10 minutter, så hele stien kræver omkring 38 timers praktisk øvelse i dit eget tempo.

Start på React Academy nu

Slut dig til tusindvis af kursister, der mestrer programmering med AI-drevne lektioner.

Start gratisSe alle kurser