PricingLoginStart free
React Academy logo
ReactNybörjareWebbMobilNivåer A1 → C122 språk

React Academy

Bemästra ReactJS för att bygga dynamiska användargränssnitt med ReactJS Academy. En lärstig från CoddyKit med 88 korta kurser och 324 interaktiva lektioner, med en AI-handledare till hands dygnet runt.

Kurser
88
Lektioner
324
Interaktiva steg
3,793
Gratis att börja
Kurs 1
GET IT ONGoogle PlayDownload on theApp Store
Kursplan

88 kurser i den här lärvägen

Alla kurser i lärvägen React Academy, i rätt ordning. Den första är gratis.

1

A13 lektionerGratis

Kom igång med grunderna i React: komponenter, deklarativt UI och hur diffning uppdaterar DOM effektivt. Konfigurera sedan ett projekt (t.ex. Vite), starta en utvecklingsserver och rendera er första k…

  1. 1React-start: koncept och konfiguration
  2. 2Projektkonfiguration: Vite, layout och utvecklingsserver
  3. 3Första komponenten och rendering
Börja lära dig gratis
2

A13 lektionerPRO

Lär er JSX-regler: uttryck och attribut, returnera fragments, rendera listor med keys, enkla villkor och alternativ för styling (CSS modules, inline styles, class helpers).

  1. 1JSX-regler: uttryck, attribut och fragments
  2. 2Listor och keys; villkorsstyrd rendering
  3. 3Stylingalternativ: CSS Modules, inline-stilar och class helpers
Börja lära dig gratisLås upp med PRO
3

A24 lektionerPRO

Bemästra webbläsartillägget React DevTools för att inspektera komponentträd, profilera renderingar och effektivt felsöka state och props.

  1. 1Installera och öppna React DevTools
  2. 2Inspektera komponentträd och props
  3. 3Använda fliken Profiler
  4. +1 till
Börja lära dig gratisLås upp med PRO
4

A24 lektionerPRO

Skapa mjuka in-, ut- och tillståndsändringsanimationer i React med CSS-övergångar och keyframes – utan något animationsbibliotek.

  1. 1CSS-övergångar vid ändringar i React-state
  2. 2CSS-nyckelbildsanimationer med React
  3. 3Använd useLayoutEffect för mätningar före animering
  4. +1 till
Börja lära dig gratisLås upp med PRO
5

A24 lektionerPRO

Dela state mellan syskonkomponenter genom att lyfta upp det och förstå när prop drilling blir ett problem som bör lösas.

  1. 1Lyfta state: principer och exempel
  2. 2Prop drilling: när det skadar och när det fungerar
  3. 3Mönster för kommunikation mellan syskon
  4. +1 till
Börja lära dig gratisLås upp med PRO
6

A24 lektionerPRO

Bevara React-tillstånd mellan omladdningar av sidan med localStorage, hantera synkronisering mellan flikar och välj rätt webbläsarlagrings-API för varje användningsfall.

  1. 1Läsa och skriva localStorage i React
  2. 2Synkronisera tillstånd med localStorage
  3. 3Hantera lagringshändelser mellan flikar
  4. +1 till
Börja lära dig gratisLås upp med PRO
7

A24 lektionerPRO

Bygg ett robust system för mörkt läge med CSS custom properties, React context och mediefrågan prefers-color-scheme – utan att fel tema visas tillfälligt.

  1. 1Identifiera systemets färgschema
  2. 2CSS-variabler för temaväxling
  3. 3React Context för temats tillstånd
  4. +1 till
Börja lära dig gratisLås upp med PRO
8

A23 lektionerPRO

Skicka data med props , ange enkla defaults via destructuring, komponera UI:n med children och föredra komposition framför arv för återanvändbara presentational components.

  1. 1Att skicka props och kompositionsmönster
  2. 2Props och komposition
  3. 3Återanvändbara presentational components
Börja lära dig gratisLås upp med PRO
9

A23 lektionerPRO

Bemästra useState och händelsehantering: uppdatera state korrekt, hantera onClick/onChange och förbered er för kontrollerade inmatningsfält.

  1. 1Grunderna i useState och korrekta uppdateringar
  2. 2Händelsehantering: onClick och onChange
  3. 3Kontrollerade och okontrollerade inmatningsfält (introduktion)
Börja lära dig gratisLås upp med PRO
10

A23 lektionerPRO

Lär er att bygga kontrollerade formulär med flera inmatningsfält, tillämpa grundläggande validering och hantera inskickning smidigt i React.

  1. 1Kontrollerade formulär med flera inmatningsfält
  2. 2Grundläggande valideringsmönster och hantering av submit
  3. 3Felmeddelanden och touched/dirty-tillstånd (vanilla)
Börja lära dig gratisLås upp med PRO
11

A23 lektionerPRO

Förstå routing på klientsidan: hur SPA:er byter vy utan att läsa in hela sidan igen, grundläggande sökvägar och parametrar samt aktiva navigeringstillstånd.

  1. 1Koncept för routing på klientsidan
  2. 2Nästlade routes och route-parametrar
  3. 3Navigeringslänkar och aktiva tillstånd
Börja lära dig gratisLås upp med PRO
12

A23 lektionerPRO

Bemästra useRef : bevara värden mellan renderingar utan att orsaka nya renderingar, få åtkomst till DOM-noder och hantera timers säkert.

  1. 1Spara värden utan omrendering
  2. 2Åtkomst till DOM-noder, mätning och fokusering
  3. 3Föränderliga refs för timers och id:n
Börja lära dig gratisLås upp med PRO
13

A23 lektionerPRO

Håll koden ren med ESLint och React-regler och formatera automatiskt med Prettier . Lägg till skript och åtgärda problem snabbt.

  1. 1ESLint + React-regler och Prettier-integration
  2. 2Filnamn, komponentgränser och prop-namn
  3. 3Miljövariabler och konfigurationsstruktur
Börja lära dig gratisLås upp med PRO
14

A22 lektionerPRO

Bemästra kontrollerade och okontrollerade inmatningsfält: när ni bör välja respektive variant, enkla ref-mönster och säkra standardvärden.

  1. 1Avvägningar, ref-mönster och standardvärden
  2. 2Prop-getters och state reducer (lättviktigt)
Börja lära dig gratisLås upp med PRO
15

B14 lektionerPRO

Lär dig vad StrictMode gör, vilka varningar det visar och vilka kodkonventioner som gör React-appar enklare att underhålla.

  1. 1Vad StrictMode gör
  2. 2Rena komponenter och undvika sidoeffekter vid rendering
  3. 3Bästa praxis för key och ref
  4. +1 till
Börja lära dig gratisLås upp med PRO
16

B14 lektionerPRO

Rendera innehåll utanför den överordnade DOM-hierarkin med React Portals för att bygga modaler, verktygstips och överlagringar.

  1. 1Vad är React Portals?
  2. 2Bygga en modal komponent med Portals
  3. 3Hantera fokus och tangentbordsfällor i modaler
  4. +1 till
Börja lära dig gratisLås upp med PRO
17

B14 lektionerPRO

Arbeta med props.children och React.Children-verktyg och implementera flexibla komponent-API:er baserade på slots.

  1. 1Grunderna i props.children
  2. 2Verktyg i React.Children
  3. 3Namngivna slots via objekt-props
  4. +1 till
Börja lära dig gratisLås upp med PRO
18

B14 lektionerPRO

Använd okontrollerade inmatningsfält med useRef, läs värden från filinmatning och hantera filuppladdningsflöden i React.

  1. 1Okontrollerade indatafält med useRef
  2. 2Filindata och läsa fildata
  3. 3Gränssnitt för filuppladdning med dra och släpp
  4. +1 till
Börja lära dig gratisLås upp med PRO
19

B14 lektionerPRO

Utforma Context-providers som minimerar omrenderingar med memoization, uppdelade contexts och selektormönster.

  1. 1Dela upp contexts för att begränsa omrenderingar
  2. 2Memoisera context-värden med useMemo
  3. 3Mönstret context selector
  4. +1 till
Börja lära dig gratisLås upp med PRO
20

B14 lektionerPRO

Lägg till stöd för flera språk i React-appar med react-i18next, hantera översättningsfiler och byt locale.

  1. 1Konfigurera react-i18next
  2. 2Använda useTranslation-hooken
  3. 3Pluralisering och interpolation
  4. +1 till
Börja lära dig gratisLås upp med PRO
21

B14 lektionerPRO

Integrera kraftfulla webbläsar-API:er – Clipboard, Geolocation, Notifications och IntersectionObserver – i React-komponenter med korrekt städning och behörighetshantering.

  1. 1Clipboard API: kopiera och klistra in i React
  2. 2Geolocation API i React-komponenter
  3. 3Notifications API och behörighetshantering
  4. +1 till
Börja lära dig gratisLås upp med PRO
22

B14 lektionerPRO

Förhindra överdrivna omrenderingar och API-anrop genom att implementera debounce- och throttle-mönster som återanvändbara React-hooks för sök-, scrollnings- och storleksändringshändelser.

  1. 1Varför debounce och throttle är viktiga i gränssnitt
  2. 2Implementera en anpassad useDebounce-hook
  3. 3Implementera en anpassad useThrottle-hook
  4. +1 till
Börja lära dig gratisLås upp med PRO
23

B14 lektionerPRO

Bygg tillgängliga, tangentbordsnavigerbara komponenter för autokomplettering och sökning medan ni skriver från grunden med React state och refs – utan bibliotek.

  1. 1Kontrollerat inmatningsfält med förslagslista
  2. 2Tangentbordsnavigering i förslagslistor
  3. 3Asynkrona förslag med debounce
  4. +1 till
Börja lära dig gratisLås upp med PRO
24

B14 lektionerPRO

Bygg högpresterande och flexibla formulär i React med React Hook Form: registrering, validering, visning av fel och integrering av scheman.

  1. 1Kom igång med React Hook Form
  2. 2Valideringsregler och felmeddelanden
  3. 3Schemavalidering med Zod
  4. +1 till
Börja lära dig gratisLås upp med PRO
25

B14 lektionerPRO

Använd Zustand för att hantera globalt state i React-appar: stores, actions, selectors, beständig lagring och integrering med devtools.

  1. 1Skapa din första Zustand-store
  2. 2Selectors och förhindra onödiga omrenderingar
  3. 3Beständiggöra state med persist-middleware
  4. +1 till
Börja lära dig gratisLås upp med PRO
26

B14 lektionerPRO

Gå bortom grundläggande routes med nästlade layouter, loaders, actions, skyddade routes och hantering av state i sökparametrar.

  1. 1Nästlade routes och Outlet-layouts
  2. 2Loaders och actions (Data Router API)
  3. 3Skyddade routes och auth guards
  4. +1 till
Börja lära dig gratisLås upp med PRO
27

B14 lektionerPRO

Lägg till TypeScript i React-projekt: typa props, händelser, hooks, context och generiska komponenter med säkerhet.

  1. 1Typning av props och komponenters returtyper
  2. 2Typning av events och refs i TypeScript
  3. 3Generiska komponenter och utility types
  4. +1 till
Börja lära dig gratisLås upp med PRO
28

B14 lektionerPRO

Bygg produktionsklara datatabeller med sortering, filtrering, sidindelning och radval med TanStack Tables kraftfulla headless-arkitektur.

  1. 1TanStack Tables filosofi och headless-design
  2. 2Definiera kolumner och rendera rader
  3. 3Sortering, filtrering och paginering
  4. +1 till
Börja lära dig gratisLås upp med PRO
29

B14 lektionerPRO

Hantera React-tillstånd med Jotais minimala atommodell – komponerbara atomer som härleder värden, hanterar asynkronitet och integreras perfekt med React Suspense.

  1. 1Atomer: Jotais tillståndsenhet
  2. 2Läsa och skriva atomer med useAtom
  3. 3Härledda och asynkrona atomer
  4. +1 till
Börja lära dig gratisLås upp med PRO
30

B14 lektionerPRO

Använd SWR:s stale-while-revalidate-strategi för snabb och tillförlitlig datahämtning med automatisk omvalidering, mutationer och offlinestöd.

  1. 1SWR-grunder: stale-while-revalidate
  2. 2useSWR-hooken: hämtning, laddning och feltillstånd
  3. 3Mutationer och optimistiska uppdateringar med SWR
  4. +1 till
Börja lära dig gratisLås upp med PRO
31

B14 lektionerPRO

Bygg tillgängliga och pekskärmsvänliga dra och släpp-gränssnitt i React med dnd-kit – sorterbara listor, kanban-tavlor och dra-och-släpp-interaktioner mellan flera containrar.

  1. 1dnd-kit-arkitektur och tillgänglighetsfokuserad design
  2. 2DndContext, useDraggable och useDroppable
  3. 3SortableContext för omordningsbara listor
  4. +1 till
Börja lära dig gratisLås upp med PRO
32

B14 lektionerPRO

Skapa följsamma, fysikbaserade fjäderanimationer i React med react-spring – från enkla värdeövergångar till komplexa geststyrda interaktioner.

  1. 1React Spring-grunder: useSpring-hooken
  2. 2Animerade komponenter och stilinterpolation
  3. 3useTrail och useChain för sekvenser
  4. +1 till
Börja lära dig gratisLås upp med PRO
33

B14 lektionerPRO

Implementera dataflöden i realtid i React med Server-Sent Events och pollingstrategier – och förstå avvägningarna jämfört med WebSockets för olika användningsområden.

  1. 1Jämförelse mellan SSE, WebSockets och polling
  2. 2Använda SSE-strömmar i React med EventSource
  3. 3Mönstret long polling och återanslutningslogik
  4. +1 till
Börja lära dig gratisLås upp med PRO
34

B13 lektionerPRO

Förstå useEffect : när den körs jämfört med rendering, hur beroendearrayen styr den och hur ni skriver säkra cleanup-funktioner.

  1. 1Effekter jämfört med renderingar, beroenden och rensning
  2. 2Vanliga fallgropar: inaktuella closures och saknade beroenden
  3. 3Grunderna i hämtning i effekter (avbrytning och rensning)
Börja lära dig gratisLås upp med PRO
35

B13 lektionerPRO

Utforma robusta data-UI:er: hantera tillstånden loading , error , empty och success med tydlig återkoppling och enkla skeletons.

  1. 1Laddnings-, fel-, tomma och skelettillstånd
  2. 2Idéer för omförsök och backoff samt avbrytning av anrop
  3. 3Introduktion till hjälpfunktioner för fetch (utan tunga bibliotek)
Börja lära dig gratisLås upp med PRO
36

B13 lektionerPRO

Dela state mellan avlägsna komponenter med Context för att undvika prop drilling; konfigurera en Provider och läs värden via useContext .

  1. 1Grunderna i Context och att undvika prop drilling
  2. 2Grunderna i useReducer och actionmönster
  3. 3Context + Reducer: enkla tillståndsbehållare
Börja lära dig gratisLås upp med PRO
37

B13 lektionerPRO

Extrahera återanvändbar logik till egna hooks : definiera tydliga parametrar, returnera stabila värden och åtgärder och håll effekterna rena.

  1. 1Flytta logik till hooks: parametrar och returvärden
  2. 2Namngivning, memoization och välskötta effekter
  3. 3Testa anpassade hooks (förhandsvisning)
Börja lära dig gratisLås upp med PRO
38

B13 lektionerPRO

Bygg inkluderande UI:er: använd korrekt semantik, tydliga etiketter och roller och hantera tangentbordsfokus för smidig navigering.

  1. 1Semantik, etiketter, roller och fokus
  2. 2Tangentbordsinteraktioner och hopplänkar
  3. 3Grunderna i att testa tillgänglighet
Börja lära dig gratisLås upp med PRO
39

B14 lektionerPRO

Lägg till följsamma animationer och övergångar i React-appar med Framer Motion: motion-komponenter, varianter, gester och layoutanimationer.

  1. 1Motion-komponenter och grundläggande animationer
  2. 2Variants för samordnade animationer
  3. 3Gestanimationer: hover, tap och drag
  4. +1 till
Börja lära dig gratisLås upp med PRO
40

B13 lektionerPRO

Fånga fel under rendering med Error Boundaries, visa säkra reservvyer och håll resten av appen responsiv.

  1. 1Error Boundary-komponenter (klassbaserad wrapper)
  2. 2Återställning av gränssnitt och rapporteringsstrategier
  3. 3Skydda effekter och rensning
Börja lära dig gratisLås upp med PRO
41

B13 lektionerPRO

Lägg till enkla typer i React-komponenter. Börja med props och extrahera sedan återanvändbara generics för att hålla UI-koden säker och tydlig.

  1. 1Typning av props och generics för återanvändbara komponenter
  2. 2Typning av händelser, refs och Context
  3. 3Stegvis migrering
Börja lära dig gratisLås upp med PRO
42

B13 lektionerPRO

Organisera React-appar: feature-baserade mappar, små UI-primitiver kontra sammansatta komponenter, hooks och tester placerade tillsammans samt tydliga regler för refaktorering.

  1. 1Funktionsmappar och UI- kontra sammansatta komponenter
  2. 2Konventioner för hooks-mappar och samlokaliserade tester
  3. 3Riktlinjer för refaktorering
Börja lära dig gratisLås upp med PRO
43

B24 lektionerPRO

Rendera tusentals listobjekt utan försämrad prestanda genom att använda react-window för att virtualisera DOM-utdata – så att endast det som syns i visningsområdet renderas.

  1. 1Problemet med rendering av stora listor
  2. 2FixedSizeList: rendera tusentals objekt
  3. 3VariableSizeList: dynamiska radhöjder
  4. +1 till
Börja lära dig gratisLås upp med PRO
44

B24 lektionerPRO

Hantera asynkrona operationer på idiomatiskt sätt i React med useEffect, useTransition, useDeferredValue och Suspense.

  1. 1Race conditions och rensning av effekter
  2. 2useTransition för icke-blockerande UI-uppdateringar
  3. 3useDeferredValue för debouncing av inmatning
  4. +1 till
Börja lära dig gratisLås upp med PRO
45

B24 lektionerPRO

Förstå render props och higher-order components som klassiska mönster för kodåteranvändning innan hooks ersatte dem.

  1. 1Mönstret render props
  2. 2Higher-Order Components (HOCs) förklarade
  3. 3HOC jämfört med render props och custom hooks
  4. +1 till
Börja lära dig gratisLås upp med PRO
46

B24 lektionerPRO

Förstå den subtila men avgörande skillnaden mellan useEffect och useLayoutEffect – när de körs i förhållande till DOM-commit – och använd dem korrekt.

  1. 1Renderingsfasen och DOM-commit
  2. 2När useLayoutEffect körs jämfört med useEffect
  3. 3Mäta DOM-element med useLayoutEffect
  4. +1 till
Börja lära dig gratisLås upp med PRO
47

B24 lektionerPRO

Hantera komplext appstate med Redux Toolkit-slices och thunks samt RTK Query för cachelagring och synkronisering av server-state.

  1. 1Redux Toolkit-slices och createSlice
  2. 2Asynkron logik med createAsyncThunk
  3. 3RTK Query: endpoints och automatisk cachning
  4. +1 till
Börja lära dig gratisLås upp med PRO
48

B24 lektionerPRO

Förstå React Server Components, use()-hooken, Actions och andra React 19-API:er som förändrar hur data flödar i appar.

  1. 1React Server Components förklarade
  2. 2use()-hooken för asynkrona resurser
  3. 3React Actions och useActionState
  4. +1 till
Börja lära dig gratisLås upp med PRO
49

B24 lektionerPRO

Hantera server-state med TanStack Query: hämtning, cachelagring, bakgrundsuppdatering, mutationer och paginering.

  1. 1Konfigurera React Query och QueryClient
  2. 2Cachning, stale time och bakgrundshämtning
  3. 3Mutationer med useMutation
  4. +1 till
Börja lära dig gratisLås upp med PRO
50

B24 lektionerPRO

Skriv integrationstester med React Testing Library och end-to-end-tester med Playwright för att validera verkliga användarflöden.

  1. 1Integrationstestning med React Testing Library
  2. 2Testa asynkront UI och API-anrop med MSW
  3. 3Kom igång med Playwright för React
  4. +1 till
Börja lära dig gratisLås upp med PRO
51

B24 lektionerPRO

Dokumentera, utveckla och testa React UI-komponenter isolerat med Storybook, CSF3 stories och addons.

  1. 1Konfigurera Storybook i ett React-projekt
  2. 2Skriva CSF3-stories
  3. 3Args, Controls och Actions-addon
  4. +1 till
Börja lära dig gratisLås upp med PRO
52

B24 lektionerPRO

Bygg React-gränssnitt som uppdateras i realtid med WebSockets och bibliotek som Socket.IO för chattar, aviseringar och dashboards.

  1. 1Grunderna i WebSocket i webbläsaren
  2. 2Använda Socket.IO med React
  3. 3Bygga en realtidschattkomponent
  4. +1 till
Börja lära dig gratisLås upp med PRO
53

B24 lektionerPRO

Bygg helt typsäkra API:er utan scheman eller kodgenerering med tRPC – och dela automatiskt typer mellan React-frontend och Node.js-backend.

  1. 1Problemet som tRPC löser
  2. 2Konfigurera tRPC med React och Next.js
  3. 3Queries, mutationer och prenumerationer
  4. +1 till
Börja lära dig gratisLås upp med PRO
54

B24 lektionerPRO

Integrera GraphQL i React-applikationer med Apollo Client – kör queries och mutationer, cacha data och håll gränssnittet synkroniserat med serverdata.

  1. 1GraphQL-grunder för React-utvecklare
  2. 2Konfigurera Apollo Client i React
  3. 3useQuery- och useMutation-hookar
  4. +1 till
Börja lära dig gratisLås upp med PRO
55

B24 lektionerPRO

Bygg snabba och responsiva gränssnitt som visar resultat direkt före bekräftelse från servern – med korrekt återställning vid fel och strategier för konfliktlösning.

  1. 1Vad är ett optimistiskt gränssnitt och när används det
  2. 2Implementera optimistiska uppdateringar manuellt
  3. 3Återställning vid fel och konfliktlösning
  4. +1 till
Börja lära dig gratisLås upp med PRO
56

B24 lektionerPRO

Paketera och publicera återanvändbara React-komponentbibliotek till npm – hantera dubbla ESM/CJS-utdata, peer dependencies, tree shaking och automatiserad versionshantering.

  1. 1Paketera bibliotek med Rollup och tsup
  2. 2Dubbla paketutdata för ESM och CJS
  3. 3Peer dependencies och tree shaking
  4. +1 till
Börja lära dig gratisLås upp med PRO
57

B23 lektionerPRO

Förstå Reacts faser render och commit , när komponenter uppdateras och när memorisering är till hjälp.

  1. 1Omrenderingar jämfört med commits: när bör ni optimera?
  2. 2React.memo, useMemo, useCallback — i praktiken
  3. 3Härlett tillstånd och att undvika extra renderingar
Börja lära dig gratisLås upp med PRO
58

B23 lektionerPRO

Lär er grunderna i samtidiga UI:er med useTransition : håll skrivandet responsivt, visa en ledtråd om pågående arbete och senarelägg icke-brådskande uppdateringar.

  1. 1useTransition för väntande gränssnitt (grunderna i samtidighet)
  2. 2Suspense för asynkrona gränser (koncept)
  3. 3Reservvyer och uppdelning av långsamma vägar
Börja lära dig gratisLås upp med PRO
59

B23 lektionerPRO

Läs bara in det ni behöver genom att dela upp skärmar och widgets i koddelar. Använd React.lazy och Suspense för att skapa appar som upplevs snabbare.

  1. 1React.lazy och Suspense — lata komponenter
  2. 2Routebaserad och komponentnivåbaserad uppdelning
  3. 3Buntar, cache och tips för förladdning
Börja lära dig gratisLås upp med PRO
60

B23 lektionerPRO

Konfigurera tester med Vitest/Jest och React Testing Library ; rendera komponenter, sök efter roll/etikett och kör i en jsdom-miljö.

  1. 1React Testing Library + konfiguration av Vitest/Jest
  2. 2Frågor, händelser och påståenden — formulär och asynkront gränssnitt
  3. 3Mockning av fetch och timers
Börja lära dig gratisLås upp med PRO
61

B24 lektionerPRO

Bygg fullstackwebbappar med Next.js 14+ App Router: filbaserad routing, layouter, serverkomponenter och metadata.

  1. 1Filkonventioner i App Router
  2. 2Server- och klientkomponenter i Next.js
  3. 3Dynamiska routes och route groups
  4. +1 till
Börja lära dig gratisLås upp med PRO
62

B24 lektionerPRO

Hämta, cachelagra och validera data på nytt i Next.js App Router med fetch-alternativ, unstable_cache och behovsstyrd omvalidering.

  1. 1fetch() med cachealternativ i Next.js
  2. 2unstable_cache och React cache()
  3. 3Incremental Static Regeneration (ISR)
  4. +1 till
Börja lära dig gratisLås upp med PRO
63

B24 lektionerPRO

Lägg till autentisering i Next.js-appar med Auth.js (NextAuth v5): OAuth-providers, autentiseringsuppgifter, sessioner och skydd av routes.

  1. 1Konfigurera Auth.js i Next.js App Router
  2. 2Sessionshantering och useSession-hooken
  3. 3Credentials Provider och anpassad inloggning
  4. +1 till
Börja lära dig gratisLås upp med PRO
64

B24 lektionerPRO

Överför dina React-kunskaper till mobila plattformar genom att lära dig React Native-primitiver, styling, navigering och inbyggda enhets-API:er.

  1. 1React Native-kärnkomponenter jämfört med webbläsarens DOM
  2. 2Styling med StyleSheet-API:t och Flexbox
  3. 3Navigering med Expo Router
  4. +1 till
Börja lära dig gratisLås upp med PRO
65

B24 lektionerPRO

Distribuera React- och Next.js-appar till produktion med Vercel, AWS S3/CloudFront och Docker-containrar med CI/CD-pipelines.

  1. 1Driftsätta till Vercel: nollkonfiguration och preview-URL:er
  2. 2Hosta en React-SPA på AWS S3 och CloudFront
  3. 3Dockerisera en React/Next.js-app
  4. +1 till
Börja lära dig gratisLås upp med PRO
66

B24 lektionerPRO

Använd React 19 Server Actions och Next.js-formuläråtgärder för att hantera mutationer på serversidan – och eliminera API-rutter för vanliga formulärmönster med progressiv förbättring.

  1. 1Server Actions i React 19 och Next.js
  2. 2Form Actions: ersätta API Routes för mutationer
  3. 3useActionState och useFormStatus
  4. +1 till
Börja lära dig gratisLås upp med PRO
67

B24 lektionerPRO

Skydda React-applikationer mot XSS, CSRF och andra sårbarheter – med praktisk vägledning om Content Security Policy, hantering av hemligheter och säker rendering.

  1. 1XSS i React: dangerouslySetInnerHTML och tredjepartsskript
  2. 2CSRF-skydd i React- och API-konfigurationer
  3. 3Content Security Policy för React-appar
  4. +1 till
Börja lära dig gratisLås upp med PRO
68

B24 lektionerPRO

Bygg ett skalbart system med design tokens som driver React-komponentbibliotek med flera teman – från definition av tokens till CSS-variabler, Tailwind-integration och Style Dictionary.

  1. 1Vad är designtokens och varför är de viktiga
  2. 2Style Dictionary: transformera och generera tokens
  3. 3Tokens i Tailwind, CSS-variabler och CSS-in-JS
  4. +1 till
Börja lära dig gratisLås upp med PRO
69

B24 lektionerPRO

Bygg plattformsoberoende skrivbordsapplikationer med Electron och en React-frontend – inklusive IPC-kommunikation, inbyggda API:er och paketering för distribution.

  1. 1Electrons arkitektur: huvud- och renderingsprocesser
  2. 2Konfigurera React med Electron
  3. 3IPC-kommunikation mellan processer
  4. +1 till
Börja lära dig gratisLås upp med PRO
70

B23 lektionerPRO

Bygg sammansatta komponenter: föräldern tillhandahåller context och barnen använder det för flexibla API:er.

  1. 1Samordning mellan förälder och barn via Context
  2. 2API-ergonomi med komposition
  3. 3Slot-mönstret med tydligt namngivna barn
Börja lära dig gratisLås upp med PRO
71

B23 lektionerPRO

Bygg stora formulär med små, robusta delar: fältarrayer, dynamiska avsnitt och enkla valideringsflöden.

  1. 1Fältarrayer, dynamiska formulär och valideringsflöden
  2. 2Asynkron validering och beroende fält
  3. 3Prestandatekniker för stora formulär
Börja lära dig gratisLås upp med PRO
72

B23 lektionerPRO

Gå vidare från grunderna: nästlade layouter, konceptuella route loaders och enkla idéer för förhandsinläsning som ger smidigare navigering.

  1. 1Kapslade layouter, loaders (koncept) och förhämtning
  2. 2Autentiseringsflöden och skyddade routes
  3. 3Återställning av scrollning och routes som inte hittas
Börja lära dig gratisLås upp med PRO
73

B23 lektionerPRO

Förstå vad som hör hemma i servercachen och vad som är lokalt UI-state. Hämta och uppdatera data utan att blanda ihop ansvarsområden.

  1. 1Skilj på serverdata och lokalt gränssnittstillstånd
  2. 2Normalisering och optimistiska uppdateringar (koncept)
  3. 3Synkroniseringsmönster utan tunga bibliotek
Börja lära dig gratisLås upp med PRO
74

B23 lektionerPRO

Skapa tillgängliga överlägg: rendera med portals, håll fokus inom överlägget och stöd snabb stängning med Escape eller bakgrunden.

  1. 1Portaler, fokusfälla och stängning med Escape
  2. 2Global hanterare för överlagringar (Context + Reducer)
  3. 3Meddelanden för tillgänglighet (aria-live)
Börja lära dig gratisLås upp med PRO
75

B23 lektionerPRO

Förbered appar för produktion: byggen för utveckling och produktion, source maps, enkla miljövariabler och små kontroller för att kunna leverera tryggt.

  1. 1Dev-/prod-byggen, källkartor och miljöer
  2. 2Buntanalys och borttagning av oanvänd kod
  3. 3Grundläggande CI: lint → test → build
Börja lära dig gratisLås upp med PRO
76

C14 lektionerPRO

Lär Er imperativa React-API:er – exponera anpassade instansvärden från komponenter för överordnade komponenter med forwardRef och useImperativeHandle när deklarativa mönster inte räcker till.

  1. 1forwardRef: exponera DOM-referenser för föräldrar
  2. 2useImperativeHandle: anpassade instansvärden
  3. 3Bygg ett imperativt komponent-API
  4. +1 till
Börja lära dig gratisLås upp med PRO
77

C14 lektionerPRO

Lär Er React 18:s hook useSyncExternalStore – det korrekta sättet att synkronisera React-komponenter med externa tillståndskällor som webbläsar-API:er, globala tillståndslager och tredjepartsbibliote…

  1. 1Problemet med prenumerationer på externa stores
  2. 2API:et och parametrarna för useSyncExternalStore
  3. 3Prenumerera på webbläsar-API:er
  4. +1 till
Börja lära dig gratisLås upp med PRO
78

C14 lektionerPRO

Dela upp stora React-frontendapplikationer i mikrofrontends som distribueras oberoende av varandra med Module Federation och single-spa.

  1. 1Mikrofrontend-koncept och avvägningar
  2. 2Module Federation med Webpack 5
  3. 3Delad state och routing mellan MFE:er
  4. +1 till
Börja lära dig gratisLås upp med PRO
79

C14 lektionerPRO

Förstå mekanismerna bakom rendering på serversidan, hydrering, selektiv hydrering och strömmande HTML med React:s renderToPipeableStream.

  1. 1Så fungerar React SSR under huven
  2. 2Hydration-fel: orsaker och lösningar
  3. 3Selektiv hydration och strömmad HTML
  4. +1 till
Börja lära dig gratisLås upp med PRO
80

C14 lektionerPRO

Förbättra dina TypeScript-kunskaper i React med diskriminerade unioner, mappade typer, villkorstyper och typsäkra komponent-API:er.

  1. 1Discriminated unions för komponentvarianter
  2. 2Villkorliga och mappade typer i React
  3. 3Polymorfa komponenter med propen 'as'
  4. +1 till
Börja lära dig gratisLås upp med PRO
81

C14 lektionerPRO

Mät och förbättra Core Web Vitals (LCP, INP, CLS) i React-appar med profileringsverktyg, bundle-analys och riktade optimeringar.

  1. 1Mäta Core Web Vitals i React-appar
  2. 2Bundle-analys och strategi för code splitting
  3. 3Bild- och typsnittsoptimering i React
  4. +1 till
Börja lära dig gratisLås upp med PRO
82

C14 lektionerPRO

Organisera flera React-appar och delade bibliotek i ett monorepo med Nx, smart schemaläggning av uppgifter och CI baserad på berörda delar.

  1. 1Skapa ett Nx-monorepo med React-appar
  2. 2Delade bibliotek och interna paket
  3. 3Nx Affected-kommandon och cachning
  4. +1 till
Börja lära dig gratisLås upp med PRO
83

C14 lektionerPRO

Undvik hydrering av hela sidor genom att använda Islands Architecture – hydrera selektivt endast de interaktiva React-komponenter som behöver det med Astro.

  1. 1Problemet med fullständig hydrering
  2. 2Islands-arkitektur: selektiv hydrering
  3. 3Konfigurera Astro och React Islands
  4. +1 till
Börja lära dig gratisLås upp med PRO
84

C14 lektionerPRO

Integrera WebAssembly-moduler i React-applikationer för beräkningsintensiva uppgifter – från Rust WASM-moduler till delat minne och worker-trådar.

  1. 1Vad är WebAssembly och vilken roll har React
  2. 2Ladda WASM-moduler i React
  3. 3Från Rust till WASM med wasm-pack och React
  4. +1 till
Börja lära dig gratisLås upp med PRO
85

C14 lektionerPRO

Servera React-applikationer från edge med svarstider på under en millisekund – med Cloudflare Workers, strömmande SSR och edge-anpassade cachningsstrategier.

  1. 1Vad är edge-rendering och varför är det viktigt
  2. 2React på Cloudflare Workers med Hono
  3. 3Strömmande SSR från edge
  4. +1 till
Börja lära dig gratisLås upp med PRO
86

C14 lektionerPRO

Instrumentera React-applikationer med OpenTelemetry för att samla in spår, mäta verklig användarprestanda och koppla frontend-händelser till spans i backend.

  1. 1Frontend-observerbarhet: vad och varför
  2. 2OpenTelemetry-spår från webbläsaren
  3. 3Övervakning av riktiga användare och webbvärden
  4. +1 till
Börja lära dig gratisLås upp med PRO
87

C14 lektionerPRO

Använd strömmande SSR i React 18 och Suspense för att stegvis leverera HTML till webbläsaren – och förbättra den upplevda prestandan utan att invänta all data.

  1. 1Strömmande React 18: så fungerar renderToPipeableStream
  2. 2Suspense-gränser och prioritet vid strömning
  3. 3Progressiv hydrering med selektiv hydrering
  4. +1 till
Börja lära dig gratisLås upp med PRO
88

C14 lektionerPRO

Implementera Webpack Module Federation för att bygga och distribuera React-mikrofrontends oberoende av varandra – och dela beroenden, tillstånd och routing mellan fjärrapplikationer.

  1. 1Module Federation: dynamiska importer vid körning
  2. 2Konfigurera värd- och fjärrappar i React
  3. 3Dela tillstånd och routning mellan remotes
  4. +1 till
Börja lära dig gratisLås upp med PRO
CoddyKit PRO

Lås upp alla 88 kurser i den här lärvägen och alla andra lärvägar

AI-handledare, certifieringsprov och certifikat. Fungerar på webben, iOS och Android.

Se alla abonnemang
Årsvis$29.90 / årCirka $2.49 i månadenBetala en gångLivstid$69.99 en gångInga förnyelser. PRO för alltid.
Kursöversikt

Bygg riktiga gränssnitt med React

React är det JavaScript-bibliotek som ligger till grund för hur de flesta produktionsklara användargränssnitt byggs i dag – från single-page-appar och Next.js-webbplatser till plattformsoberoende mobil- och datorprogram. Det här utbildningsspåret täcker hela området: komponentarkitektur, tillståndshantering, datahämtning, prestanda, testning och driftsättning. Fokus ligger på hur React faktiskt fungerar – reconcile-motorn, fiber-modellen och hook-semantiken – inte bara på det ytliga API:t.

Det här får Ni lära Er

Ni börjar med JSX, props, state och kontrollerade komponenter och går sedan vidare till useEffect, useRef och useReducer. Praktiska kurser behandlar routing med React Router v6, formulärhantering med React Hook Form, server state med React Query och SWR samt global state med Redux Toolkit, Zustand och Jotai. Ni arbetar med TypeScript i React, skriver integrations- och E2E-tester, bygger designsystem med Storybook, hanterar realtidsgränssnitt via WebSockets och levererar typsäkra API:er med tRPC. Spåret omfattar även Next.js App Router, serverkomponenter, server actions och autentisering med NextAuth.js.

Utbildningsvägen

De 95 kurserna sträcker sig från A1 till C1. Kurserna på A1 och A2 lägger grunden med React-fundament, JSX-rendering, CSS-animationer, beständig lagring i local storage och mörkt läge. Kurserna på B1 bygger upp säkerheten med kontextmönster, i18n, React Spring, Framer Motion, drag-and-drop med dnd-kit och komplexa datatabeller med TanStack Table. På B2 behandlas rendering och memoization, Suspense, code splitting, React Native för React-utvecklare, driftsättning till Vercel och AWS samt Electron för datorprogram. C1 avslutas med avancerade ämnen: Mikrofrontend-arkitektur, Fördjupning i SSR och hydrering, Module Federation, Islands-arkitektur med Astro, Integration med WebAssembly, Edge-rendering med Cloudflare Workers och OpenTelemetry för observerbarhet i frontend.

Så fungerar det

Varje kurs är uppdelad i korta, fokuserade lektioner som Ni genomför i den inbyggda kodredigeraren med feedback i realtid. En AI-handledare finns till hands när Ni fastnar på ett koncept eller ett test som inte går igenom. Ni kan gå igenom spåret i ordningsföljd eller hoppa till den nivå som motsvarar Er nuvarande erfarenhet.

Verktyg

Öva med AI – läs inte bara

Ta lärandet till nästa nivå med AI-drivna verktyg och funktioner

AI-kodgeneratorGenerera kod med AIAI-felrättningHitta och åtgärda kodfelPROAI-insiktDjupgående kodanalysPROAI-chattChatta med AI-handledarenStäll en superfrågaFå svar på expertnivåPROSkapa lektionAI-driven lektionsskaparePROPåbörja certifieringsprovetFå ditt certifikatPROKodredigerareSkriv och kör kodStarta utmaningTesta dina kunskaper

Så lär du dig

  1. 01

    Interaktiva lektioner

    Praktiska kodövningar med feedback i realtid

  2. 02

    AI-handledare

    Få omedelbar hjälp av vår AI när du kör fast

  3. 03

    Inbyggd kodredigerare

    Skriv och kör kod direkt i webbläsaren

  4. 04

    Certifikat

    Få ett certifikat när du slutför kursen

Fortsätt utforska

Relaterade lärvägar

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 logoApplikationer med Firebase Auth och Realtime DatabaseMaster Firebase Authentication and Realtime Database to build scalable, secure, and dynam…Design Systems & Component Libraries logoDesignsystem och komponentbibliotekMaster the art of creating robust design systems and efficient component libraries to acc…
FAQ

Vanliga frågor

Är kursen i React Academy gratis?

Ja. Ni kan börja kursen i React Academy gratis och genomföra de interaktiva lektionerna utan kostnad. Med en valfri PRO-prenumeration får Ni tillgång till avancerade AI-verktyg och ett certifikat som kan delas.

Behöver jag tidigare erfarenhet för att lära mig React?

Nej. Kursen börjar med grunderna och går stegvis vidare till mer avancerade ämnen, så Ni kan börja även utan tidigare erfarenhet av React.

Hur lär jag mig React på CoddyKit?

Ni lär Er genom att göra. Korta interaktiva lektioner kombinerar tydliga förklaringar med praktiska kodövningar som körs i realtid, och en AI-handledare som är tillgänglig dygnet runt ger personlig hjälp när Ni kör fast.

Får jag ett certifikat när jag har slutfört React Academy?

Ja. PRO-användare kan göra ett prov och få ett delbart intyg på att de har slutfört kursen i React Academy, med en verifierbar kod.

Kan jag lära mig React i mobilen?

Ja. CoddyKit finns på webben och som inbyggda iOS- och Android-appar, så Ni kan lära Er React på valfri enhet och synkronisera Era framsteg mellan dem.

Vad kostar CoddyKit PRO?

Den första kursen i React Academy är gratis. CoddyKit PRO låser upp alla kurser: $5.90 per vecka, $7.90 per månad, $29.90 per år eller $69.99 en gång för livstidsåtkomst utan förnyelser.

Hur lång tid tar det att slutföra React Academy?

React Academy har 88 kurser och 324 lektioner. De flesta lektioner tar cirka 5–10 minuter, så hela lärvägen motsvarar ungefär 38 timmars praktisk övning i egen takt.

Börja med React Academy nu

Anslut Er till tusentals deltagare som lär sig programmering med AI-drivna lektioner.

Börja lära dig gratisBläddra bland alla kurser