Lær React & øv dig
Lær React & øv dig — Lær React-programmering ved at skrive JSX og køre det på din telefon
Lær React & øv dig er en iOS- og Android-app, som er gratis at komme i gang med, og som lærer nybegyndere med lidt HTML, CSS eller JavaScript samt udviklere, der skifter fra et andet framework, React-programmering. Skriv JSX i en kodeeditor, tryk på Run, og se din komponent blive gengivet i en liveforhåndsvisning i appen. 88 kurser og 324 lektioner fører dig fra din første komponent gennem hooks og statehåndtering til Next.js med 20 guidede projekter undervejs.
- Pris
- Gratis, Pro-opgradering
- Platforme
- iOS og Android
- Sprog
- 22
- Aldersklassificering
- 4+
- Version
- 82.6.1
- Kræver
- iOS 15.1 eller nyere
- App Store
- 3.8 ★ (4)
Din komponent gengives på telefonen, ikke på en server.
Runtime-miljøet, ReactDOM og Babel er integreret i appen, så den JSX, du skriver, kompileres og vises på enheden. Du kan trykke på den knap, du netop har bygget, skrive i din formular og se brugerfladen reagere – det er den feedback-loop, der får hooks til at begynde at give mening.
Hvad det er
Lær React & øv dig er et React-kursus, som er gratis at komme i gang med, til iOS og Android med 88 kurser og 324 interaktive lektioner – fra den første linje JSX til hooks, tilstandshåndtering, React 19 og Next.js App Router. Den indbyggede editor kompilerer din kode på enheden og gengiver komponenten i en liveforhåndsvisning, og 20 guidede projekter kontrollerer hvert trin, før du går videre. Det er en uafhængig læringsapp, som ikke er tilknyttet Meta eller Vercel.
Inde i appen
Sådan ser det ud
Kurset
Det lærer du på React-kurset
88 kurser fra appens egen liste, sorteret i den rækkefølge, som et første gennemløb af React typisk følger.
React Kickoff, JSX og Props & Composition
Komponenter, deklarativ UI og hvordan React opdaterer DOM'en, derefter JSX-regler, rendering af lister og overførsel af data med props.
State, Events, Forms og useRef
useState og eventhåndtering, kontrollerede formularer med validering samt useRef til værdier og DOM-adgang, der ikke udløser en rendering.
useEffect, Data Fetching og Custom Hooks
Hvornår effects kører, dependency arrays, loading- og fejltilstande ved API-kald samt udtræk af genanvendelig logik i dine egne hooks.
Context, Redux Toolkit og Zustand
Deling af state uden prop drilling med Context og useReducer, derefter Redux Toolkit med RTK Query, Zustand og Jotai til større apps.
Routing, React Query og Forms at Scale
Client-side routing og mønstre med React Router, server-state med TanStack Query og SWR, React Hook Form samt optimistisk UI.
Performance, Testing og TypeScript
Rendering og memoisation, code splitting, virtualiserede lister, test med React Testing Library samt typning af komponenter og hooks.
React 19, Server Components og Next.js
Server Components og Actions, SSR og hydration samt Next.js App Router med data fetching, caching og autentificering.
Sådan fungerer det
Sådan fungerer en lektion
En lektion består af et kort koncept, som straks efterfølges af kode, du selv skriver og kører, så idéen og resultatet vises på den samme skærm.
Læs ét koncept
Åbn et kursus fra læringsstien, og læs en kort lektion, f.eks. om hvordan state opdateres, eller hvorfor en liste skal have keys. Kursusoversigten viser, hvilke lektioner der er gratis, så du kan se formatet, før du beslutter dig.
Skriv JSX, og tryk på Kør
Skriv komponenten i kodeeditoren, og kør den. Liveforhåndsvisningen gengiver din komponent i appen, så du kan klikke på knappen, skrive i feltet og se, hvad koden gør.
Tjek det, og byg videre på det
Quizzer, kodningsmissioner og guidede projekter bekræfter, at du har forstået idéen, og AI-mentoren forklarer en hook eller en fejl, du ikke kan gennemskue. Bug Hunt og UI Match giver dig mulighed for at træne konceptet en ekstra gang.
Hvad det indeholder
Dette følger med appen
88
Kurser, 324 lektioner
Fra JSX, props og state via custom hooks, formularer, Context og Redux Toolkit til Server Components, SSR og Next.js App Router, grupperet fra A1 til C1.
Live
Editor med liveforhåndsvisning
En kodeeditor skabt til JSX, hvor komponenten gengives i appen. Projekter med flere filer lader dig importere én komponent i en anden, sådan som rigtige apps bygges.
20
Guidede projekter
Byg en like-knap, profilkort, en drikkepengeberegner, et quizspil, en indkøbskurv og meget mere, ét lille trin ad gangen. Hvert trin kontrollerer, at komponenten rent faktisk virker.
Lab
Hooks Lab og props-knapper
Se hver ændring af state og hver nye rendering, mens det sker, og ændr en prop med en skyder for at se komponenten blive opdateret. En renderingsprofiler og en state-tidslinje er en del af Pro.
30
Kodningsmissioner
Missioner på let, mellemsvært og svært niveau om hooks, rendering, formularer, context og performance samt UI Match, Bug Hunt og Component Recall med repetition med mellemrum.
AI
AI-mentor
Bed om en forklaring, lad AI gennemgå din kode og foreslå en løsning, eller generér en tilpasset lektion om et hvilket som helst emne. Mentoren og certifikateksamen er en del af Pro.
Baggrund
Hvad skal du egentlig forstå for at kunne skrive React, og i hvilken rækkefølge?
React er et JavaScript-bibliotek til at bygge brugerflader af små, genanvendelige komponenter, der tegner sig selv igen, når deres data ændres. De fleste begyndere går ikke i stå på syntaksen, men på modellen bag den: hvad en rendering er, hvad der tæller som state, og hvornår effekter kører. Når du lærer idéerne i den rigtige rækkefølge og har noget på skærmen, du kan teste hver enkelt på, går det hurtigere end at læse om dem alle på én gang.
Komponenter og propsenheden, der kan genbruges
En komponent er en funktion, der returnerer en del af brugerfladen, og props er de input, den modtager fra sin parent-komponent. Fordi data flyder ned gennem props, kan du læse en komponent og forudsige, hvad den tegner.
Statedet, der ændrer sig over tid
State er data, som en komponent husker mellem renderinger, f.eks. teksten i et felt eller om en menu er åben. Når state opdateres, planlægges en ny rendering, og det er mekanismen bag næsten alle interaktive skærmbilleder.
Hooks og effekterher går begyndere i stå
Hooks som useState, useRef og useReducer lader en komponent holde state og få adgang til DOM'en. useEffect kører kode efter en rendering, og et forkert dependency array er den mest almindelige årsag til loops og forældede værdier.
Rendering og ny renderingderfor føles appen langsom
En komponent renderer igen, når dens state eller props ændres, og det samme gør komponenterne i den. At vide, hvad der udløste en rendering, er udgangspunktet for alle performanceforbedringer – fra memoisation til code splitting.
Egnethed
Hvem det er til — og hvem det ikke er til
Det passer godt til dig, hvis du
- Kan lidt HTML, CSS eller JavaScript og vil i gang med React på den rigtige måde
- Er udvikler i et andet framework og skal hurtigt skifte til React
- Lærer bedst, når resultatet vises på skærmen, så snart koden kører
- Er ved at bygge en portfolio med små projekter og vil gerne have guidede trin
- Forbereder dig til en frontend-samtale og vil øve dig med spørgsmål
Det er ikke det rette værktøj, hvis du
- Har aldrig set JavaScript før, fordi kurset forudsætter lidt kendskab til det
- Vil bygge og udgive et komplet projekt, hvilket stadig kræver en laptop
- Forventer, at alt er gratis, selvom det første kursus er gratis, og Pro låser resten op
- Vil have et officielt kursus fra React-teamet, eftersom dette er en uafhængig app
Spørgsmål
Ofte stillede spørgsmål
Kan man lære React-programmering på en telefon?
De grundlæggende idéer, komponenter, props, state og hooks kan læres på en telefon, hvis du kan køre det, du skriver. Lær React & øv dig samler ReactDOM og Babel, så din JSX gengives i en liveforhåndsvisning på enheden. En laptop bliver nyttig, når du bygger og udgiver et større projekt.
Skal jeg kunne JavaScript, før jeg lærer React?
Det hjælper at kunne lidt. Lær React & øv dig er målrettet personer, der kender noget til HTML, CSS eller JavaScript, for eksempel variabler, funktioner og arrays. Hvis du aldrig har skrevet JavaScript, bør du lære det først, fordi React-lektionerne forudsætter, at du kan læse det.
Hvad er forskellen på props og state?
Props er input, som en komponent modtager fra sin parent, og som ikke bør ændres, mens state er data, komponenten selv ejer og opdaterer over tid. I Lær React & øv dig kan du se dette i Hooks Lab, som viser hver ændring af state og rendering, samt i props-knapperne, der lader dig ændre en prop med en slider.
Lærer appen hooks som useEffect?
Ja. Lær React & øv dig dækker useState, useEffect, useRef, useReducer, custom hooks og useLayoutEffect. Separate lektioner går i dybden med, hvornår effects kører, dependency arrays og almindelige fejl, med en Bug Hunt-tilstand til at finde fejl i ødelagte komponenter.
Er React det samme som React Native, og lærer appen begge dele?
Nej. React er biblioteket til at bygge brugergrænseflader, mens React Native bruger de samme idéer til at bygge mobilapps. Lær React & øv dig lærer dig først React til web, og et kursus i React Native fundamentals hjælper webudviklere med at overføre færdighederne til mobil.
Dækker Lær React & øv dig Next.js og React 19?
Ja. Kurserne dækker React 19-funktioner og Server Components, SSR og hydration, streaming samt Next.js App Router med data fetching, caching og autentificering. Der findes også et kursus i React Native fundamentals for webudviklere.
Hvilken slags projekter kan jeg bygge?
Der er 20 guidede projekter, som bygges ét lille trin ad gangen: en like-knap, profilkort, en drikkepengeberegner, et quizspil, et stopur, en tilmeldingsformular, en indkøbskurv, en billedkarrusel, en pagineret liste og en todo-app. Hvert trin kontrollerer, at din komponent fungerer, før du går videre.
Er Lær React & øv dig gratis?
Den er gratis at downloade. Gratisversionen indeholder det første kursus, ét guidet projekt, to coding missions, kodeeditoren med liveforhåndsvisning, Hooks Lab, props-knapper, Bug Hunt og tre UI Match-kontroller om dagen, og den viser annoncer. Pro låser alle kurser, projekter og missions op samt AI-mentoren, render-profileren og certifikateksamen og fjerner annoncer.
Er der et certifikat eller forberedelse til jobsamtaler?
Når du består den afsluttende eksamen, får du et certifikat, der kan deles, og som er en del af Pro. Til jobsamtaler er der 50 interviewspørgsmål, en quiz med 50 spørgsmål og et snydeark til at øve de centrale begreber.
Kører koden på en server?
Nej. Runtime-miljøet er indbygget i appen, så din kode kompileres og gengives på enheden. Derfor kan du trykke på den knap, du har bygget, og se brugergrænsefladen reagere direkte i forhåndsvisningen.
Hvilke sprog og platforme understøtter den?
Lær React & øv dig kører på iOS og Android og fås på 22 sprog. Den har en aldersklassificering på 4+ og kræver iOS 15.1 eller nyere på iPhone.
Kom i gang
Gengiv din første komponent i dag
Gratis at komme i gang på iOS og Android på 22 sprog.
Mere fra CoddyKit
Tilgængelig på iOS og Android.