Lær React & øv deg
Lær React & øv deg — Lær React-programmering ved å skrive JSX og kjøre det på telefonen din
Lær React & øv deg er en gratis iOS- og Android-app du kan komme i gang med, som lærer nybegynnere React-programmering med litt HTML, CSS eller JavaScript, og hjelper utviklere som bytter fra et annet rammeverk. Skriv JSX i et kodeeditor, trykk på Kjør og se komponenten din gjengis i en forhåndsvisning i sanntid inne i appen. 88 kurs og 324 leksjoner tar deg fra den første komponenten, via hooks og tilstandsbehandling, til Next.js, med 20 veiledede prosjekter underveis.
- Pris
- Gratis, oppgradering til Pro
- Plattformer
- iOS og Android
- Språk
- 22
- Aldersgrense
- 4+
- Versjon
- 82.6.1
- Krever
- iOS 15.1 eller nyere
- App Store
- 3.8 ★ (4)
Komponenten din gjengis på telefonen, ikke på en server.
Runtime-miljøet, ReactDOM og Babel er innebygd i appen, slik at JSX-en du skriver, kompileres og vises på enheten. Du kan trykke på knappen du nettopp bygde, skrive i skjemaet og se brukergrensesnittet reagere. Det er denne tilbakemeldingssløyfen som gjør at hooks begynner å gi mening.
Hva det er
Lær React & øv deg er et React-kurs for iOS og Android som du kan komme i gang med gratis, med 88 kurs og 324 interaktive leksjoner – fra den første linjen med JSX til hooks, tilstandsbehandling, React 19 og Next.js App Router. Det innebygde editoren kompilerer koden din på enheten og gjengir komponenten i en forhåndsvisning i sanntid, mens 20 veiledede prosjekter kontrollerer hvert trinn før du går videre. Det er en uavhengig læringsapp og er ikke tilknyttet Meta eller Vercel.
Inne i appen
Slik ser den ut
Kurset
Dette lærer du i React-kurset
88 kurs hentet fra appens egen liste, ordnet slik en første gjennomgang av React vanligvis foregår.
React Kickoff, JSX og Props & Composition
Komponenter, deklarativt brukergrensesnitt og hvordan React oppdaterer DOM, deretter JSX-regler, gjengivelse av lister og hvordan data sendes ned med props.
State, Events, Forms og useRef
useState og håndtering av hendelser, kontrollerte skjemaer med validering, og useRef for verdier og DOM-tilgang som ikke utløser en gjengivelse.
useEffect, Data Fetching og Custom Hooks
Når effekter kjører, avhengighetsmatriser, innlastings- og feilmeldinger for API-kall, og hvordan du trekker ut gjenbrukbar logikk til egne hooks.
Context, Redux Toolkit og Zustand
Deling av state uten prop drilling med Context og useReducer, deretter Redux Toolkit med RTK Query, Zustand og Jotai for større apper.
Routing, React Query og Forms at Scale
Routing på klientsiden og mønstre for React Router, servertilstand med TanStack Query og SWR, React Hook Form og optimistisk UI.
Ytelse, testing og TypeScript
Gjengivelse og memoisering, kodedeling, virtualiserte lister, testing med React Testing Library og typisering av komponenter og hooks.
React 19, Server Components og Next.js
Server Components og Actions, SSR og hydrering, deretter Next.js App Router med datainnhenting, hurtigbufring og autentisering.
Slik fungerer det
Slik fungerer en leksjon
En leksjon består av et kort konsept som umiddelbart følges av kode du skriver og kjører, slik at ideen og resultatet vises på samme skjerm.
Les ett konsept
Åpne et kurs fra læringsstien og les en kort leksjon, for eksempel om hvordan tilstand oppdateres, eller hvorfor en liste trenger nøkler. Kursoversikten viser hvilke leksjoner som er gratis, slik at du kan se hvordan formatet fungerer før du bestemmer deg.
Skriv JSX og trykk på Kjør
Skriv komponenten i kodeeditoren og kjør den. Forhåndsvisningen i sanntid gjengir komponenten din inne i appen, slik at du kan klikke på knappen, skrive i feltet og se hva koden gjør.
Kontroller den, og bygg videre
Quizer, kodeoppdrag og veiledede prosjekter bekrefter at du har forstått ideen, og AI-mentoren forklarer en hook eller en feil du ikke klarer å tolke. Bug Hunt og UI Match gir konseptet en ny gjennomgang.
Hva den inneholder
Dette følger med appen
88
Kurs, 324 leksjoner
Fra JSX, props og tilstand via egendefinerte hooks, skjemaer, Context og Redux Toolkit til Server Components, SSR og Next.js App Router, gruppert fra A1 til C1.
Live
Editor med forhåndsvisning i sanntid
En kodeeditor laget for JSX, med komponenten gjengitt inne i appen. Prosjekter med flere filer lar deg importere én komponent i en annen, slik ekte apper bygges.
20
Veiledede prosjekter
Bygg en liker-knapp, profilkort, en driks-kalkulator, et quizspill, en handlekurv og mer, ett lite trinn av gangen. Hvert trinn kontrollerer at komponenten faktisk fungerer.
Lab
Hooks Lab og props-kontroller
Se hver eneste tilstandsendring og nye gjengivelse mens det skjer, og endre en prop med en glidebryter for å se komponenten oppdatere seg. En gjengivelsesprofiler og en tidslinje for tilstand er en del av Pro.
30
Kodeoppdrag
Oppdrag på lett, middels og vanskelig nivå innen hooks, gjengivelse, skjemaer, context og ytelse, samt UI Match, Bug Hunt og Component Recall med repetisjon med mellomrom.
AI
AI-mentor
Be om en forklaring, la AI gjennomgå koden din og foreslå en løsning, eller generer en tilpasset leksjon om et hvilket som helst emne. Mentoren og sertifiseringseksamen er en del av Pro.
Bakgrunn
Hva trenger du egentlig å forstå for å kunne skrive React, og i hvilken rekkefølge?
React er et JavaScript-bibliotek for å bygge brukergrensesnitt av små, gjenbrukbare komponenter som tegnes på nytt når dataene deres endres. De fleste nybegynnere stopper ikke opp på syntaksen, men på modellen under: hva en gjengivelse er, hva som regnes som tilstand, og når effekter kjøres. Det går raskere å lære disse ideene i riktig rekkefølge, med noe på skjermen du kan teste hver av dem på, enn å lese om alt på én gang.
Komponenter og propsgjenbruksenheten
En komponent er en funksjon som returnerer en del av grensesnittet, og props er inndataene den mottar fra den overordnede komponenten. Fordi data flyter ned gjennom props, kan du lese en komponent og forutsi hva den vil tegne.
Tilstanddet som endrer seg over tid
Tilstand er data en komponent husker mellom gjengivelser, for eksempel teksten i et felt eller om en meny er åpen. Når du oppdaterer tilstanden, planlegges en ny gjengivelse – mekanismen som ligger bak nesten alle interaktive skjermer.
Hooks og effekterder nybegynnere setter seg fast
Hooks som useState, useRef og useReducer lar en komponent holde på tilstand og få tilgang til DOM. useEffect kjører kode etter en gjengivelse, og en feil avhengighetsmatrise er den vanligste årsaken til løkker og foreldede verdier.
Gjengivelse og ny gjengivelsehvorfor appen føles treg
En komponent gjengis på nytt når tilstanden eller props endres, og det samme gjelder komponentene inni den. Å vite hva som utløste en gjengivelse, er utgangspunktet for alle ytelsesforbedringer, fra memoisering til kodesplitting.
Passer
Hvem den er for – og ikke for
Passer godt for deg hvis du
- Kan litt HTML, CSS eller JavaScript og vil lære React ordentlig fra start
- Er utvikler med erfaring fra et annet rammeverk og trenger å gå raskt over til React
- Lærer best når resultatet vises på skjermen i det øyeblikket koden kjører
- Bygger en portefølje med små prosjekter og ønsker veiledning trinn for trinn
- Forbereder deg til et frontend-intervju og vil øve på spørsmål
Ikke riktig verktøy for deg hvis du
- Har aldri sett JavaScript før, fordi kurset forutsetter litt kjennskap til det
- Vil bygge og distribuere et komplett prosjekt, noe som fortsatt krever en bærbar datamaskin
- Forventer at alt er gratis, ettersom det første kurset er gratis og Pro låser opp resten
- Vil ha et offisielt kurs fra React-teamet, siden dette er en uavhengig app
Spørsmål
Ofte stilte spørsmål
Kan man lære React-programmering på en telefon?
Kjerneideene, komponenter, props, state og hooks kan læres på en telefon hvis du kan kjøre det du skriver. Lær React & øv deg inkluderer ReactDOM og Babel, slik at JSX gjengis i en direkte forhåndsvisning på enheten. En bærbar datamaskin blir nyttig når du skal bygge og distribuere et større prosjekt.
Må jeg kunne JavaScript før jeg lærer React?
Det hjelper å kunne litt. Lær React & øv deg er laget for personer som kan noe HTML, CSS eller JavaScript, for eksempel variabler, funksjoner og matriser. Hvis du aldri har skrevet JavaScript, bør du lære det først, fordi React-leksjonene forutsetter at du kan lese det.
Hva er forskjellen på props og state?
Props er inndata en komponent mottar fra den overordnede komponenten, og skal ikke endres, mens state er data komponenten eier og oppdaterer over tid. I Lær React & øv deg kan du se dette i Hooks Lab, som viser hver state-endring og gjengivelse på nytt, samt props-kontrollene, som lar deg endre en prop med en glidebryter.
Lærer appen bort hooks som useEffect?
Ja. Lær React & øv deg dekker useState, useEffect, useRef, useReducer, egendefinerte hooks og useLayoutEffect. Egne leksjoner går gjennom når effekter kjører, avhengighetsmatriser og vanlige feil, med en Bug Hunt-modus for å finne feil i ødelagte komponenter.
Er React det samme som React Native, og lærer appen bort begge deler?
Nei. React er biblioteket for å bygge brukergrensesnitt, mens React Native bruker de samme ideene til å bygge mobilapper. Lær React & øv deg lærer bort React for nettet først, og et grunnkurs i React Native hjelper webutviklere med å ta med seg ferdighetene over til mobil.
Dekker Lær React & øv deg Next.js og React 19?
Ja. Kursene dekker React 19-funksjoner og Server Components, SSR og hydrering, strømming og Next.js App Router med datainnhenting, hurtigbufring og autentisering. Det finnes også et grunnkurs i React Native for webutviklere.
Hva slags prosjekter kan jeg bygge?
Det finnes 20 veiledede prosjekter som bygges ett lite trinn om gangen: en liker-knapp, profilkort, en driks-kalkulator, et quizspill, en stoppeklokke, et registreringsskjema, en handlekurv, en bildekarusell, en paginert liste og en todo-app. Hvert trinn kontrollerer at komponenten fungerer før du går videre.
Er Lær React & øv deg gratis?
Appen er gratis å laste ned. Gratisversjonen inkluderer det første kurset, ett veiledet prosjekt, to kodeoppdrag, kodeeditoren med direkte forhåndsvisning, Hooks Lab, props-kontroller, Bug Hunt og tre UI Match-kontroller per dag, og den viser annonser. Pro låser opp alle kurs, prosjekter og oppdrag, AI-mentoren, render-profileren og sertifiseringseksamen, og fjerner annonser.
Finnes det et sertifikat eller intervjuforberedelser?
Når du består den avsluttende eksamenen, får du et sertifikat som kan deles, og som er en del av Pro. Til intervjuer finnes det 50 intervjuspørsmål, en quiz med 50 spørsmål og et jukseark for å øve på kjernebegrepene.
Kjører koden på en server?
Nei. Kjøremiljøet er inkludert i appen, så koden din kompileres og gjengis på enheten. Derfor kan du trykke på knappen du har bygget og se brukergrensesnittet reagere i forhåndsvisningen.
Hvilke språk og plattformer støtter den?
Lær React & øv deg fungerer på iOS og Android og er tilgjengelig på 22 språk. Den har aldersgrense 4+ og krever iOS 15.1 eller nyere på iPhone.
Kom i gang
Render din første komponent i dag
Gratis å komme i gang på iOS og Android, på 22 språk.
Mer fra CoddyKit
Tilgjengelig på iOS og Android.