Formation React Native avancée et déploiement

Leçon 1 • Architecture de base et modèle de composants

Examinez le pont JavaScript, le modèle de fil d'exécution natif et la hiérarchie des composants. La compréhension de cette architecture guide les décisions de rendement dans les chapitres ultérieurs.

Leçon 2 • Gestion d'état avec les crochets (Hooks)

Appliquez useState, useEffect et useReducer pour gérer l'état local des composants. Ces patrons sous-tendent chaque fonctionnalité avec état construite tout au long du cours.

Leçon 3 • Configuration de l'environnement de développement

Configurez Node.js, Watchman, Xcode et Android Studio pour le développement multiplateforme. Cette base garantit que tous les exercices suivants s'exécutent sans erreurs de chaîne d'outils.

Leçon 4 • Débogage et outils de développement

Utilisez Flipper, React DevTools et la console du regroupement Metro pour diagnostiquer les problèmes. Des compétences de débogage efficaces accélèrent le développement dans tous les chapitres suivants.

Leçon 1 • Navigation imbriquée et conditionnelle

Composez des navigateurs imbriqués et affichez conditionnellement des routes en fonction de l'état d'authentification. Ce patron est essentiel pour séparer les sections authentifiées et publiques de l'application.

Leçon 2 • Concepts de base de React Navigation

Installez et configurez React Navigation, puis créez des navigateurs à pile, à onglets et à tiroirs. Ces primitives forment le squelette de chaque flux d'écran dans le projet du cours.

Leçon 3 • Optimisation de la performance de la navigation

Appliquez le chargement différé, le démontage d'écrans et la mémorisation des en-têtes pour réduire la surcharge de navigation. Ces optimisations améliorent directement les fréquences d'images sur les appareils bas de gamme.

Leçon 1 • État serveur avec React Query

Gérez la récupération, la mise en cache et la synchronisation de données à distance à l'aide de React Query. Cette section fait le pont entre l'état UI local et les données de back-end abordées dans le chapitre sur l'API.

Leçon 2 • État léger avec Zustand

Créez des magasins globaux minimaux à l'aide de Zustand et comparez ses compromis avec Redux. Zustand convient aux modules de fonctionnalités plus petits où la surcharge de Redux est inutile.

Leçon 3 • Persistance et réhydratation de l'état

Persistez l'état dans AsyncStorage et MMKV, puis réhydratez-le au lancement de l'application. Une persistance fiable est essentielle pour les applications fonctionnant hors ligne, construites dans les chapitres suivants.

Leçon 4 • API Context pour un état limité à une portée

Utilisez React Context avec mémorisation pour partager l'état au sein des limites d'une fonctionnalité. Context complète les magasins globaux en évitant le perçage d'accessoires dans les composants imbriqués.

Leçon 1 • Prévention des vulnérabilités mobiles courantes

Atténuez l'ingénierie inverse, les fuites de captures d'écran et la journalisation non sécurisée dans les builds de production. Le renforcement proactif réduit l'exposition aux menaces de sécurité mobiles courantes.

Leçon 2 • Chiffrement des données et contrôles de confidentialité

Chiffrez les bases de données locales avec SQLCipher et appliquez les principes de minimisation des données. Le chiffrement au repos protège les données utilisateur si un appareil est compromis.

Leçon 3 • Flux d'authentification et gestion des jetons

Créez des flux de connexion, d'inscription et d'actualisation de jetons à l'aide d'OAuth2 et de JWT. Une gestion sécurisée du cycle de vie des jetons prévient le détournement de session dans les applications de production.

Leçon 4 • Stockage sécurisé et trousseau

Stockez les identifiants et les jetons dans le Trousseau iOS et le Keystore Android à l'aide de react-native-keychain. Le stockage sécurisé natif de la plateforme empêche l'exposition des identifiants par un accès au système de fichiers.

Leçon 1 • Communication API sécurisée

Implémentez des flux d'actualisation de jetons, l'épinglage de certificats et une gestion sécurisée des en-têtes. Le renforcement de la sécurité protège ici les données utilisateur dans le chapitre sur l'authentification qui suit.

Leçon 2 • Détection de l'état du réseau

Utilisez NetInfo pour détecter les changements de connectivité et adapter l'interface utilisateur en conséquence. Une détection précise de l'état du réseau est la condition préalable à la file d'attente hors ligne construite ensuite.

Leçon 3 • Intégration d'API REST avec Axios

Configurez des instances Axios, des intercepteurs et une logique de nouvelle tentative pour une communication HTTP robuste. Une configuration Axios centralisée évite la duplication de la gestion des erreurs dans l'ensemble de la base de code.

Leçon 4 • GraphQL avec Apollo Client

Configurez Apollo Client, écrivez des requêtes et des mutations, et gérez le cache normalisé. GraphQL réduit le sur-récupération par rapport à REST pour les graphes de données complexes.

Leçon 1 • Mémorisation et optimisation du rendu

Appliquez React.memo, useMemo et useCallback pour empêcher les rendus de composants inutiles. Ces techniques réduisent directement la charge de travail du fil JS sur les écrans à forte interaction.

Leçon 2 • Optimisation du paquet JavaScript

Appliquez la division de code, les demandes d'importation en ligne et le format de paquet RAM pour réduire le temps de démarrage. La taille du paquet affecte directement le temps nécessaire pour devenir interactif au premier lancement.

Leçon 3 • Profilage avec Flipper et Hermes

Utilisez le profileur Hermes et le plugin de rendement Flipper pour identifier les points chauds du CPU et de la mémoire. Profiler avant d'optimiser évite de gaspiller des efforts sur du code qui n'est pas un goulot d'étranglement.

Leçon 4 • Optimisation des images et des actifs

Utilisez FastImage, le format WebP et le chargement progressif pour réduire le temps de rendu des images. Les actifs optimisés réduisent la pression mémoire et améliorent la vitesse de chargement perçue.

Leçon 1 • Compréhension du pont natif

Tracez comment les appels JavaScript traversent le pont vers le code natif et reviennent de manière asynchrone. Ce modèle mental est requis avant d'écrire un code de module natif.

Leçon 2 • Écriture de modules natifs Android en Kotlin

Implémentez un ReactContextBaseJavaModule en Kotlin et enregistrez-le dans un ReactPackage. Les modules Kotlin donnent accès aux API système Android et aux fonctionnalités matérielles.

Leçon 3 • Écriture de modules natifs iOS en Swift

Créez un RCTBridgeModule en Swift, exposez des méthodes et émettez des événements vers JavaScript. Les modules Swift permettent d'accéder aux API exclusives iOS indisponibles dans la couche JavaScript.

Leçon 4 • JSI et la nouvelle architecture

Utilisez JSI pour appeler des fonctions C++ natives de manière synchrone sans sérialisation du pont. JSI est le fondement de Fabric et des TurboModules introduits dans la nouvelle architecture.

Leçon 1 • Tests de composants avec React Native Testing Library

Rendez les composants de manière isolée et effectuez des assertions sur la sortie visible par l'utilisateur à l'aide des requêtes RNTL. Les tests de composants valident le comportement de l'interface utilisateur sans nécessiter d'appareil en cours d'exécution.

Leçon 2 • Configuration du pipeline d'intégration continue

Configurez un service d'intégration continue pour exécuter des tests, du lint et des builds sur chaque demande de retrait. Les barrières d'intégration continue automatisées empêchent le code cassé d'atteindre la branche principale.

Leçon 3 • Tests de bout en bout avec Detox

Écrivez des tests Detox qui pilotent un simulateur réel à travers des flux utilisateur complets. Les tests de bout en bout détectent les échecs d'intégration invisibles pour les tests unitaires et de composants.

Leçon 4 • Tests unitaires et d'intégration avec Jest

Écrivez des tests unitaires pour les crochets et les utilitaires et des tests d'intégration pour les tranches Redux à l'aide de Jest. Une suite de tests fiable détecte les régressions avant qu'elles n'atteignent le pipeline d'intégration continue.