Lär dig React & öva
Lär dig React & öva — Lär dig React-programmering genom att skriva JSX och köra det på din telefon
Lär dig React & öva är en iOS- och Android-app som är gratis att komma igång med och som lär nybörjare React-programmering med lite HTML, CSS eller JavaScript, samt utvecklare som byter från ett annat ramverk. Skriv JSX i en kodredigerare, tryck på Kör och se din komponent renderas i en liveförhandsvisning i appen. 88 kurser och 324 lektioner tar dig från din första komponent via hooks och state management till Next.js, med 20 guidade projekt längs vägen.
- Pris
- Gratis, uppgradering till Pro
- Plattformar
- iOS och Android
- Språk
- 22
- Åldersgräns
- 4+
- Version
- 82.6.1
- Kräver
- iOS 15.1 eller senare
- App Store
- 3.8 ★ (4)
Din komponent renderas på telefonen, inte på en server.
Körmiljön, ReactDOM och Babel ingår i appen, så JSX-koden du skriver kompileras och visas på enheten. Du kan trycka på knappen du just byggde, skriva i formuläret och se hur gränssnittet reagerar – det är den återkopplingsloop som gör att hooks börjar bli begripliga.
Vad det är
Lär dig React & öva är en React-kurs för iOS och Android som är gratis att komma igång med, med 88 kurser och 324 interaktiva lektioner – från den första raden JSX till hooks, state management, React 19 och Next.js App Router. Den inbyggda redigeraren kompilerar koden på enheten och renderar komponenten i en liveförhandsvisning, och 20 guidade projekt kontrollerar varje steg innan du går vidare. Det är en fristående utbildningsapp och har ingen anknytning till Meta eller Vercel.
I appen
Så här ser det ut
Kursen
Det här täcker React-kursen
88 kurser hämtade från appens egen lista, ordnade i den ordning som en första genomgång av React vanligtvis följer.
React Kickoff, JSX och Props & Composition
Komponenter, deklarativt UI och hur React uppdaterar DOM, följt av JSX-regler, rendering av listor och hur data skickas ned med props.
State, Events, Forms och useRef
useState och händelsehantering, kontrollerade formulär med validering samt useRef för värden och DOM-åtkomst som inte utlöser en rendering.
useEffect, Data Fetching och Custom Hooks
När effekter körs, beroendearrayser, laddnings- och feltillstånd för API-anrop samt hur återanvändbar logik bryts ut till egna hooks.
Context, Redux Toolkit och Zustand
Dela state utan prop drilling med Context och useReducer, följt av Redux Toolkit med RTK Query, Zustand och Jotai för större appar.
Routing, React Query och Forms at Scale
Routing på klientsidan och mönster för React Router, server state med TanStack Query och SWR, React Hook Form och optimistiskt UI.
Prestanda, testning och TypeScript
Rendering och memoisation, code splitting, virtualiserade listor, testning med React Testing Library samt typning av komponenter och hooks.
React 19, Server Components och Next.js
Server Components och Actions, SSR och hydrering, följt av Next.js App Router med datahämtning, cachning och autentisering.
Så fungerar det
Så fungerar en lektion
En lektion består av ett kort koncept som följs direkt av kod som du skriver och kör, så att idén och resultatet visas på samma skärm.
Läs ett koncept
Öppna en kurs från lärstigen och läs en kort lektion, till exempel om hur state uppdateras eller varför en lista behöver keys. Kursöversikten visar vilka lektioner som är gratis, så att du kan se formatet innan du bestämmer dig.
Skriv JSX och tryck på Kör
Skriv komponenten i kodredigeraren och kör den. Liveförhandsvisningen renderar din komponent i appen, så att du kan klicka på knappen, skriva i fältet och se vad koden gör.
Kontrollera den och bygg vidare
Frågesporter, koduppdrag och guidade projekt bekräftar att du förstått idén, och AI-mentorn förklarar en hook eller ett fel som du inte kan tolka. Bug Hunt och UI Match ger konceptet en extra genomgång.
Det här ingår
Det här ingår i appen
88
Kurser, 324 lektioner
Från JSX, props och state via custom hooks, formulär, Context och Redux Toolkit till Server Components, SSR och Next.js App Router, grupperade från A1 till C1.
Live
Redigerare med liveförhandsvisning
En kodredigerare byggd för JSX där komponenten renderas i appen. Projekt med flera filer låter dig importera en komponent till en annan, på samma sätt som riktiga appar byggs.
20
Guidade projekt
Bygg en gilla-knapp, profilkort, en dricksräknare, ett frågespel, en kundvagn och mycket mer, ett litet steg i taget. Varje steg kontrollerar att komponenten verkligen fungerar.
Lab
Hooks Lab och props-reglage
Se varje state-ändring och omrendering medan den sker, och ändra en prop med ett reglage för att se hur komponenten uppdateras. En render profiler och en state-tidslinje ingår i Pro.
30
Koduppdrag
Uppdrag på lätt, medel och svår nivå inom hooks, rendering, formulär, context och prestanda, samt UI Match, Bug Hunt och Component Recall med spridd repetition.
AI
AI-mentor
Be om en förklaring, låt AI granska din kod och föreslå en lösning eller skapa en anpassad lektion om valfritt ämne. Mentorn och certifieringsprovet ingår i Pro.
Bakgrund
Vad behöver du egentligen förstå för att skriva React, och i vilken ordning?
React är ett JavaScript-bibliotek för att bygga användargränssnitt av små, återanvändbara komponenter som ritar om sig själva när deras data ändras. De flesta nybörjare fastnar inte på syntaxen, utan på modellen under den: vad en render är, vad som räknas som state och när effekter körs. Att lära sig de idéerna i rätt ordning, med något på skärmen att testa varje idé på, går snabbare än att läsa om allt på en gång.
Komponenter och propsgrunden för återanvändning
En komponent är en funktion som returnerar en del av gränssnittet, och props är de indata som den tar emot från sin överordnade komponent. Eftersom data flödar nedåt genom props kan du läsa en komponent och förutsäga vad den kommer att rita upp.
Statedet som förändras över tid
State är data som en komponent kommer ihåg mellan renderingar, till exempel texten i ett fält eller om en meny är öppen. När state uppdateras planeras en ny rendering, vilket är mekanismen bakom nästan alla interaktiva skärmar.
Hooks och effekterdär nybörjare fastnar
Hooks som useState, useRef och useReducer låter en komponent lagra state och nå DOM. useEffect kör kod efter en rendering, och en felaktig dependency array är den vanligaste orsaken till loopar och inaktuella värden.
Rendering och omrenderingvarför appen känns långsam
En komponent renderas om när dess state eller props ändras, och det gör även komponenterna inuti den. Att veta vad som utlöste en rendering är utgångspunkten för alla prestandaförbättringar, från memoisation till code splitting.
Passar
Vem den är till för – och vem den inte är till för
Passar bra om du
- Kan lite HTML, CSS eller JavaScript och vill komma igång med React på rätt sätt
- Är utvecklare inom ett annat ramverk och behöver byta till React snabbt
- Lär dig bäst när resultatet visas på skärmen i samma ögonblick som koden körs
- Bygger en portfolio med små projekt och vill ha vägledda steg
- Förbereder dig inför en frontendintervju och vill ha frågor att öva på
Inte rätt verktyg om du
- Har aldrig sett JavaScript, eftersom kursen förutsätter lite förkunskaper i det
- Vill bygga och distribuera ett helt projekt, vilket fortfarande kräver en laptop
- Förväntar dig att allt ska vara kostnadsfritt, eftersom den första kursen är gratis och Pro låser upp resten
- Vill ha en officiell kurs från React-teamet, eftersom det här är en fristående app
Frågor
Vanliga frågor
Kan man lära sig React-programmering på en telefon?
De grundläggande idéerna, komponenter, props, state och hooks, går att lära sig på en telefon om du kan köra det du skriver. Lär dig React & öva innehåller ReactDOM och Babel, så att din JSX renderas i en liveförhandsvisning på enheten. En laptop blir användbar när du börjar bygga och distribuera ett större projekt.
Måste jag kunna JavaScript innan jag lär mig React?
Det underlättar att kunna lite. Lär dig React & öva riktar sig till personer som kan en del HTML, CSS eller JavaScript, till exempel variabler, funktioner och arrayer. Om du aldrig har skrivit JavaScript bör du lära dig det först, eftersom React-lektionerna förutsätter att du kan läsa det.
Vad är skillnaden mellan props och state?
Props är indata som en komponent tar emot från sin förälder och inte bör ändra, medan state är data som komponenten äger och uppdaterar över tid. I Lär dig React & öva kan du se detta i Hooks Lab, som visar varje state-ändring och rendering på nytt, samt i props-reglagen, där du kan ändra en prop med ett skjutreglage.
Lär appen ut hooks som useEffect?
Ja. Lär dig React & öva tar upp useState, useEffect, useRef, useReducer, custom hooks och useLayoutEffect. Separata lektioner går igenom när effekter körs, beroendearrayser och vanliga misstag, med ett Bug Hunt-läge där du får hitta buggar i trasiga komponenter.
Är React samma sak som React Native, och lär appen ut båda?
Nej. React är biblioteket för att bygga användargränssnitt, medan React Native använder samma idéer för att bygga mobilappar. Lär dig React & öva lär först ut React för webben, och en kurs i React Native fundamentals hjälper webbutvecklare att överföra dessa kunskaper till mobilen.
Tar Lär dig React & öva upp Next.js och React 19?
Ja. Kurserna tar upp funktioner i React 19 och Server Components, SSR och hydrering, streaming samt Next.js App Router med datahämtning, cachning och autentisering. Det finns också en kurs i React Native fundamentals för webbutvecklare.
Vilka typer av projekt kan jag bygga?
Det finns 20 vägledda projekt som byggs steg för steg: en gilla-knapp, profilkort, en dricksräknare, ett quizspel, ett stoppur, ett registreringsformulär, en kundvagn, ett bildkarusellgalleri, en paginerad lista och en todo-app. Varje steg kontrollerar att komponenten fungerar innan du går vidare.
Är Lär dig React & öva gratis?
Det är gratis att ladda ner. Gratisversionen innehåller den första kursen, ett vägledt projekt, två koduppdrag, kodredigeraren med liveförhandsvisning, Hooks Lab, props-reglage, Bug Hunt och tre UI Match-kontroller per dag, och den visar annonser. Pro låser upp alla kurser, projekt och uppdrag, AI-mentorn, renderingsprofileraren och certifieringsprovet samt tar bort annonserna.
Finns det ett certifikat eller förberedelser inför intervjuer?
Om du klarar slutprovet får du ett delbart certifikat, som ingår i Pro. Inför intervjuer finns 50 intervjufrågor, ett quiz med 50 frågor och ett fusklapp för att öva på grundläggande koncept.
Körs koden på en server?
Nej. Runtime-miljön är inbyggd i appen, så koden kompileras och renderas på enheten. Därför kan du trycka på knappen du byggde och se gränssnittet reagera direkt i förhandsvisningen.
Vilka språk och plattformar stöder den?
Lär dig React & öva fungerar på iOS och Android och finns på 22 språk. Appen har åldersklassningen 4+ och kräver iOS 15.1 eller senare på iPhone.
Kom igång
Rendera din första komponent i dag
Gratis att komma igång på iOS och Android, på 22 språk.
Mer från CoddyKit
Tillgänglig på iOS och Android.