Quiz 17 — React & Next.js
⏱️ TL;DR — 50 questions sur le conflit SSR, react-bootstrap, l’intégration Next.js et le choix de Bootstrap en React (Partie 11). Réponds de tête, puis déplie.
1. Pourquoi le JS Bootstrap entre-t-il en conflit avec React ?
Réponse
Il manipule le DOM directement, React via le virtual DOM.
2. Erreur typique en SSR ?
Réponse
document is not defined.
3. Où initialiser un composant JS Bootstrap en React ?
Réponse
useEffect d’un composant 'use client', import dynamique.
4. Que faire au cleanup ?
Réponse
.dispose().
5. Le CSS de Bootstrap pose-t-il problème en SSR ?
Réponse
Non, seul le JS.
6. react-bootstrap utilise-t-il le JS natif ?
Réponse
Non, composants React.
7. Ouvrir une modale react-bootstrap ?
Réponse
Prop show.
8. Fermer une modale react-bootstrap ?
Réponse
Prop onHide.
9. Faut-il importer le CSS séparément ?
Réponse
Oui (le paquet ne contient que la logique).
10. Composants react-bootstrap « nus » : cause ?
Réponse
CSS Bootstrap non importé.
11. Personnaliser react-bootstrap ?
Réponse
Via le Sass de Bootstrap.
12. À quoi sert la prop as ?
Réponse
Changer la balise/composant rendu.
13. Où importer le CSS en App Router ?
Réponse
app/layout.js (serveur).
14. Importer le JS Bootstrap dans un composant serveur ?
Réponse
Non (window is not defined).
15. Personnaliser le thème en Next.js ?
Réponse
Un .scss importé dans le layout (paquet sass).
16. Lib pour le dark mode ?
Réponse
next-themes.
17. Prop next-themes pour Bootstrap 5.3 ?
Réponse
attribute="data-bs-theme".
18. Composant pour les images ?
Réponse
next/image.
19. next/image + img-fluid : recommandé ?
Réponse
Non.
20. Une navbar interactive : quel type de composant ?
Réponse
'use client' (react-bootstrap).
21. Trois manières d’utiliser Bootstrap en React ?
Réponse
CSS seul, react-bootstrap, CSS + JS natif (déconseillé SSR).
22. Cas idéal pour react-bootstrap ?
Réponse
Back-office / MVP à livrer vite, cohérent.
23. Cas où préférer Tailwind + headless ?
Réponse
Design identitaire, poids minimal, équipe Tailwind.
24. Mélanger Bootstrap et Tailwind : conseillé ?
Réponse
Non (double reset, conflits).
25. Radix/shadcn fournissent quoi ?
Réponse
Composants accessibles (à styler côté Tailwind).
26. Facteur de décision principal ?
Réponse
Vitesse/cohérence vs contrôle/identité.
27. Import dynamique en React : pourquoi ?
Réponse
Éviter le SSR (charger côté client seulement).
28. Oublier dispose() provoque… ?
Réponse
Fuites mémoire / instances fantômes.
29. Règle simple CSS vs JS Bootstrap en React ?
Réponse
CSS partout ; JS seulement en client + dynamique + dispose (ou react-bootstrap).
30. react-bootstrap gère quoi pour vous ?
Réponse
Focus trap, ARIA, fermeture au clic extérieur, portails.
31. La prop variant sert à ?
Réponse
La couleur (primary, danger, outline-secondary…).
32. La prop size ?
Réponse
sm / lg.
33. Un Dropdown react-bootstrap, structure ?
Réponse
<Dropdown> + Toggle + Menu + Item.
34. Onglets react-bootstrap ?
Réponse
<Tabs> + <Tab eventKey=…>.
35. Éviter le flash de thème en Next : comment ?
Réponse
next-themes (script anti-flash injecté).
36. suppressHydrationWarning va sur… ?
Réponse
<html>.
37. Valider un formulaire en React idiomatique ?
Réponse
Par l’état (React Hook Form + Zod) + is-invalid.
38. Un composant serveur peut-il importer le CSS ?
Réponse
Oui.
39. Un composant serveur peut-il rendre une Modal react-bootstrap ?
Réponse
Non (elle a besoin de 'use client').
40. Recap Next.js : où le CSS/Sass ?
Réponse
Layout serveur.
41. Recap : les composants interactifs ?
Réponse
react-bootstrap en 'use client'.
42. Recap : le dark mode ?
Réponse
next-themes + data-bs-theme.
43. Recap : le JS natif Bootstrap ?
Réponse
À éviter.
44. Un formulaire contrôlé prend quoi ?
Réponse
value + onChange.
45. Le focus trap d’une modale : qui le gère (react-bootstrap) ?
Réponse
react-bootstrap lui-même.
46. Pour un SaaS grand public au design fort : Bootstrap ?
Réponse
Souvent non — Tailwind + shadcn plus adapté.
47. Voie hybride possible ?
Réponse
CSS Bootstrap (grille/utilitaires) + composants React maison.
48. Attribut nécessaire pour un composant interactif RB ?
Réponse
'use client' en haut du fichier.
49. Tree-shaking react-bootstrap ?
Réponse
Imports nommés → composants non utilisés éliminés.
50. Résumé : meilleur défaut Bootstrap en React ?
Réponse
react-bootstrap (+ CSS/Sass importé).
Quiz suivant : Quiz 18 — Accessibilité & RTL.