React

Une bibliothèque JavaScript révolutionnaire pour créer des interfaces utilisateur modernes, rapides et réactives.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que React ?

Imaginez que vous souhaitez construire une interface web moderne, comme celle de Facebook, Instagram ou Airbnb. Ces sites sont interactifs, fluides et réagissent instantanément à vos actions.

React est l'outil qui permet aux développeurs de créer ces expériences interactives facilement. Créé par Facebook en 2013, React est aujourd'hui l'une des technologies les plus populaires pour développer des sites et applications web.

Pourquoi React est si spécial ?

Réactivité

Les interfaces React se mettent à jour instantanément lorsque les données changent, sans avoir à recharger la page.

Composants

React permet de découper l'interface en "briques" réutilisables appelées composants, comme un jeu de construction.

En résumé, React permet de créer des sites web qui ressemblent plus à des applications qu'à des pages web traditionnelles. Les utilisateurs bénéficient d'une expérience plus rapide et plus agréable, et les développeurs peuvent travailler plus efficacement.

Pour les développeurs

Fonctionnement technique

React est une bibliothèque JavaScript déclarative qui utilise un concept de DOM virtuel pour optimiser les rendus et minimiser les manipulations directes du DOM.

Les concepts fondamentaux

JSX

JSX est une extension syntaxique de JavaScript qui permet d'écrire des éléments HTML directement dans le code JavaScript. Cela permet de garder ensemble la logique et le rendu d'un composant.

JSX

// Ceci est du JSX
const element = <h1>Bonjour, monde!</h1>;

Composants

Les composants sont les briques de base de React. Ils peuvent être définis comme des fonctions (Functional Components) ou des classes (Class Components). Ils acceptent des "props" en entrée et retournent des éléments React.

Composant fonctionnel

// Un composant React simple
function Welcome() {
  return (
    <div className="greeting">
      <h1 className="title">Bonjour !</h1>
      <p>Bienvenue sur notre application React</p>
    </div>
  );
}

Props et État (State)

Les props sont des arguments passés aux composants, tandis que l'état est géré à l'intérieur du composant. Les deux déclenchent un nouveau rendu lorsqu'ils changent.

Composants avec Props

// Un composant avec des props
function UserCard({ name, job, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>{job}</p>
    </div>
  );
}

// Utilisation
<UserCard 
  name="Sophie Martin" 
  job="Designer UX"
  avatar="/images/sophie.jpg" 
/>

Hooks

Introduits dans React 16.8, les Hooks permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Les plus courants sont useState, useEffect, useContext, etc.

React Hooks - useState

// Utilisation du hook useState
import { useState } from 'react';

function Counter() {
  // Déclare une variable d'état "count" initialisée à 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez ici
      </button>
    </div>
  );
}

Avantages techniques

Performances optimisées grâce au DOM virtuel qui limite les manipulations coûteuses du DOM réel
Modèle de composants qui favorise la réutilisation du code et la séparation des préoccupations
Écosystème riche avec de nombreuses bibliothèques compatibles (Redux, React Router, etc.)
Rendu côté serveur (SSR) possible pour améliorer les performances et le SEO
API stable avec une excellente rétrocompatibilité

Exemple avancé

Voici un exemple plus complexe qui montre comment utiliser plusieurs hooks ensemble pour créer un composant qui gère le chargement de données utilisateur avec gestion d'erreurs et d'états de chargement.

Composant TypeScript avec gestion d'état et d'effets

// Exemple plus avancé avec plusieurs hooks
import { useState, useEffect, useCallback } from 'react';

// Interface pour typer les données
interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  // État pour stocker les données utilisateur
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Fonction mémorisée pour charger les données
  const fetchUserData = useCallback(async () => {
    try {
      setLoading(true);
      // Simulation d'un appel API
      const response = await fetch(`https://api.example.com/users/${userId}`);
      
      if (!response.ok) {
        throw new Error('Erreur lors du chargement des données');
      }
      
      const userData = await response.json();
      setUser(userData);
      setError(null);
    } catch (err) {
      setError('Impossible de charger les informations utilisateur');
      setUser(null);
    } finally {
      setLoading(false);
    }
  }, [userId]);

  // Effet pour charger les données au montage ou quand userId change
  useEffect(() => {
    fetchUserData();
  }, [userId, fetchUserData]);

  // Rendu conditionnel selon l'état
  if (loading) {
    return <div className="loader">Chargement en cours...</div>;
  }

  if (error) {
    return <div className="error">{error}</div>;
  }

  return (
    <div className="user-profile">
      {user ? (
        <>
          <h2>{user.name}</h2>
          <p>Email: {user.email}</p>
          <button onClick={fetchUserData}>Actualiser</button>
        </>
      ) : (
        <p>Aucune donnée utilisateur trouvée</p>
      )}
    </div>
  );
}

Applications concrètes