Formation React Native pour Android et iOS

Leçon 1 • Structuration de Votre Premier Projet

Utilise la CLI React Native et la CLI Expo pour générer des modèles de projet et compare leurs compromis. Les étudiants exécutent une application Hello World sur les simulateurs Android et iOS.

Leçon 2 • Compréhension de l'Architecture React Native

Couvre le pont JavaScript, les modules natifs et le nouveau moteur de rendu Fabric. Fournit le modèle mental nécessaire pour déboguer et optimiser tout au long du cours.

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

Présente Flipper, les DevTools React et le menu développeur intégré à l'application pour inspecter l'état et les appels réseau. Les compétences en débogage acquises ici s'appliquent à chaque chapitre suivant.

Leçon 1 • Composants Fonctionnels et JSX

Revise la syntaxe JSX, la composition de composants et le passage de props dans un contexte React Native. Établit l'état d'esprit orienté composants nécessaire pour tout travail d'interface à venir.

Leçon 2 • Gestion d'État avec les Hooks

Couvre useState, useReducer et useRef pour gérer l'état local des composants et les effets secondaires. Ces hooks alimentent les fonctionnalités interactives construites tout au long du cours.

Leçon 3 • API Context pour l'État Partagé

Implémente le Contexte React avec useContext pour partager l'état du thème et de l'authentification entre les composants. Fournit une solution légère d'état global avant l'introduction de Redux.

Leçon 4 • Effets Secondaires et Cycle de Vie avec useEffect

Explique le tableau de dépendances de useEffect, les fonctions de nettoyage et les pièges courants comme les fermetures obsolètes. Une utilisation correcte des effets est cruciale pour la récupération de données abordée dans les chapitres suivants.

Leçon 1 • Système de Mise en Page Flexbox

Explique flexDirection, justifyContent, alignItems et le dimensionnement flex tel qu'appliqué dans React Native. La maîtrise de ces concepts permet des mises en page cohérentes multiplateformes dans tout le travail de projet.

Leçon 2 • Techniques de Conception Adaptative

Utilise l'API Dimensions, le hook useWindowDimensions et le dimensionnement basé sur des pourcentages pour des mises en page adaptatives. Garantit que les interfaces s'affichent correctement sur les téléphones et tablettes de tailles d'écran variées.

Leçon 3 • API StyleSheet et Thématisation

Enseigne StyleSheet.create, les styles en ligne et la composition dynamique de styles. Les étudiants construisent un objet de thème réutilisable utilisé dans le projet du cours.

Leçon 1 • Navigation par Onglets et Tiroir

Implémente les navigateurs par onglets en bas et par tiroir latéral avec des icônes et la prise en charge des badges. Ces patrons fournissent la structure d'application de premier niveau utilisée dans le projet du cours.

Leçon 2 • Liens Profonds et Gestion des URL

Configure les schémas d'URL et les liens universels pour ouvrir des écrans spécifiques à partir de sources externes. Les liens profonds sont nécessaires pour la navigation par notifications push abordée plus tard.

Leçon 3 • Configuration et Concepts de React Navigation

Installe les dépendances de React Navigation et explique la hiérarchie des navigateurs, des écrans et des routes. Cette base est nécessaire avant de pouvoir implémenter un quelconque patron de navigation.

Leçon 4 • Patrons de Flux d'Authentification

Implémente des piles de navigation conditionnelles qui basculent entre les écrans d'authentification et de l'application principale en fonction de l'état du jeton. Ce patron est réutilisé dans le projet complet du cours.

Leçon 1 • Récupération de Données avec l'API Fetch

Utilise l'API Fetch et Axios pour effectuer des requêtes GET, POST, PUT et DELETE avec une gestion appropriée des erreurs. Les appels réseau alimentent le contenu dynamique du projet du cours.

Leçon 2 • SQLite et Données Locales Structurées

Intègre une bibliothèque SQLite pour créer des tables, exécuter des requêtes et gérer des données relationnelles sur l'appareil. Le stockage structuré est nécessaire pour la fonctionnalité hors ligne prioritaire du projet.

Leçon 3 • Stratégies de Mise en Cache et Hors Ligne

Implémente le mécanisme de mise en cache stale-while-revalidate et la détection du statut du réseau pour améliorer l'expérience utilisateur hors ligne. Ces stratégies garantissent que l'application reste utilisable même sans connexion au réseau informatique.

Leçon 4 • Patrons Async/Await et Promise

Applique la syntaxe async/await, Promise.all et les patrons d'annulation pour gérer les requêtes concurrentes. Un code asynchrone propre prévient les conditions de concurrence dans les écrans riches en données.

Leçon 1 • Intégration de la Géolocalisation et des Cartes

Récupère l'emplacement de l'appareil avec l'API de géolocalisation et affiche des cartes en utilisant react-native-maps. Les fonctionnalités de localisation alimentent l'écran de carte dans le projet du cours.

Leçon 2 • Accès à l'Appareil Photo et à la Médiathèque

Intègre react-native-vision-camera et l'API de la médiathèque pour la capture et la sélection de photos. Les fonctionnalités de l'appareil photo sont utilisées dans les écrans de profil et de téléchargement de contenu du projet.

Leçon 3 • Configuration des Notifications Push

Configure Firebase Cloud Messaging pour Android et APNs pour iOS afin de délivrer des notifications push. La gestion des notifications se connecte aux patrons de liens profonds du Chapitre 4.

Leçon 4 • Capteurs, Biométrie et Haptique

Accède aux données de l'accéléromètre, à l'authentification biométrique et aux API de retour haptique pour une UX améliorée. Ces fonctionnalités distinguent les applications mobiles natives des alternatives web.

Leçon 1 • React Query pour l'État Serveur

Utilise les hooks useQuery et useMutation de React Query pour séparer l'état serveur de l'état de l'interface. Cette approche simplifie la synchronisation des données par rapport aux thunks Redux manuels.

Leçon 2 • Thunks Asynchrones et RTK Query

Gère la récupération de données asynchrone avec createAsyncThunk et la couche de récupération de données RTK Query. RTK Query remplace la logique de récupération manuelle et la mise en cache du Chapitre 5.

Leçon 3 • Zustand pour un État Global Léger

Implémente des magasins Zustand pour l'état de l'interface qui n'appartient pas aux bibliothèques d'état serveur. L'API minimale de Zustand complète React Query dans une architecture d'état moderne.

Leçon 4 • Fondamentaux de Redux Toolkit

Crée des slices, des réducteurs et des actions avec les API createSlice et configureStore de Redux Toolkit. RTK élimine le code standard et constitue l'approche Redux standard de l'industrie.

Leçon 1 • Profilage et Optimisation des Performances

Utilise le moteur Hermes, le panneau de performance Flipper et le traçage des rendus pour identifier les goulots d'étranglement. Les techniques d'optimisation ici s'appliquent à tous les écrans construits dans le projet du cours.

Leçon 2 • Tests unitaires et d'intégration

Écrit des tests de composants avec Jest et React Native Testing Library, ainsi que des tests d'intégration pour les flux de navigation. Une base de code testée réduit le risque de régressions pendant la phase de déploiement.

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

Automatise les flux utilisateur complets sur des simulateurs réels en utilisant Detox pour une couverture E2E fiable. Les tests E2E détectent les problèmes d'intégration que les tests unitaires ne peuvent pas identifier.

Leçon 4 • Animations avec l'API Animated et Reanimated

Construit des animations d'interface fluides en utilisant l'API Animated et React Native Reanimated 3 sur le thread de l'interface. Les animations fluides sont un différenciateur clé des applications mobiles de haute qualité.