Cursus React Native Development voor Gevorderden

Les 1 • Overzicht van de React Native-architectuur

Behandelt de bridge, JSI en Fabric-renderingpipeline. Verbindt architecturale kennis met prestatiebeslissingen die gedurende de cursus worden genomen.

Les 2 • Projectstructuur en bestandsconventies

Definieert schaalbare mapstructuren en naamgevingsconventies voor grote apps. Een consistente structuur vermindert wrijving bij het inwerken en ondersteunt modulaire groei.

Les 3 • Configuratie van de ontwikkelomgeving

Zet Xcode, Android Studio en CLI-tooling op voor cross-platform builds. Een juiste opzet voorkomt omgevingsgerelateerde bugs in latere hoofdstukken.

Les 1 • Zustand en lichtgewicht statusstores

Introduceert Zustand als een minimaal alternatief voor afgebakende globale status. Studenten kiezen het juiste gereedschap op basis van app-complexiteit en teamgrootte.

Les 2 • Context-API en prestatievalkuilen

Leert Context voor het delen van status tussen componenten, terwijl onnodige herrenders worden vermeden. Sluit direct aan bij globale statusbeslissingen in grotere apps.

Les 3 • Redux Toolkit-integratie

Implementeert Redux Toolkit-slices, thunks en selectors in een React Native-app. Biedt een productierijp globaal statuspatroon voor teamomgevingen.

Les 4 • Diepgaande analyse van React Hooks

Onderzoekt useState, useReducer, useRef en aangepaste hooks in detail. Solide hook-kennis is de voorwaarde voor alle volgende statusbeheerpatronen.

Les 1 • Deep Linking en universal links

Configureert URL-schema's en universal links om specifieke app-schermen te openen vanuit externe bronnen. Cruciaal voor marketingcampagnes en pushmeldingstromen.

Les 2 • Authenticatiestromen en beveiligde routes

Implementeert voorwaardelijke navigatie op basis van authenticatiestatus met behulp van navigatorschakeling. Verbindt statusbeheerkennis met praktijkgerichte toegangscontrolepatronen.

Les 3 • Tab- en drawer-navigatiepatronen

Bouwt navigators met onderste tabbladen en zijmenu met aangepaste UI en badge-ondersteuning. Maakt complexe app-schillen mogelijk die in productie-mobiele apps worden gebruikt.

Les 4 • Typeveilige navigatie met TypeScript

Definieert getypeerde routeparameterlijsten en dwingt navigatiecontracten af tijdens compileertijd. Voorkomt runtime-routeringsfouten in grote codebases.

Les 1 • React Native Reanimated 3

Implementeert worklet-gebaseerde animaties die volledig op de UI-thread draaien. Bereikt haperingsvrije prestaties voor complexe, gebaren-gestuurde interacties.

Les 2 • Lottie- en SVG-animaties

Integreert Lottie JSON-animaties en react-native-svg voor vectorafbeeldingen. Breidt de animatietoolkit uit tot buiten code-gestuurde beweging.

Les 3 • Integratie van Gesture Handler

Combineert React Native Gesture Handler met Reanimated voor veeg-, knijp- en pan-gebaren. Maakt interacties met een native gevoel mogelijk die overeenkomen met platformconventies.

Les 4 • Geavanceerde StyleSheet-technieken

Behandelt dynamische thema's, responsieve eenheden en platformspecifieke stylingoverschrijvingen. Legt de stylingbasis voor het animatie- en gebarenwerk dat komt.

Les 1 • Het native modulesysteem begrijpen

Legt het legacy-bridge-modulesysteem en de beperkingen ervan uit vóór JSI. Biedt context voor waarom TurboModules werden geïntroduceerd en wanneer elke benadering van toepassing is.

Les 2 • TurboModules en JSI-integratie

Implementeert een TurboModule met behulp van de C++ JSI-laag van de nieuwe architectuur voor synchrone aanroepen. Levert meetbare prestatiewinsten op ten opzichte van bridge-gebaseerde modules.

Les 3 • Schrijven van Android-native modules in Kotlin

Bouwt een Kotlin ReactContextBaseJavaModule en registreert deze in een package. Weerspiegelt het iOS-modulehoofdstuk om cross-platform feature-pariteit te garanderen.

Les 4 • Native UI-componenten en Fabric

Creëert aangepaste native weergavecomponenten die worden weergegeven via de Fabric-renderer. Maakt het mogelijk om platform-native UI-widgets in te sluiten die niet beschikbaar zijn als JavaScript-componenten.

Les 1 • Optimalisatie van JavaScript-bundel

Verkleint de bundelgrootte door codesplitsing, tree shaking en Hermes-bytecode-compilatie. Kleinere bundels verbeteren de opstarttijd op alle apparaatniveaus.

Les 2 • Profileringstools en meetgegevens

Gebruikt Flipper, Hermes-profiler en React DevTools om JS- en render-knelpunten te identificeren. Stelt een meting-eerst-mentaliteit vast voordat optimalisaties worden toegepast.

Les 3 • Lijstprestaties met FlatList en FlashList

Optimaliseert het renderen van grote lijsten met FlatList-props en de Shopify FlashList-bibliotheek. Adresseert direct een van de meest voorkomende prestatieknelpunten in mobiele apps.

Les 4 • Geheugenbeheer en lekpreventie

Identificeert geheugenlekken door niet-gewiste subscripties, closures en native toewijzingen. Voorkomt app-crashes en verminderde prestaties gedurende lange sessies.

Les 1 • Foutbewaking en crashrapportage

Integreert foutafhandelingscomponenten en een crashrapportage-SDK voor productiezichtbaarheid. Sluit de feedbacklus tussen implementatie en probleemoplossing.

Les 2 • Componenttesten met RNTL

Test weergegeven componenten met behulp van React Native Testing Library-queries en gebruikersgebeurtenissen. Valideert UI-gedrag zonder afhankelijk te zijn van implementatiedetails.

Les 3 • Unit testen met Jest

Schrijft unit tests voor hooks, utilities en reducers met Jest en React Native Testing Library. Stelt de basistestlaag in voor de volledige QA-piramide.

Les 4 • Debugtechnieken en -tools

Past Flipper-plugins, Chrome DevTools en Reactotron toe voor runtime-debuggen. Efficiënt debuggen verkort de gemiddelde oplostijd voor productieproblemen.

Les 1 • Over-the-air-updates met CodePush

Implementeert JavaScript-bundelupdates op productieapparaten zonder winkelbeoordelingscycli. Maakt snelle hotfixes en A/B-testen van UI-wijzigingen mogelijk.

Les 2 • Codesigning en certificaatbeheer

Beheert iOS-provisioningprofielen en Android-keystores voor ondertekende release-builds. Correcte ondertekening is een voorwaarde voor elke stap in de winkelinzending.

Les 3 • Geautomatiseerde build-pipelines

Configureert GitHub Actions- of Bitrise-workflows om te bouwen, testen en archiveren bij elke push. Automatisering elimineert handmatige build-fouten en versnelt het release-cadans.

Les 4 • Fastlane-automatisering voor winkelinzending

Gebruikt Fastlane-lanes om TestFlight-uploads en Play Store-implementaties te automatiseren. Verkort de inzendingstijd van uren naar minuten met herhaalbare scripts.