R

Exercices - État, Formulaires et Persistance

Mettez en pratique les concepts de la Séance 2 : useState sur mobile, TextInput, formulaires, AsyncStorage et mode offline.

Comment travailler efficacement

  • Utilisez votre projet Expo existant ou créez-en un : npx create-expo-app@latest rn-seance2
  • Installez les dépendances : npx expo install @react-native-async-storage/async-storage @react-native-community/netinfo
  • Testez sur votre téléphone : lancez npx expo start et scannez le QR code
  • Essayez d'abord : tentez de résoudre avant de regarder la solution
  • Comprenez le code : l'objectif est de comprendre les patterns, pas de copier

Temps estimé : 3h pour les 5 exercices

Exercice 1 : Compteur persistant

Exercice : Compteur avec AsyncStorage

Facile

Créez un compteur dont la valeur est sauvegardée dans AsyncStorage. Quand l'utilisateur ferme et relance l'application, le compteur reprend là où il en était.

Fonctionnalités :

  • Bouton +1 et bouton -1
  • Bouton "Reset" qui remet à 0
  • La valeur est automatiquement sauvegardée dans AsyncStorage
  • Au lancement, la valeur sauvegardée est chargée
  • Afficher "Chargement..." pendant le chargement initial

Concepts pratiqués :

  • useState, useEffect
  • AsyncStorage.getItem / setItem / removeItem
  • Pattern isLoaded pour éviter l'écrasement
  • Gestion d'erreurs avec try/catch

Rappel

N'oubliez pas le flag isLoaded pour ne pas sauvegarder la valeur initiale (0) avant que le chargement soit terminé.

Exercice 2 : Liste de tâches

Exercice : Todo list avec ajout, suppression et toggle

Facile

Créez une liste de tâches avec ajout, suppression et basculement fait/non fait.

Fonctionnalités :

  • Champ de saisie avec bouton "+" pour ajouter une tâche
  • Le bouton "+" est désactivé si le champ est vide
  • Taper sur une tâche bascule son état fait/non fait
  • Bouton de suppression sur chaque tâche
  • Compteur "X tâche(s) restante(s)" en bas
  • Message "Aucune tâche" quand la liste est vide
  • Le clavier se ferme après l'ajout

Exigences :

  • Checkbox avec état visuel (cercle vide ou coché)
  • Texte barré pour les tâches terminées
  • Layout avec ScrollView pour la liste

Rappel immutabilité

Utilisez filter() pour supprimer, map() pour modifier, et [...spread] pour ajouter. Ne modifiez jamais le tableau directement.

Exercice 3 : Application de notes avec catégories

Exercice : Notes avec catégories et AsyncStorage

Moyen

Créez une application de notes avec un système de catégories et la persistance via AsyncStorage.

Fonctionnalités :

  • Saisie multiligne pour les notes
  • 3 catégories au choix : Perso (vert), Travail (bleu), Idées (orange)
  • Filtre par catégorie avec compteur
  • Les notes sont triées par date (plus récente en haut)
  • Suppression d'une note
  • Persistance avec AsyncStorage
  • Indicateur de catégorie (point coloré) sur chaque note
  • Date de création affichée sous chaque note

Concepts pratiqués :

  • useState avec objets complexes
  • AsyncStorage charger/sauvegarder
  • filter() pour le filtrage par catégorie
  • Styles conditionnels (catégorie sélectionnée)
  • multiline TextInput

Structure des données

Chaque note est un objet : { id, text, category, createdAt }. La catégorie est une chaîne ('perso', 'travail', 'idees').

Exercice 4 : Formulaire avec validation et clavier

Exercice : Formulaire d'inscription avec validation complète

Moyen

Créez un formulaire d'inscription complet avec validation et gestion du clavier.

Champs :

  • Prénom et Nom (côte à côte sur la même ligne)
  • Email (validation format)
  • Mot de passe (min 8 caractères, 1 majuscule, 1 chiffre)
  • Confirmation du mot de passe (doit correspondre)
  • Téléphone (optionnel, format français)

Exigences :

  • KeyboardAvoidingView + ScrollView
  • Navigation entre champs avec returnKeyType et refs
  • Validation à la soumission avec messages d'erreur
  • Erreurs effacées quand l'utilisateur tape
  • Bordure rouge sur les champs en erreur
  • Écran de succès après validation
  • Champs côte à côte pour prénom/nom (flexDirection: 'row')

Validation du mot de passe

Utilisez des regex simples :

  • Au moins une majuscule : /[A-Z]/
  • Au moins un chiffre : /[0-9]/
  • Format email : /\S+@\S+\.\S+/

Exercice 5 : Application complète

Exercice : Application de notes avec persistance, catégories et mode offline

Difficile

Créez une application complète de notes qui combine tous les concepts de la Séance 2.

Architecture :

  • 3 onglets : Notes, Ajouter, Paramètres
  • Navigation par Tabs (Expo Router)

Onglet Notes :

  • Liste des notes avec filtrage par catégorie
  • Taper sur une note pour basculer fait/non fait
  • Bouton de suppression
  • Bannière "Mode hors ligne" quand pas de connexion
  • Rechargement automatique avec useFocusEffect

Onglet Ajouter :

  • Formulaire avec : texte (multiligne), sélection de catégorie
  • Validation (texte obligatoire)
  • KeyboardAvoidingView
  • Sauvegarde dans AsyncStorage

Onglet Paramètres :

  • Switch pour afficher/masquer les notes terminées
  • Bouton "Supprimer toutes les notes"
  • Préférences sauvegardées dans AsyncStorage

Concepts combinés :

  • useState, useEffect, useFocusEffect
  • TextInput, KeyboardAvoidingView, ScrollView
  • AsyncStorage (notes + préférences)
  • NetInfo (détection offline)
  • Navigation (Tabs)
  • Validation de formulaire

Procédez par étapes

  1. Créez la structure de navigation (Tabs)
  2. Implémentez la liste des notes avec des données en dur
  3. Ajoutez le formulaire d'ajout
  4. Ajoutez AsyncStorage pour la persistance
  5. Ajoutez NetInfo et la bannière offline
  6. Ajoutez les paramètres

Ne cherchez pas la perfection : l'objectif est de pratiquer les patterns.

Récapitulatif

Ce que vous avez pratiqué

Exercice 1 : AsyncStorage avec pattern charger/sauvegarder et flag isLoaded

Exercice 2 : useState avec listes (ajout, suppression, toggle) et TextInput

Exercice 3 : Notes avec catégories, filtrage et persistance AsyncStorage

Exercice 4 : Formulaire complet avec validation, KeyboardAvoidingView et refs

Exercice 5 : Application complète combinant tous les concepts (Tabs, AsyncStorage, NetInfo, useFocusEffect)

Temps total estimé : ~3h

Comprendre, pas mémoriser

L'objectif de ces exercices est de comprendre les patterns, pas de mémoriser la syntaxe. Les patterns importants sont :

  • Composant contrôlé : value + onChangeText
  • Charger/sauvegarder : useEffect au montage + useEffect sur les données
  • Immutabilité : filter, map, ...spread pour modifier l'état
  • Gestion du clavier : KeyboardAvoidingView, Keyboard.dismiss(), refs

Quand vous travaillerez sur un vrai projet, vous pourrez consulter la documentation ou demander à l'IA de générer du code. L'important est de savoir valider et adapter ce code.

Ressources

React Native TextInput

Toutes les props du composant TextInput

Documentation

AsyncStorage

API complète de @react-native-async-storage/async-storage

Documentation

KeyboardAvoidingView

Documentation du composant KeyboardAvoidingView

Documentation

Expo Router Tabs

Guide de navigation par onglets avec Expo Router

Documentation