Formation React Native avancé et déploiement

Leçon 1 • Architecture de Base et Modèle de Composants

Examinez le pont JavaScript, le modèle de threads natifs et la hiérarchie des composants. La compréhension de cette architecture guide les décisions de performance dans les chapitres suivants.

Leçon 2 • Gestion d'État avec les 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 fondation garantit que tous les exercices suivants s'exécutent sans erreurs d'outillage.

Leçon 4 • Débogage et Outils de Développement

Utilisez Flipper, React DevTools et la console du bundler Metro pour diagnostiquer les problèmes. Des compétences de débogage efficaces accélèrent le développement dans chaque chapitre suivant.

Leçon 1 • Navigation Imbriquée et Conditionnelle

Composez des navigateurs imbriqués et affichez conditionnellement les 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 construisez des navigateurs par pile, par onglets et par tiroir. Ces primitives forment le squelette de chaque flux d'écran dans le projet du cours.

Leçon 3 • Optimisation des Performances de Navigation

Appliquez le chargement paresseux, le démontage d'écran et la mémorisation des en-têtes pour réduire la surcharge de navigation. Ces optimisations améliorent directement les taux 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 des données à distance avec React Query. Cette section fait le pont entre l'état UI local et les données backend couvertes dans le chapitre sur les API.

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

Construisez des magasins globaux minimaux avec Zustand et comparez ses compromis avec Redux. Zustand convient aux modules de fonctionnalités plus petits où la surcharge de Redux n'est pas nécessaire.

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 l'État Délimité

Utilisez le contexte React avec mémorisation pour partager l'état dans les limites des fonctionnalités. Le contexte complète les magasins globaux en évitant le forage de props 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. Un durcissement 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

Construisez des flux de connexion, d'inscription et d'actualisation de jetons avec OAuth2 et JWT. Un cycle de vie sécurisé des jetons empêche 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 avec react-native-keychain. Le stockage sécurisé natif de la plateforme empêche l'exposition des identifiants à partir de l'accès au système de fichiers.

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

Implémentez les flux d'actualisation de jetons, l'épinglage de certificats et la gestion sécurisée des en-têtes. Le durcissement de la sécurité ici protège 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 le prérequis pour la file d'attente hors ligne construite ensuite.

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

Configurez les instances Axios, les intercepteurs et la logique de nouvelle tentative pour une communication HTTP robuste. Une configuration Axios centralisée empêche la duplication de la gestion des erreurs dans l'ensemble du 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 la 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 éviter les rendus inutiles des composants. Ces techniques réduisent directement la charge de travail du thread JS sur les écrans très interactifs.

Leçon 2 • Optimisation du Bundle JavaScript

Appliquez la division de code, les requires en ligne et le format de bundle RAM pour réduire le temps de démarrage. La taille du bundle affecte directement le temps d'interactivité au premier lancement.

Leçon 3 • Profilage avec Flipper et Hermes

Utilisez le profileur Hermes et le plugin de performance Flipper pour identifier les points chauds CPU et mémoire. Profiler avant d'optimiser évite de gaspiller des efforts sur du code non limitant.

Leçon 4 • Optimisation des Images et des Ressources

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

Leçon 1 • Comprendre le Pont Natif

Retracez comment les appels JavaScript traversent le pont vers le code natif et reviennent de manière asynchrone. Ce modèle mental est nécessaire avant d'écrire du 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 fournissent un 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 l'accès 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 de TurboModules introduits dans la nouvelle architecture.

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

Faites le rendu des composants isolément et affirmez la sortie visible par l'utilisateur avec les requêtes RNTL. Les tests de composants valident le comportement de l'interface utilisateur sans nécessiter un appareil en cours d'exécution.

Leçon 2 • Configuration du Pipeline d'Intégration Continue

Configurez un service CI pour exécuter les tests, le lint et le build sur chaque pull request. Les portes CI 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 E2E 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 hooks et les utilitaires et des tests d'intégration pour les tranches Redux avec Jest. Une suite de tests fiable détecte les régressions avant qu'elles n'atteignent le pipeline CI.