11.2 — react-bootstrap

⏱️ TL;DR — react-bootstrap réimplémente les composants Bootstrap en vrais composants React, sans le JS natif ni jQuery. L’état (ouvert/fermé, onglet actif) est géré par React via des props (show, onHide, activeKey). Vous importez toujours le CSS de Bootstrap, mais le comportement est 100 % React — plus de conflit DOM.

🎯 Objectifs

• Installer et configurer react-bootstrap.
• Utiliser modales, dropdowns, onglets en React idiomatique.
• Comprendre ce qu’il remplace (le JS natif).

Installation

npm install react-bootstrap
# + le CSS de Bootstrap
npm install bootstrap

// une fois, dans votre entrée / layout
import 'bootstrap/dist/css/bootstrap.min.css'

react-bootstrap fournit les composants ; le CSS vient du paquet bootstrap.

Une modale pilotée par l’état

import { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
 
export function Confirm() {
  const [show, setShow] = useState(false)
  return (
    <>
      <Button onClick={() => setShow(true)}>Ouvrir</Button>
      <Modal show={show} onHide={() => setShow(false)} centered>
        <Modal.Header closeButton><Modal.Title>Confirmer</Modal.Title></Modal.Header>
        <Modal.Body>Êtes-vous sûr ?</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(false)}>Annuler</Button>
          <Button variant="danger" onClick={() => setShow(false)}>Supprimer</Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

Pas de data-bs-*, pas d’useEffect, pas de dispose() : l’ouverture est une simple prop show.

Dropdown, Tabs, Toast…

import { Dropdown, Tabs, Tab } from 'react-bootstrap'
 
<Dropdown>
  <Dropdown.Toggle variant="primary">Menu</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#">Action</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>
 
<Tabs defaultActiveKey="a">
  <Tab eventKey="a" title="Onglet A">Contenu A</Tab>
  <Tab eventKey="b" title="Onglet B">Contenu B</Tab>
</Tabs>

Props communes

• variant : la couleur (primary, danger, outline-secondary…).
• size : sm / lg.
• as : changer la balise rendue (as={Link} pour un routeur).
• Les événements : onHide, onSelect, onToggle…

Le CSS reste personnalisable

react-bootstrap n’a pas son propre système de style : il produit le markup avec les classes Bootstrap. Vous personnalisez donc via le Sass (Partie 8) exactement comme d’habitude.

⚠️ Piège — Oublier d’importer le CSS de Bootstrap : les composants react-bootstrap s’affichent sans style (du HTML nu). Le paquet react-bootstrap ne contient que la logique, pas le CSS.

💡 Pour un dev React — react-bootstrap gère le focus trap, l’accessibilité ARIA, la fermeture au clic extérieur et les portails — tout ce qui est pénible à réécrire. Pour un projet React qui veut Bootstrap, c’est le choix par défaut.

✏️ Exercices

1. Une modale react-bootstrap ouverte par un bouton, centrée.

2. Pourquoi les composants react-bootstrap sont-ils « nus » chez vous ?

🧠 Quiz de révision

Chapitre suivant : 11.3 — Intégration Next.js (App Router)