⚛️ Qu'est-ce que React ?

📖 Définition

React est une bibliothèque JavaScript pour créer des interfaces utilisateur développée par Facebook (Meta). Elle utilise une architecture basée sur les composants pour une interface utilisateur réutilisable et le Virtual DOM pour des mises à jour d'écran efficaces. La programmation déclarative simplifie la gestion d'interfaces utilisateur complexes.

🎯 Analogie simple

Blocs LEGO

Composants React = Blocs LEGO
├─ Combiner de petits blocs
├─ Réutiliser les mêmes blocs plusieurs fois
├─ Construire facilement des structures complexes
└─ Remplacer des blocs individuels selon les besoins

<House>
  <Roof />
  <Wall />
  <Door />
  <Window />
</House>

⚙️ Concepts de base

Structure de composant

// Composant fonctionnel (approche moderne)
function Welcome({ name }) {
  return <h1>Bonjour, {name} !</h1>;
}

// Utilisation
<Welcome name="Pierre" />

Gestion d'état

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>
  );
}

Hook useEffect

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // Exécuter quand userId change

  return <div>{user?.name}</div>;
}

💡 Exemples clés

Rendu de listes

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Sport', done: false },
    { id: 2, text: 'Étudier', done: true }
  ]);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Gestion de formulaires

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Appel API...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="password" type="password" onChange={handleChange} />
      <button type="submit">Se connecter</button>
    </form>
  );
}

🤔 Questions fréquentes

Q1. Pourquoi utiliser React ?

// ❌ Vanilla JS (complexe)
const button = document.createElement('button');
button.addEventListener('click', () => {
  // Manipulation manuelle du DOM
});

// ✅ React (simple)
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Q2. Qu'est-ce que JSX ?

R: Syntaxe JavaScript + XML pour les éléments React :

// JSX
const element = <h1 className="title">Bonjour</h1>;

// Converti en
React.createElement('h1', { className: 'title' }, 'Bonjour');

Q3. Qu'est-ce que les Hooks ?

R: Fonctions permettant d'utiliser l'état et le cycle de vie dans les composants fonctionnels :

useState    // Gestion d'état
useEffect   // Effets secondaires (appels API)
useContext  // Accès au contexte
useRef      // Accès au DOM
useMemo     // Mémoïsation
useCallback // Mémoïsation de fonctions

🎬 Résumé

• Composants: Blocs d'interface utilisateur réutilisables
• Virtual DOM: Mises à jour efficaces
• JSX: Syntaxe intuitive
• Hooks: Composants fonctionnels puissants

Construisez des applications interactives avec React ! ⚛️