Qu’est-ce que React ?

React est une bibliothèque JavaScript open-source développée par Facebook pour la création d’interfaces utilisateur.
Elle permet de construire des applications web dynamiques et réactives en utilisant des composants. React se concentre sur le rendu efficace des interfaces en utilisant un DOM virtuel, ce qui améliore les performances des applications.

---

Principes de base

1. Composants

Les composants sont les éléments fondamentaux de React.
Ils peuvent être des classes ou des fonctions et sont utilisés pour « encapsuler » la logique et le rendu d’une partie de l’interface utilisateur.

Exemple de composant :

import React from 'react';

const MonComposant = () => {
    return <h1>Bonjour, monde !</h1>;
};

export default MonComposant;

2. JSX

JSX (JavaScript XML) est une syntaxe qui permet d’écrire des éléments React en utilisant une syntaxe similaire à HTML.
Cela rend le code plus lisible et facile à écrire.

Exemple de JSX :

const element = <h1>Bonjour, monde !</h1>;

3. Props

Les props (propriétés) sont des arguments passés aux composants.
Elles permettent de transmettre des données d’un composant « parent » à un composant « enfant ».

Exemple d’utilisation des props :

const Salutation = (props) => {
    return <h1>Bonjour, {props.nom} !</h1>;
};

// Utilisation
<Salutation nom="Alice" />

4. État (State)

L’état est un objet qui permet de stocker des données qui peuvent changer au cours de la vie d’un composant.
Les composants peuvent gérer leur propre état à l’aide du hook useState dans les composants fonctionnels.

Exemple d’utilisation de l’état :

import React, { useState } from 'react';

const Compteur = () => {
    const [compte, setCompte] = useState(0);

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

Cycle de vie des composants

Les composants React ont un cycle de vie qui comprend plusieurs phases : montage, mise à jour et démontage.
Les méthodes de cycle de vie permettent d’exécuter du code à des moments spécifiques.

Méthodes de cycle de vie (pour les composants de classe) :

• componentDidMount(): Appelée après que le composant a été monté.
• componentDidUpdate(): Appelée après que le composant a été mis à jour.
• componentWillUnmount(): Appelée juste avant que le composant ne soit démonté.

Hooks (pour les composants) :

Les hooks permettent d’utiliser l’état et d’autres fonctionnalités de React dans les composants fonctionnels.

• useEffect(): Permet d’exécuter des effets de bord (comme des appels API) après le rendu du composant.
  

Exemple d’utilisation de useEffect :

import React, { useEffect, useState } from 'react';

const DonneesAPI = () => {
    const [donnees, setDonnees] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/donnees')
            .then(response => response.json())
            .then(data => setDonnees(data));
    }, []); // Le tableau vide signifie que l'effet ne s'exécute qu'une fois après le premier rendu.

    return (
        <ul>
            {donnees.map(donnee => (
                <li key={donnee.id}>{donnee.nom}</li>
            ))}
        </ul>
    );
};

---

Conclusion

React est une bibliothèque puissante pour construire des interfaces utilisateur.
Grâce à ses composants, son utilisation de JSX, et ses fonctionnalités, React permet de créer des applications web réactives et performantes.
Vous pouvez également consultez la documentation officielle de React.