Introduction - R4A11 Séance 2

Bienvenue dans la Séance 2 du cours R4A11 - État, Formulaires et Persistance. Après avoir posé les fondations du développement mobile en Séance 1, vous allez rendre vos applications interactives et capables de conserver des données.

Ce que vous avez accompli en Séance 1

En Séance 1, vous avez appris à :

• Créer un projet React Native avec Expo et le tester avec Expo Go
• Utiliser les composants primitifs : View, Text, Image, ScrollView, SafeAreaView
• Appliquer des styles avec StyleSheet.create() et Flexbox
• Naviguer entre écrans avec Expo Router (Stack, Tabs, routes dynamiques)

Pourquoi la gestion d'état sur mobile ?

Une application mobile sans état est une application qui ne fait rien. L'état permet de :

• Réagir aux actions de l'utilisateur : saisie de texte, appui sur un bouton, sélection d'un élément
• Afficher des données dynamiques : liste de tâches, paramètres, messages
• Conserver des données entre les sessions : préférences, brouillons, données hors ligne

Du web au mobile : même logique, nouveaux défis

En R4A10 (Séance 3), vous avez appris useState et les formulaires contrôlés en React web. Ces concepts s'appliquent directement en React Native. Mais le mobile ajoute des contraintes que le web n'a pas :

// React web (R4A10) - formulaire avec useState
function LoginForm() {
  const [email, setEmail] = useState('');
  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

// React Native (R4A11) - même logique, composants différents
function LoginForm() {
  const [email, setEmail] = useState('');
  return (
    <TextInput
      keyboardType="email-address"
      value={email}
      onChangeText={setEmail}       // pas onChange !
      autoCapitalize="none"          // spécifique mobile
    />
  );
}

Ce que vous allez construire

Durant cette séance, vous allez progressivement construire les briques d'une application de notes/tâches :

1. Saisie de texte : ajouter des notes avec TextInput
2. Gestion de liste : ajouter, supprimer, marquer comme fait avec useState
3. Formulaire complet : saisie avec validation et gestion du clavier
4. Persistance : sauvegarder les données avec AsyncStorage pour les retrouver après fermeture
5. Mode hors ligne : gérer l'absence de connexion

// Aperçu de ce que vous saurez construire à la fin de cette séance
function NotesApp() {
  const [notes, setNotes] = useState([]);
  const [text, setText] = useState('');

  // Charger les notes sauvegardées au démarrage
  useEffect(() => {
    AsyncStorage.getItem('notes').then(data => {
      if (data) setNotes(JSON.parse(data));
    });
  }, []);

  // Sauvegarder à chaque modification
  useEffect(() => {
    AsyncStorage.setItem('notes', JSON.stringify(notes));
  }, [notes]);

  const addNote = () => {
    if (text.trim()) {
      setNotes([...notes, { id: Date.now(), text, done: false }]);
      setText('');
      Keyboard.dismiss(); // Fermer le clavier
    }
  };

  return (
    <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
      {/* Liste des notes + formulaire d'ajout */}
    </KeyboardAvoidingView>
  );
}

Ce que vous allez apprendre

Structure du parcours

Cette séance suit une progression logique :

1. État sur mobile : rappel useState et spécificités mobiles
2. TextInput : le composant de saisie de texte
3. Formulaires : formulaires contrôlés et gestion du clavier
4. Cycle de vie : useEffect et événements mobiles (AppState, focus)
5. AsyncStorage : persister des données localement
6. Mode offline : gérer l'absence de connexion
7. Exercices et projet : mise en pratique

Liens avec R4A10

Philosophie : comprendre, pas mémoriser

Prérequis

Pages de cette séance

Ressources