Formation React Native avancée et déploiement

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

Examinez le pont JavaScript, le modèle de thread natif 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 modèles 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 bundler Metro pour diagnostiquer les problèmes. Des compétences efficaces en débogage 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 des routes en fonction de l'état d'authentification. Ce modèle 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 à pile, à onglets et à 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 la fréquence 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 distantes avec React Query. Cette section fait le pont entre l'état local de l'interface utilisateur et les données backend abordées dans le chapitre sur l'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 fonctionnalités plus petits où la surcharge de Redux n'est pas nécessaire.

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

Persistez l'état vers 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 à l'intérieur de limites de fonctionnalités. 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 le génie 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 de rafraîchissement des jetons avec OAuth2 et JWT. Une gestion sécurisée du cycle de vie 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 d'un accès au système de fichiers.

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

Implémentez les flux de rafraîchissement des jetons, l'épingle de certificat et la gestion sécurisée des en-têtes. Le durcissement 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 le prérequis pour la file d'attente hors ligne construite ensuite.

Leçon 3 • Intégration d'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 évite 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 récupération excessive 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 thread JS sur les écrans à forte interaction.

Leçon 2 • Optimisation du bundle JavaScript

Appliquez la division de code, les importations en ligne et le format de bundle RAM pour réduire le temps de démarrage. La taille du bundle affecte directement le temps jusqu'à l'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 le gaspillage d'efforts sur du code qui n'est pas un goulot d'étranglement.

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

Tracez comment un appel JavaScript traverse le pont vers le code natif et revient de manière asynchrone. Ce modèle mental est requis 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 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 TurboModules introduits dans la nouvelle architecture.

Leçon 1 • Tests de composants avec la bibliothèque de tests React Native

Affichez 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 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 linting et la construction sur chaque demande de fusion. Les barrières 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.