React Native + Hooks-kurs

Lektion 1 • JSX och den virtuella DOM:en

Förklarar JSX-kompilering, key prop-avstämning och hur Reacts diffningsalgoritm minimerar native-uppdateringar. Kopplar samman beteendet hos den virtuella DOM:en med prestanda.

Lektion 2 • Fördjupning i funktionella komponenter

Jämför klasskomponenter med funktionella komponenter och förklarar varför hooks kräver funktionella komponenter. Etablerar det mentala konceptet för tillståndslösa UI-funktioner.

Lektion 3 • Genomgång av modern JavaScript-syntax

Täcker destrukturering, spread/rest, pilfunktioner och async/await så som de används i React Native-kodbaser. Minskar syntaxförvirring i senare hook-exempel.

Lektion 1 • Vad är React Native

Förklarar bryggarkitekturen, JavaScript-tråden och det native modulsystemet. Positionerar React Native i förhållande till webb-React och native-utveckling.

Lektion 2 • Skapa ditt första projekt

Använder React Native CLI för att skapa ett projekt och förklarar den genererade filstrukturen. Kopplar mappstrukturen till byggpipelinen.

Lektion 3 • Grundläggande inbyggda komponenter

Introducerar View, Text, Image, ScrollView och TextInput som de primitiva byggstenarna för UI. Visar hur var och en mappas till en native widget.

Lektion 4 • Installera utvecklingsmiljön

Installerar Node, Watchman, Xcode och Android Studio med rätt SDK-versioner. Validerar verktygskedjan genom att köra ett tomt projekt på båda plattformarna.

Lektion 1 • Hantera tillstånd med useState

Introducerar useState-signaturen, tillståndsinitiering och mönster för uppdateringsfunktioner. Täcker vanliga fallgropar som inaktuella stängningar och batchede uppdateringar.

Lektion 2 • Bygga en Counter- och Timer-app

Tillämpar useState och useEffect tillsammans i en praktisk räknare och nedräkningstimer. Förstärker tillståndsuppdateringar, intervall och rensning i en verklig komponent.

Lektion 3 • Sidoeffekter med useEffect

Förklarar beroendearrayen, rensningsfunktioner och exekveringstidpunkt i förhållande till rendering. Ersätter alla tre klasslivscykelmetoderna med en enda hook.

Lektion 4 • Hämta fjärrdata med hooks

Bygger ett datahämtningsmönster med useState för tillstånd som data/inladdning/fel och useEffect för anropet. Introducerar UI-tillstånd för inladdning och fel.

Lektion 1 • Prestandahooks: useMemo och useCallback

Memoiserar beräkningstunga operationer med useMemo och stabiliserar funktionsreferenser med useCallback för att förhindra onödiga omrenderingar av barnkomponenter.

Lektion 2 • Imperativa API:er med useImperativeHandle

Exponerar ett kontrollerat imperativt API från en barnkomponent till en förälders ref med useImperativeHandle och forwardRef. Användbart för anpassade inmatningskomponenter.

Lektion 3 • Referera till värden med useRef

Använder useRef för att bevara föränderliga värden över renderingar utan att trigga omrenderingar och för att komma åt native komponentinstanser. Jämför med useState för icke-UI-data.

Lektion 4 • Komplext tillstånd med useReducer

Implementerar en reducer-funktion och dispatch-mönster för tillståndsmaskiner med flera åtgärder. Jämför useReducer med useState för formulär- och varukorgsscenarier.

Lektion 1 • useForm: Hook för formulärtillståndshantering

Bygger en useForm-hook som hanterar fältvärden, valideringsfel och inskickningstillstånd. Ersätter repetitiv formulärlogik på flera skärmar.

Lektion 2 • Testa anpassade hooks

Använder React Native Testing Library och renderHook för att enhetstesta anpassade hooks isolerat. Täcker act, async act och mockning av externa beroenden.

Lektion 3 • useFetch: Hook för datahämtning

Extraherar mönstret med hämta-ladda-fel till en återanvändbar useFetch-hook med konfigurerbar URL och alternativ. Visar hur anpassade hooks minskar komponentboilerplate.

Lektion 4 • useLocalStorage och useAsyncStorage

Omsluter AsyncStorage i en hook som speglar useState-API:et för beständiga nyckel-värde-data. Hanterar serialisering, deserialisering och felfall.

Lektion 1 • Mönster för stack-navigator

Skapar en native stack-navigator med push, pop och replace-övergångar. Skickar parametrar mellan skärmar och läser dem med useRoute.

Lektion 2 • Tabb- och låd-navigatorer

Lägger till tabb- och låd-navigatorer och nästlar dem inuti stacken. Anpassar tabbikoner och lådans innehåll med hook-drivet tillstånd.

Lektion 3 • Autentiseringsflöde med navigation

Implementerar en villkorlig navigator som växlar mellan auth- och app-stackar baserat på token-tillstånd lagrat i kontext. Visar verklighetstrogen skyddad routing.

Lektion 4 • Navigationshooks på djupet

Använder useNavigation, useRoute, useFocusEffect och useIsFocused för att styra navigationsbeteende inifrån komponenter. Ersätter prop drilling av navigationsobjekt.

Lektion 1 • Servertillstånd med React Query

Använder React Querys useQuery- och useMutation-hooks för att hantera servertillstånd, cachelagring och bakgrundsåterhämtning. Eliminerar manuell hantering av laddnings-/feltillstånd.

Lektion 2 • Integration med Redux Toolkit

Konfigurerar en Redux-butik med createSlice, RTK Query för datahämtning och Provider-omslutningen. Kopplar komponenter med useSelector och useDispatch.

Lektion 3 • Context API-mönster i stor skala

Delar upp kontext i tillstånds- och dispatch-leverantörer för att förhindra onödiga omrenderingar i stora träd. Kombinerar useReducer med kontext för ett Redux-liknande mönster.

Lektion 4 • Globalt tillstånd med Zustand

Skapar en Zustand-butik med åtgärder och väljare och konsumerar den sedan med ett enda hook-anrop. Jämför Zustands minimala API med Context-boilerplate.

Lektion 1 • Profilering och diagnostisering av prestanda

Använder Flipper, React DevTools-profileraren och prestandamonitorn för att identifiera långsamma renderingar och ryckighet i JS-tråden. Fastställer ett arbetsflöde för optimering där man mäter först.

Lektion 2 • Optimera listor och bilder

Tillämpar optimerings-egenskaper för FlatList, bildcachning och lat inladdning för att eliminera scroll-ryckighet. Täcker windowSize, initialNumToRender och getItemLayout.

Lektion 3 • Testa komponenter och hooks

Skriver enhets- och integrationstester med Jest och React Native Testing Library, som täcker användarinteraktioner och asynkront beteende. Uppnår meningsfull täckning utan att testa implementationsdetaljer.

Lektion 4 • Animation med Animated och Reanimated

Bygger smidiga animationer med Animated API och uppgraderar till Reanimated 2 för UI-trådsanimationer. Täcker spring-, timing- och gestdriven rörelse.