Cette introduction explore les concepts fondamentaux de React, couvrant les expressions JSX, la création et la distinction entre les types de composants, la transmission de données via les propriétés (props) et la gestion de l'état, y compris l'utilisation des Hooks pour les composants fonctionnels.

1. Expressions d'Interpolation en JSX

En React, pour insérer des expressions JavaScript directement dans votre balisage JSX, vous utilisez des accolades simples {}. Ce mécanisme d'interpolation permet d'afficher des variables, d'appeler des fonctions, ou d'effectuer des calculs dynamiques au sein de votre UI.

const utilisateurConnecte = "Alice";
const messageBienvenue = <p>Bonjour, {utilisateurConnecte}</p>;

function afficherAnnee() {
 return new Date().getFullYear();
}

const infoPiedDePage = <footer>© {afficherAnnee()}</footer>;

2. Différences des Attributs HTML en JSX

React, utilisant JSX (une extension de syntaxe pour JavaScript), modifie les noms de certains attributs HTML pour éviter les conflits avec les mots-clés réservés de JavaScript ou pour s'aligner sur les conventions du DOM en JavaScript. Voici quelques-unes des divergences notables :

• class devient className
• for devient htmlFor
• checked devient defaultChecked (pour les composants non contrôlés)
• value devient defaultValue (pour les composants non contrôlés)
• innerHTML devient dangerouslySetInnerHTML
• tabindex devient tabIndex

<label htmlFor="champNom" className="label-style">Votre nom :</label>
<input type="text" id="champNom" defaultValue="Prénom Nom" />

3. Méthodes de Création de Composants

React propose deux approches principales pour définir des composants réutilisables dans votre application : les composants fonctionnels et les composants de classe.

a. Composants Fonctionnels

Ces composants sont de simples fonctions JavaScript qui acceptent un objet props comme argument et retournent du JSX. Ils sont concis et faciles à lire.

import React from "react";

export function ComposantBienvenue() {
   return (
       <div>
           <p>Ceci est un composant créé avec une fonction.</p>
       </div>
   );
}

b. Composants de Classe

Les composants de classe sont des classes JavaScript qui étendent React.Component. Ils doivent inclure une méthode render() qui retourne l'interface utilisateur à afficher sous forme de JSX.

import React from "react";

export default class AfficheurTitre extends React.Component {
   render() {
       return (
           <div style={{ border: '1px solid lightcoral', padding: '10px' }}>
               <h1>Ceci est un composant de classe.</h1>
           </div>
       );
   }
}

4. Distinction entre Composants Fonctionnels et de Classe

Historiquement, ces deux types de composants avaient des rôles distincts, mais l'introduction des Hooks a considérablement réduit ces différences.

• Composants Fonctionnels (avant les Hooks) : Ils étaient considérés comme "sans état" ou "de présentation", ne possédant pas de state interne ni de méthodes de cycle de vie. Ils étaient principalement utilisés pour rendre l'UI en fonction des props reçues.
• Composants de Classe : Ces composants étaient les seuls à pouvoir gérer leur propre state (via this.state) et à interagir avec le cycle de vie du composant (componentDidMount, componentDidUpdate, etc.). Ils accédaient aux props via this.props.
• Avec l'avènement des Hooks : Depuis React 16.8, les Hooks permettent aux composants fonctionnels de gérer l'état (avec useState) et les effets secondaires (avec useEffect), leur conférant ainsi les capacités des composants de classe. Les composants fonctionnels avec Hooks sont désormais la méthode préférée pour la plupart des nouveaux développements.

5. Transmission de Données (Props) entre Composants Parents et Enfants

Les props (abréviation de "properties") sont le mécanisme fondamental pour passer des données d'un composant parent à un composant enfant. Un composant enfant reçoit toujours les props sous forme d'un objet.

import React from 'react';
import { CarteIdentite } from './CarteIdentite'; // Supposons ce composant enfant

export default function ApplicationPrincipale() {
 return (
   <div>
     <h2>Fiche d'Information</h2>
     <CarteIdentite nomComplet="Alice Smith" age={30} ville="Paris" />
   </div>
 );
}

a. Réception des Props dans un Composant Fonctionnel

L'objet props est le premier argument de la fonction du composant.

import React from 'react';

export function CarteIdentite(attributs) { // Renommé 'props' en 'attributs'
 return (
   <div style={{ margin: '10px', padding: '10px', border: '1px solid gray' }}>
     <p>Nom : {attributs.nomComplet}</p>
     <p>Âge : {attributs.age} ans</p>
     <p>Ville : {attributs.ville}</p>
   </div>
 );
}

b. Réception des Props dans un Composant de Classe

Les props sont accessibles via this.props à l'intérieur de la méthode render() ou d'autres méthodes de la classe.

import React from 'react';

export class DetailsUtilisateur extends React.Component {
 render() {
   const { identifiant, email, statut } = this.props; // Utilisation de la déstructuration
   return (
     <div>
       <p>ID : {identifiant}</p>
       <p>Email : {email}</p>
       <p>Statut : {statut ? 'Actif' : 'Inactif'}</p>
     </div>
   );
 }
}

6. Gestion des Événements avec Arguments

Lorsque vous avez besoin de passer des arguments à une fonction de gestion d'événements, vous pouvez utiliser une fonction fléchée ou la méthode .bind().

a. Utilisation d'une Fonction Fléchée (Méthode Courante)

C'est une méthode simple et lisible pour encapsuler l'appel de votre fonction avec des arguments.

import React from 'react';

export default class ActionBouton extends React.Component {
 notifier(message) {
   console.log('Notification reçue :', message);
 }

 render() {
   return (
     <button type="button" onClick={() => this.notifier('Opération réussie !')}>
       Lancer Notification
     </button>
   );
 }
}

b. Utilisation de .bind()

La méthode .bind() crée une nouvelle fonction où this est lié à l'instance du composant et les arguments sont pré-remplis.

import React from 'react';

export class ActionBoutonBind extends React.Component {
 afficherInfo(donnee) {
   console.log('Information affichée :', donnee);
 }

 render() {
   return (
     <button type="button" onClick={this.afficherInfo.bind(this, 'Détail important')}>
       Afficher Détail
     </button>
   );
 }
}

7. Gestion de l'État dans les Composants de Classe

Les composants de classe gèrent leur état interne à travers un objet this.state. Cet état est généralement initialisé dans le constructeur de la classe. Pour mettre à jour l'état, il est impératif d'utiliser la méthode this.setState(), qui est asynchrone.

import React from 'react';

export default class CompteurNumerique extends React.Component {
   constructor(lesProps) { // Renommé 'props' en 'lesProps'
       super(lesProps);
       this.state = {
           valeurCourante: 0 // Nom de variable d'état modifié
       };
       // Liaison explicite de la méthode pour assurer que 'this' est correct dans le callback
       this.augmenterValeur = this.augmenterValeur.bind(this);
   }

   augmenterValeur() {
       this.setState(
           { valeurCourante: this.state.valeurCourante + 1 },
           () => {
               // Ce callback est exécuté APRÈS la mise à jour de l'état
               console.log('Compteur mis à jour (via callback) :', this.state.valeurCourante);
           }
       );
       // Cette ligne affichera probablement l'ancienne valeur de l'état
       // car setState est asynchrone et la mise à jour n'est pas encore appliquée.
       console.log('Compteur (juste après setState) :', this.state.valeurCourante);
   }

   render() {
       return (
           <div style={{ margin: '20px', padding: '15px', border: '2px solid teal' }}>
               <p>Le compteur indique : {this.state.valeurCourante}</p>
               <button onClick={this.augmenterValeur}>
                   Incrémenter le Compteur
               </button>
           </div>
       );
   }
}

8. Gestion de l'État avec les Hooks (Composants Fonctionnels)

Avec l'introduction du Hook useState, les composants fonctionnels peuvent désormais gérer leur propre état local. useState est une fonction qui prend la valeur initiale de l'état et retourne un tableau contenant la valeur d'état actuelle et une fonction pour la mettre à jour.

import React, { useState } from "react";

export default function CompteurDynamique() {
   // Déclare une variable d'état 'nombreActuel' et sa fonction de mise à jour 'setNombreActuel'
   const [nombreActuel, setNombreActuel] = useState(0); // Renommé 'count' en 'nombreActuel'

   const handleIncrement = () => {
       // La fonction de mise à jour peut prendre la nouvelle valeur ou un callback
       // qui reçoit la valeur précédente.
       setNombreActuel(prevNombre => prevNombre + 1);
       // Avec useState, l'état est mis à jour et le composant est re-rendu.
       // La nouvelle valeur sera visible au prochain rendu.
   };

   return (
       <div style={{ backgroundColor: '#f0f8ff', padding: '20px', borderRadius: '5px' }}>
           <p>Valeur courante : {nombreActuel}</p>
           <button type="button" onClick={handleIncrement}>
               Ajouter une unité
           </button>
       </div>
   );
}