R

Conclusion - Séance 2

Vous avez terminé la Séance 2 : État, Formulaires et Persistance. Vous êtes maintenant capable de créer des applications mobiles interactives qui conservent les données de l'utilisateur.

Ce que vous maîtrisez

Information

Vous avez acquis les compétences pour gérer l'état, les formulaires et la persistance des données dans une application React Native. Chaque concept de cette séance sera réutilisé dans les séances suivantes.

État sur mobile

  • useState : même syntaxe qu'en React web, mêmes règles d'immutabilité
  • Opérations sur les listes : ajouter (...spread), supprimer (filter), modifier (map)
  • Contraintes mobiles : clavier virtuel (Keyboard.dismiss()), arrière-plan (données volatiles)

TextInput et saisie

  • TextInput : remplace <input> et <textarea> du HTML
  • onChangeText : reçoit directement la chaîne (pas d'événement)
  • keyboardType : adapte le clavier au type de données
  • secureTextEntry : champ mot de passe
  • Navigation entre champs : returnKeyType + onSubmitEditing + ref.focus()

Formulaires

  • Composants contrôlés : même pattern qu'en React web (value + onChangeText)
  • KeyboardAvoidingView : décale le contenu quand le clavier apparaît
  • ScrollView : pour les formulaires longs, avec keyboardShouldPersistTaps
  • Validation : objet errors, styles conditionnels, messages d'erreur

Cycle de vie

  • useEffect : identique au web, pour le chargement et la sauvegarde
  • AppState : détecter foreground/background (sauvegarder avant fermeture)
  • useFocusEffect : réagir à la visibilité de l'écran dans la navigation

Persistance

  • AsyncStorage : équivalent de localStorage, asynchrone, chaînes uniquement
  • JSON.stringify/parse : pour stocker objets et tableaux
  • Pattern charger/sauvegarder : useEffect au montage + useEffect sur les données
  • Gestion d'erreurs : try/catch systématique

Mode offline

  • NetInfo : détecter l'état du réseau
  • Offline-first : données locales en priorité, synchronisation quand possible
  • UX adaptée : bannières, boutons désactivés, indicateurs de synchronisation

Web vs Mobile : état et données

ConceptReact web (R4A10)React Native (R4A11)
Gestion d'étatuseStateuseState (identique)
Saisie de texte<input onChange={...} /><TextInput onChangeText={...} />
Zone multiligne<textarea><TextInput multiline />
Formulaire<form onSubmit={...}>Pas de <form>, Pressable + onPress
ClavierPhysique (ne gêne pas)Virtuel (KeyboardAvoidingView)
Effets de borduseEffectuseEffect + AppState + useFocusEffect
Stockage locallocalStorage (synchrone)AsyncStorage (asynchrone)
Mode hors ligneRare (Service Workers)Courant (NetInfo, offline-first)
Arrière-planOnglet reste en mémoireApp peut être tuée (AppState)
Ce qui reste identiqueuseState, useEffect, immutabilité, composants contrôlés, validation, JSON.stringify/parse

La Séance 3 : APIs, Caméra et Géolocalisation

Maintenant que vous maîtrisez l'état, les formulaires et la persistance, la Séance 3 ajoutera les fonctionnalités natives :

  • API REST : communiquer avec un serveur (fetch, affichage de données distantes)
  • FlatList : afficher de grandes listes de manière performante
  • Caméra : prendre des photos avec expo-camera
  • Géolocalisation : accéder à la position GPS avec expo-location
  • Permissions : demander l'accès aux fonctionnalités du téléphone

Progression naturelle

La Séance 2 vous a donné les outils pour gérer les données locales. La Séance 3 vous apprendra à gérer les données distantes (API) et les fonctionnalités matérielles (caméra, GPS). Vous combinerez les deux : données API + cache AsyncStorage + accès aux capteurs.

Validation des compétences

Avant de passer à la Séance 3, vérifiez que vous maîtrisez ces concepts :

Je sais gérer l'état avec useState sur mobile

Ajouter, supprimer, modifier des éléments dans une liste avec immutabilité

Je sais utiliser TextInput avec ses props mobiles

keyboardType, secureTextEntry, autoCapitalize, onSubmitEditing

Je sais créer un formulaire avec validation

KeyboardAvoidingView, ScrollView, messages d'erreur, styles conditionnels

Je sais persister des données avec AsyncStorage

setItem, getItem, JSON.stringify/parse, pattern charger/sauvegarder

Je comprends le cycle de vie mobile

useEffect, AppState (foreground/background), useFocusEffect

Besoin de réviser ?

Si vous n'êtes pas à l'aise avec l'un de ces concepts :

  1. Relisez la page correspondante
  2. Faites les exercices de cette séance
  3. Construisez le projet fil rouge pour mettre tout en pratique
  4. Posez des questions en cours

Ne passez pas à la Séance 3 sans maîtriser la persistance avec AsyncStorage : les APIs et le cache local sont étroitement liés.

Conseils pour la suite

Pour progresser

1. Pratiquez avec votre projet Expo

  • Créez une mini-application de notes avec persistance
  • Testez le passage en arrière-plan et la relance de l'app

2. Testez les cas limites

  • Que se passe-t-il sans connexion ?
  • Que se passe-t-il si les données sauvegardées sont corrompues ?
  • Que se passe-t-il si le clavier couvre votre formulaire ?

3. Faites le lien avec R4A10

  • Comparez vos formulaires web et mobiles
  • Les patterns sont les mêmes, seuls les composants changent

4. Consultez la documentation

Comprendre, pas mémoriser

Vous n'avez pas besoin de connaître par coeur toutes les props de TextInput ou l'API complète d'AsyncStorage. L'important est de :

  • Savoir que ça existe : TextInput, AsyncStorage, AppState, NetInfo
  • Comprendre les patterns : composant contrôlé, charger/sauvegarder, offline-first
  • Savoir adapter : passer du web au mobile en changeant les composants et l'API de stockage
  • Valider le code : reconnaître les oublis courants (isLoaded, try/catch, autoCapitalize)

Ressources

React Native TextInput

Documentation officielle du composant TextInput

Documentation

AsyncStorage

Documentation du package @react-native-async-storage/async-storage

Documentation

React Native AppState

Documentation du module AppState

Documentation

NetInfo

Documentation du package @react-native-community/netinfo

Documentation

Bravo !

Vous maîtrisez l'état, les formulaires et la persistance sur mobile

Vos applications peuvent maintenant recevoir des données de l'utilisateur et les conserver entre les sessions.

Faire le quiz de validation