0%
Props et State dans React

Props et State

La gestion des données

10-15 min

Props et State dans React

Les props et le state sont deux concepts fondamentaux de React pour la gestion des données. Ils permettent de rendre les composants dynamiques et interactifs.

Les Props

Les props (propriétés) sont un moyen de passer des données d’un composant parent à un composant enfant. Elles sont en lecture seule et ne peuvent pas être modifiées par le composant enfant.

Utilisation des props

// Composant enfant
function UserCard({ name, age, email }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>Âge : {age}</p>
      <p>Email : {email}</p>
    </div>
  );
}

// Composant parent
function App() {
  return (
    <div className="app">
      <UserCard
        name="Marie Dupont"
        age={25}
        email="marie@example.com"
      />
    </div>
  );
}

Props par défaut

Vous pouvez définir des valeurs par défaut pour les props :

function Button({ text = "Cliquez-moi", onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

Props.children

La prop spéciale children permet de passer du contenu entre les balises d’un composant :

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Utilisation
<Card>
  <h2>Titre</h2>
  <p>Contenu</p>
</Card>

Le State

Le state est une façon de gérer les données qui peuvent changer au fil du temps dans un composant. Dans les composants fonctionnels, nous utilisons le Hook useState.

Utilisation de useState

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrémenter
      </button>
    </div>
  );
}

State complexe

Pour gérer des objets ou des tableaux dans le state :

function UserProfile() {
  const [user, setUser] = useState({
    name: 'Marie',
    age: 25,
    email: 'marie@example.com'
  });

  const updateName = () => {
    setUser({
      ...user,
      name: 'Marie Dupont'
    });
  };

  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={updateName}>Mettre à jour le nom</button>
    </div>
  );
}

Différences entre Props et State

  1. Props :

    • Passées de parent à enfant
    • En lecture seule
    • Ne peuvent pas être modifiées par le composant enfant
    • Déclenchent un re-rendu quand elles changent
  2. State :

    • Géré localement dans le composant
    • Peut être modifié avec setState
    • Persiste entre les re-rendus
    • Déclenche un re-rendu quand il change

Bonnes pratiques

  1. Lifting State Up :

    • Élevez le state au plus proche ancêtre commun
    • Passez-le en props aux composants enfants
    • Permet une meilleure gestion des données partagées
  2. Immutabilité :

    • Ne modifiez jamais le state directement
    • Utilisez toujours setState ou les fonctions de mise à jour
    • Créez de nouveaux objets/tableaux au lieu de modifier les existants
  3. Initialisation du State :

    • Utilisez des valeurs initiales appropriées
    • Évitez les calculs complexes dans l’initialisation
    • Utilisez des fonctions d’initialisation pour les calculs coûteux

Exercices pratiques

  1. Créez un composant TodoList qui :

    • Affiche une liste de tâches
    • Permet d’ajouter une nouvelle tâche
    • Permet de marquer une tâche comme terminée
  2. Créez un composant ThemeSwitcher qui :

    • Alterne entre un thème clair et sombre
    • Persiste le choix de l’utilisateur
    • Applique le thème à toute l’application
  3. Créez un composant Form qui :

    • Gère plusieurs champs de formulaire
    • Valide les entrées
    • Affiche des messages d’erreur

Conclusion

Les props et le state sont essentiels pour créer des applications React interactives. Dans le prochain chapitre, nous allons explorer les Hooks React, qui offrent des fonctionnalités plus avancées pour la gestion du state et des effets secondaires.

Commentaires

Les commentaires sont alimentés par GitHub Discussions

Connectez-vous avec GitHub pour participer à la discussion

Lien copié !