React

React et AG Grid, et comment ils s'utilisent ensemble.

---

🌟 1. Présentation de React

React est une bibliothèque JavaScript développée par Meta (Facebook).
Son but : créer des interfaces utilisateurs (UI) de manière rapide, modulable et efficace.

Caractéristiques principales de React :

• Composants : toute une application est construite comme un ensemble de petits composants réutilisables.

• Virtual DOM : React utilise un DOM virtuel pour accélérer la mise à jour de l'écran (meilleure performance).

• Unidirectional Data Flow : les données circulent dans un seul sens → plus facile à comprendre et à débugger.

• JSX : syntaxe spéciale mélangeant HTML et JavaScript.

Exemple simple d'un composant React :

import React from 'react';

function Bonjour() {
  return <h1>Bonjour, monde !</h1>;
}

export default Bonjour;

Points forts :

• Très rapide pour créer une UI moderne.

• Écosystème énorme (beaucoup de librairies autour : Redux, React Router, etc.).

• Adapté pour des applications web SPA (Single Page Application).

---

🌟 2. Présentation de AG Grid

AG Grid est une bibliothèque de grille de données (tableaux) ultra puissante.
Elle est utilisée dans les entreprises pour afficher des tables avec des milliers de lignes et des fonctionnalités riches.

Fonctionnalités principales de AG Grid :

• Tri (sortable columns)

• Filtrage (column filtering)

• Pagination

• Édition (edit in place)

• Sélection de lignes

• Groupage de colonnes

• Pivot, agrégation

• Support pour gros volumes de données (performance top)

• Thèmes (material, balham, alpine, etc.)

• Compatible avec React, Angular, Vue, ou JavaScript pur.

---

🔥 3. Comment utiliser AG Grid dans React

Très simple, voici comment ça se passe :

Installation

npm install ag-grid-react ag-grid-community

Utilisation de base dans un composant React

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css'; 
import 'ag-grid-community/styles/ag-theme-alpine.css';

function TableauClients() {
  const [rowData] = useState([
    { nom: "Jean", age: 30 },
    { nom: "Marie", age: 25 },
    { nom: "Paul", age: 35 }
  ]);

  const [columnDefs] = useState([
    { field: 'nom', headerName: 'Nom' },
    { field: 'age', headerName: 'Âge' }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}>
      </AgGridReact>
    </div>
  );
}

export default TableauClients;

➡️ En 5 minutes, tu as une table filtrable, sortable, responsive !

---

🧠 Différence entre React et AG Grid

	React	AG Grid
Type	Librairie UI globale	Composant spécialisé (table)
Utilité	Construire toute une application	Gérer des tableaux complexes
Apprentissage	Moyen	Facile si tu sais React
Performance	Très bonne	Optimisée pour grandes données
Licence	Open Source (MIT)	Open Source + Pro Features payantes

---

🚀 Résumé visuel

React = construire toute ton site/app avec des composants.
AG Grid = insérer une grille de données avancée dans un de ces composants.

---