Introduction à React

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Créée par Facebook (maintenant Meta) en 2013, elle est devenue la bibliothèque front-end la plus utilisée au monde. React alimente les interfaces de Facebook, Instagram, Netflix, Airbnb et des milliers d'autres applications.

React se concentre sur une seule chose : rendre l'UI en fonction des données. Quand tes données changent, React met à jour efficacement uniquement les parties de la page qui doivent changer, plutôt que de reconstruire toute la page depuis zéro.

Idées clés derrière React :

• Déclaratif : Tu décris à quoi l'UI devrait ressembler pour un état donné, et React détermine comment mettre à jour le DOM. C'est l'opposé de la manipulation impérative du DOM où tu appelles manuellement createElement, appendChild et textContent pour chaque changement.
• Basé sur les composants : Tu construis ton UI à partir de petits morceaux réutilisables appelés composants. Un bouton, une barre de navigation, une carte utilisateur — chacun est un composant qui gère sa propre logique de rendu.
• Apprends une fois, écris partout : Les concepts de React se transfèrent à React Native (applications mobiles), React Three Fiber (3D) et plus encore.

Au lieu d'écrire ce code impératif :

const h1 = document.createElement('h1');
h1.textContent = 'Hello';
document.body.appendChild(h1);

Avec React tu écris :

function App() {
  return <h1>Hello</h1>;
}

React prend ta description et gère toutes les opérations DOM pour toi.

Manipuler directement le DOM est lent. Chaque fois que tu modifies un élément, le navigateur peut avoir besoin de recalculer les styles, refaire la mise en page et repeindre l'écran. Quand tu as beaucoup de changements qui se produisent rapidement (comme dans une application interactive complexe), cela devient un goulot d'étranglement de performance.

React résout ce problème avec le DOM virtuel — une représentation JavaScript légère du DOM réel. Voici comment ça fonctionne :

1. Tu décris l'UI en retournant du JSX depuis tes composants.
2. React crée un arbre du DOM virtuel — un objet JavaScript simple qui reflète la structure de ton UI.
3. Quand les données changent, React crée un nouvel arbre du DOM virtuel.
4. React compare ("diff") le nouvel arbre avec le précédent.
5. React calcule l'ensemble minimal de changements nécessaires et applique uniquement ces changements au DOM réel.

Ce processus s'appelle la réconciliation, et il rend React rapide même pour des UI complexes avec des mises à jour fréquentes.

Un autre avantage majeur de React est son flux de données unidirectionnel. Les données circulent dans une seule direction — des composants parents vers les composants enfants. Cela rend ton application plus facile à comprendre et à déboguer car tu peux toujours tracer d'où vient une donnée.

React a également un écosystème massif :

• Next.js — Framework React full-stack avec rendu serveur
• React Router — Routage côté client
• Redux / Zustand — Gestion d'état
• React Query — Récupération et mise en cache de données

Apprendre React ouvre la porte à tout cet écosystème.

React utilise une extension de syntaxe appelée JSX (JavaScript XML) qui te permet d'écrire du code similaire à HTML directement dans JavaScript. JSX n'est pas du JavaScript valide — il doit être transformé par un compilateur (comme Babel) en appels de fonction réguliers.

Ce JSX :

const element = <h1 className="title">Hello World</h1>;

Est compilé en :

const element = React.createElement('h1', { className: 'title' }, 'Hello World');

Règles JSX que tu dois connaître :

1. Expressions entre accolades : Tu peux intégrer n'importe quelle expression JavaScript dans JSX en utilisant {} :

const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;
const math = <p>2 + 2 = {2 + 2}</p>;

2. Les attributs HTML utilisent camelCase : Puisque JSX est du JavaScript, les attributs qui entrent en conflit avec les mots réservés sont renommés :

• class devient className
• for devient htmlFor
• tabindex devient tabIndex

<div className="container">
  <label htmlFor="email">Email</label>
</div>

3. Les balises auto-fermantes sont obligatoires : Chaque élément sans enfants doit être auto-fermé :

<img src="photo.jpg" alt="A photo" />
<br />
<input type="text" />

4. Un élément racine unique : Un composant doit retourner un seul élément racine. Si tu as besoin de plusieurs éléments, enveloppe-les dans une <div> ou utilise un Fragment (<>...</>) :

// Utilisation d'un Fragment — pas de nœud DOM supplémentaire
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

Un composant React est une fonction JavaScript qui retourne du JSX. Les composants sont les blocs de construction de chaque application React. Par convention, les noms de composants commencent par une lettre majuscule — c'est ainsi que React distingue les composants des éléments HTML réguliers.

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

Pour afficher un composant sur la page, tu dois le rendre dans un élément DOM. React 18+ utilise createRoot :

// Sélectionne l'élément DOM où React va rendre
const root = ReactDOM.createRoot(document.getElementById('root'));

// Rend un composant dedans
root.render(<Welcome />);

La syntaxe <Welcome /> est la façon dont tu utilises un composant en JSX — ça ressemble à une balise HTML auto-fermante. React appelle ta fonction Welcome, prend le JSX qu'elle retourne, et le rend dans l'élément #root.

Tu peux composer des composants ensemble. Un pattern courant est d'avoir un composant App qui sert de racine à ton arbre de composants :

function Header() {
  return <header><h1>My Site</h1></header>;
}

function Content() {
  return <main><p>Welcome to my site.</p></main>;
}

function App() {
  return (
    <>
      <Header />
      <Content />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Chaque composant est indépendant et réutilisable. Tu peux utiliser <Header /> à plusieurs endroits dans ton application.