Comprendre React en 2 minutes : composants, hooks et bonnes pratiques !

Salut à toi, développeur passionné ! Aujourd'hui, plongeons dans React, la bibliothèque JavaScript qui révolutionne le développement d'interfaces utilisateur. En quelques minutes, tu vas découvrir comment créer des applications web modernes et réactives.

Qu'est-ce que React, concrètement ? 🤔

React est une bibliothèque JavaScript développée par Facebook (Meta) qui permet de construire des interfaces utilisateur composables et réutilisables. Son principe fondamental ? Le Virtual DOM et une approche déclarative qui rend ton code plus prévisible et plus facile à déboguer.

Les Composants : la base de tout

En React, tout est composant. Un composant peut être aussi simple qu'un bouton ou aussi complexe qu'une page entière. Voici différentes façons de créer des composants :

jsx
1// Composant fonctionnel simple
2const Welcome = ({ name }) => {
3  return <h1>Bonjour, {name} ! 👋</h1>;
4};
5
6// Composant avec props et enfants
7const Card = ({ title, children }) => {
8  return (
9    <div className="card">
10      <h2>{title}</h2>
11      <div className="card-content">{children}</div>
12    </div>
13  );
14};
15
16// Utilisation
17const App = () => {
18  return (
19    <Card title="Ma première carte">
20      <Welcome name="Développeur" />
21      <p>Bienvenue dans le monde de React !</p>
22    </Card>
23  );
24};

State Management : le cœur de la réactivité 🧠

Le state (état) est crucial dans React. Il permet à tes composants de maintenir et de mettre à jour leurs données internes.

jsx
1import { useState } from 'react';
2
3const Counter = () => {
4  const [count, setCount] = useState(0);
5  const [isActive, setIsActive] = useState(false);
6
7  const handleIncrement = () => {
8    setCount((prevCount) => prevCount + 1);
9    setIsActive(true);
10  };
11
12  return (
13    <div className="counter">
14      <p>Compteur : {count}</p>
15      <p>Statut : {isActive ? 'Actif' : 'Inactif'}</p>
16      <button onClick={handleIncrement} className={isActive ? 'active' : ''}>
17        Incrémenter
18      </button>
19    </div>
20  );
21};

Les Hooks essentiels : au-delà du useState 🎣

useEffect : gérer les effets secondaires

jsx
1import { useState, useEffect } from 'react';
2
3const WindowResizeTracker = () => {
4  const [windowSize, setWindowSize] = useState({
5    width: window.innerWidth,
6    height: window.innerHeight,
7  });
8
9  useEffect(() => {
10    // Gestionnaire d'événement pour mettre à jour les dimensions
11    const handleResize = () => {
12      setWindowSize({
13        width: window.innerWidth,
14        height: window.innerHeight,
15      });
16    };
17
18    // Ajouter l'écouteur d'événement
19    window.addEventListener('resize', handleResize);
20
21    // Fonction de nettoyage : TRÈS IMPORTANT
22    // Supprime l'écouteur d'événement quand le composant est démonté
23    return () => {
24      window.removeEventListener('resize', handleResize);
25    };
26  }, []); // Tableau de dépendances vide car on veut l'effet uniquement au montage
27
28  return (
29    <div className="window-size">
30      <h2>Dimensions de la fenêtre :</h2>
31      <p>Largeur : {windowSize.width}px</p>
32      <p>Hauteur : {windowSize.height}px</p>
33    </div>
34  );
35};
36
37// Autre exemple : Chronomètre avec nettoyage
38const Timer = () => {
39  const [seconds, setSeconds] = useState(0);
40  const [isRunning, setIsRunning] = useState(false);
41
42  useEffect(() => {
43    let intervalId;
44
45    if (isRunning) {
46      // Démarrer le timer
47      intervalId = setInterval(() => {
48        setSeconds((prevSeconds) => prevSeconds + 1);
49      }, 1000);
50    }
51
52    // Fonction de nettoyage
53    return () => {
54      if (intervalId) {
55        clearInterval(intervalId);
56      }
57    };
58  }, [isRunning]); // Se déclenche uniquement quand isRunning change
59
60  const handleToggle = () => {
61    setIsRunning((prev) => !prev);
62  };
63
64  const handleReset = () => {
65    setIsRunning(false);
66    setSeconds(0);
67  };
68
69  return (
70    <div className="timer">
71      <h2>Chronomètre</h2>
72      <p>Temps écoulé : {seconds} secondes</p>
73      <button onClick={handleToggle}>{isRunning ? 'Pause' : 'Démarrer'}</button>
74      <button onClick={handleReset}>Réinitialiser</button>
75    </div>
76  );
77};

useCallback et useMemo : optimisation des performances

jsx
1import { useCallback, useMemo } from 'react';
2
3const ExpensiveComponent = ({ items, onItemSelect }) => {
4  // Mémoisation d'une fonction
5  const handleSelect = useCallback(
6    (id) => {
7      onItemSelect(id);
8    },
9    [onItemSelect],
10  );
11
12  // Mémoisation d'un calcul coûteux
13  const sortedItems = useMemo(() => {
14    return [...items].sort((a, b) => b.value - a.value);
15  }, [items]);
16
17  return (
18    <ul>
19      {sortedItems.map((item) => (
20        <li key={item.id} onClick={() => handleSelect(item.id)}>
21          {item.name}
22        </li>
23      ))}
24    </ul>
25  );
26};

Les Patterns React modernes 🎯

Custom Hooks : réutiliser la logique

jsx
1// Hook personnalisé pour gérer les formulaires
2const useForm = (initialValues = {}) => {
3  const [values, setValues] = useState(initialValues);
4  const [errors, setErrors] = useState({});
5
6  const handleChange = useCallback((e) => {
7    const { name, value } = e.target;
8    setValues((prev) => ({ ...prev, [name]: value }));
9  }, []);
10
11  const resetForm = useCallback(() => {
12    setValues(initialValues);
13    setErrors({});
14  }, [initialValues]);
15
16  return {
17    values,
18    errors,
19    handleChange,
20    resetForm,
21  };
22};
23
24// Utilisation
25const LoginForm = () => {
26  const { values, handleChange, resetForm } = useForm({
27    email: '',
28    password: '',
29  });
30
31  const handleSubmit = (e) => {
32    e.preventDefault();
33    // Logique de soumission
34    console.log(values);
35    resetForm();
36  };
37
38  return (
39    <form onSubmit={handleSubmit}>
40      <input
41        type="email"
42        name="email"
43        value={values.email}
44        onChange={handleChange}
45      />
46      <input
47        type="password"
48        name="password"
49        value={values.password}
50        onChange={handleChange}
51      />
52      <button type="submit">Connexion</button>
53    </form>
54  );
55};

Bonnes pratiques et conseils 💡

1. Organisation du code

   • Sépare tes composants en petites unités réutilisables
   • Utilise des custom hooks pour la logique réutilisable
   • Place les styles et les tests près des composants

2. Performance

   • Utilise React.memo() pour les composants purement présentationnels
   • Évite les re-rendus inutiles avec useCallback et useMemo
   • Implements le "code splitting" avec React.lazy et Suspense

3. Gestion des erreurs

   • Utilise les Error Boundaries pour capturer les erreurs
   • Implémente une gestion d'erreur appropriée pour les appels API
   • Fournis des retours visuels clairs à l'utilisateur

En résumé 🚀

React est un outil puissant qui te permet de :

• Créer des composants réutilisables et maintenables
• Gérer efficacement l'état de ton application
• Optimiser les performances avec les hooks
• Implémenter des patterns modernes de développement

Avec ces bases solides, tu es prêt à créer des applications React robustes et performantes. N'oublie pas que la pratique est la clé de la maîtrise !

Merci d'avoir suivi ce guide ! Pour aller plus loin, n'hésite pas à consulter la documentation officielle de React et à pratiquer avec des projets concrets.