Introduction à React.js

Introduction Concepts avancés Exemples Bonnes pratiques

React est une bibliothèque JavaScript développée par Facebook pour construire des interfaces utilisateur interactives et réutilisables.

Concepts fondamentaux

Composants : Blocs de construction réutilisables
Props : Données passées aux composants
State : État interne des composants
Virtual DOM : Représentation virtuelle du DOM
JSX : Syntaxe pour décrire l'UI

Premier composant React

import React, { useState } from 'react';

function Compteur() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Compteur: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Incrémenter
      </button>
    </div>
  );
}

Structure d'un projet React

mon-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── App.js
│   ├── styles/
│   │   └── App.css
│   └── index.js
├── package.json
└── README.md

Création d'un projet

# Avec Create React App
npx create-react-app mon-app

# Avec Vite
npm create vite@latest mon-app -- --template react

Composant avec Props

function Salutation({ nom, age }) {
  return (
    <div>
      <h1>Bonjour {nom}!</h1>
      <p>Vous avez {age} ans.</p>
    </div>
  );
}

// Utilisation
<Salutation
  nom="Baptiste"
  age={25}
/>

Composant avec State

function Formulaire() {
  const [nom, setNom] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Soumis:', { nom, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={nom}
        onChange={e => setNom(e.target.value)}
      />
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">
        Envoyer
      </button>
    </form>
  );
}

Cycle de vie des composants

useEffect Hook

function MonComposant() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Au montage
    fetchData().then(setData);

    return () => {
      // Au démontage
      cleanup();
    };
  }, []); // Array de dépendances

  return data ? <div>{data}</div> : null;
}

Hooks personnalisés

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    return JSON.parse(
      localStorage.getItem(key) ?? initial
    );
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}