React est un des cadres et bibliothèques JavaScript les plus en vogue pour l’élaboration d’applications web monopages et d’interfaces utilisateurs. Sa popularité découle de son adaptabilité dans la conception d’interfaces utilisateurs au moyen de composantes réutilisables, de sa vitesse de développement et de sa communauté active.
Toutefois, pour que les applications React soient visuellement attrayantes et bien présentées, il est nécessaire de les associer aux feuilles de style en cascade (CSS). La création de CSS à partir de zéro peut être chronophage.
Les développeurs peuvent ainsi consacrer un temps considérable à la mise en forme plutôt qu’aux fonctionnalités essentielles d’une application React. Heureusement, des outils et des cadres comme Bootstrap facilitent l’intégration de CSS dans votre application React.
Qu’est-ce que Bootstrap ?
Bootstrap est un cadre CSS open source utilisé pour le développement front-end. Il permet aux développeurs de créer des sites web réactifs et adaptés aux mobiles grâce à un ensemble complet d’outils et de modèles de conception basés sur JavaScript et CSS.
Créé par Twitter, Bootstrap est également maintenu par une équipe d’ingénieurs de cette même entreprise. Son code source est disponible sur GitHub, où les membres de la communauté peuvent contribuer, signaler des bugs et faire des suggestions. La version la plus récente, au moment de la rédaction, est Bootstrap 5.3.0-alpha1.
Pourquoi utiliser Bootstrap avec React ?
- Gain de temps : Bootstrap prend en charge la mise en forme, vous permettant de vous concentrer davantage sur les fonctionnalités. Vous n’avez plus à vous soucier de l’apparence de vos formulaires ou de vos boutons, mais plutôt de leur fonctionnalité, comme l’envoi ou non de données à votre backend ou à votre API.
- Facilité d’utilisation : Une fois Bootstrap intégré à votre application React, il vous suffit d’utiliser les composants d’interface utilisateur pré-conçus et de les implémenter dans votre application.
- Conception cohérente : La plupart des applications évoluent avec le temps. Il est essentiel d’assurer une conception cohérente de votre site web si vous voulez fidéliser vos utilisateurs. Bootstrap fournit un style uniforme qui assurera l’homogénéité de vos pages.
- Nombreux modèles disponibles : Bootstrap propose une multitude de modèles allant des barres de navigation, des boutons, des formulaires et des carrousels aux listes déroulantes, pour ne citer que quelques exemples.
- Personnalisation aisée : Bien que Bootstrap propose des modèles de conception, vous pouvez toujours personnaliser la taille de la police, les couleurs et d’autres aspects selon vos besoins.
- Support communautaire : Bootstrap possède une documentation exhaustive pour vous aider à démarrer. Vous pouvez aussi compter sur une large communauté qui contribue en permanence par de nouvelles fonctionnalités et assure la maintenance de ce cadre CSS.
- Conception réactive : Une fois Bootstrap intégré à votre application React, vous avez l’assurance que votre application web sera réactive quelle que soit la taille de l’écran.
Comment installer Bootstrap dans React
Par défaut, Bootstrap n’est pas inclus dans une application React. Avant d’examiner comment ajouter/installer Bootstrap dans React, il est nécessaire de vérifier quelques prérequis :
Prérequis
Utilisez cette commande pour vérifier si node.js est installé sur votre ordinateur :
node -v
Si node.js est installé, vous obtiendrez une sortie similaire à celle-ci dans votre terminal.
Version de nœud
S’il n’est pas installé, vous trouverez les instructions de téléchargement sur https://nodejs.org/en/.
Utilisez cette commande pour vérifier si React est installé sur votre ordinateur :
npm list react
Si React est installé globalement sur votre machine, vous aurez une sortie similaire dans votre terminal.
- Installez react-create-app sur votre machine. Utilisez cette commande :
npm install -g create-react-app
- Créez votre application React en utilisant cette commande :
npx create-react-app my-app
Vous pouvez remplacer my-app par le nom de votre choix. Pour cet exemple, nous avons nommé notre application react-b.
Une fois installée, vous obtiendrez une sortie similaire sur votre terminal :
Exécutez ces commandes pour démarrer :
- cd react-b (utilisez le nom que vous avez choisi pour votre application à l’étape précédente)
- npm start (cette commande démarre votre application React)
Nous pouvons maintenant passer aux étapes suivantes et ajouter/installer Bootstrap à notre application React :
Méthode d’installation NPM
Node.js est livré avec npm (gestionnaire de paquets node) installé par défaut.
Vous pouvez vérifier la version de votre npm via cette commande :
npm -v
Si npm est installé, vous obtiendrez une sortie comme 9.2.0.
Vous pouvez maintenant installer bootstrap en utilisant cette commande :
npm install bootstrap
Une fois ceci fait, rendez-vous dans le fichier ./src/index.js et ajoutez cette ligne en haut :
import ‘bootstrap/dist/css/bootstrap.css’;
Utilisation du gestionnaire de paquets Yarn
Contrairement à npm, yarn n’est pas installé par défaut lorsque vous installez node.js.
Installez yarn en utilisant cette commande :
npm install -g yarn
Cette commande installera yarn globalement, vous n’aurez donc plus besoin d’installer le paquet à chaque création d’application React.
Exécutez cette commande pour ajouter bootstrap à React :
yarn add bootstrap
Une fois ceci fait, allez dans le fichier ./src/index.js et ajoutez cette ligne en haut :
import ‘bootstrap/dist/css/bootstrap.css’;
Il est conseillé d’importer Bootstrap en haut du fichier d’entrée de votre application, avant les autres fichiers CSS. Cela facilite la modification de vos paramètres Bootstrap si vous avez besoin d’ajuster les valeurs par défaut des modèles lors du développement de votre application React.
Méthode CDN
Vous pouvez intégrer Bootstrap à React en utilisant un lien CDN (Content Delivery Network). En ajoutant ce lien, vous incluez la bibliothèque Bootstrap dans votre application React sans télécharger ni héberger les fichiers dans votre dossier de projet. Suivez ces étapes :
- Dans votre dossier racine, accédez au fichier .public/index.html
- Dans la balise
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Vous devez ajouter des dépendances JavaScript à votre application. Accédez au corps de votre fichier index.html et ajoutez cette balise juste avant la balise de fermeture :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap est maintenant installé dans votre application React.
Utilisation du paquet React Bootstrap
Les approches que nous avons examinées jusqu’à présent étaient initialement conçues pour les fichiers HTML. Pour mieux comprendre cela, considérez ce code de menu déroulant Bootstrap :
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Quel est le problème avec ce code ? Par défaut, Bootstrap utilise l’attribut « class » pour ses éléments DIV. Cependant, React utilise JSX, qui utilise la syntaxe camelCase. Il est donc nécessaire de remplacer « class » par « className » manuellement.
Pour que ce code fonctionne sur React, chaque « class » doit être remplacé par « className ». Le code final sera :
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Heureusement, il existe deux approches alternatives, react-bootstrap et reactstrap, qui évitent cette modification manuelle.
React-bootstrap
React-bootstrap propose de véritables composants React construits à partir de zéro. La bibliothèque est compatible avec le noyau Bootstrap.
Suivez ces étapes pour commencer avec React-bootstrap :
- Installez React-bootstrap avec cette commande :
npm install react-bootstrap bootstrap
- Rendez-vous dans le fichier src/index.js ou App.js et ajoutez cette ligne avant les autres fichiers CSS :
import ‘bootstrap/dist/css/bootstrap.min.css’;
React-bootstrap permet d’importer un composant spécifique au lieu de toute la bibliothèque. Par exemple, si vous avez besoin d’importer un bouton dans l’un de vos composants, vous pouvez l’importer comme suit :
import { Button } from ‘react-bootstrap’;
Reactstrap
Il s’agit d’une bibliothèque de composants React pour Bootstrap. Reactstrap utilise le cadre CSS Bootstrap pour ses styles et son thème. Cette bibliothèque importe les classes Bootstrap appropriées dans votre application React, garantissant ainsi un style d’application cohérent. De plus, vous n’avez pas besoin d’ajouter les fichiers JavaScript de Bootstrap pour activer les fonctionnalités.
Suivez ces étapes pour ajouter Reactstrap à votre application React :
- Installez Reactstrap via cette commande :
npm install reactstrap react react-dom
- Importez Bootstrap en utilisant ces commandes :
npm install --save bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’; (ajoutez cette ligne dans votre app.js)
Vous pouvez également utiliser l’option de lien CDN pour inclure Bootstrap dans votre application. Après la première étape, allez dans le répertoire racine et accédez au fichier .public/index.html et ajoutez cette ligne à la balise
:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap permet d’importer un composant spécifique au lieu de toute la bibliothèque. Par exemple, si vous avez besoin d’importer un bouton dans l’un de vos composants, vous pouvez importer en tant que :
import { Button } from ‘reactstrap’;
Conclusion
Voici quelques méthodes que vous pouvez utiliser pour installer Bootstrap dans votre application React afin de styliser vos applications web. Le choix de la méthode d’installation dépend de vos préférences, car l’objectif final est le même.
L’association de React avec Bootstrap vous évite de devoir gérer chaque style CSS au fur et à mesure que votre application évolue. Le style de votre application devient facile et efficace, vous laissant plus de temps pour vous concentrer sur les fonctionnalités.
Vous pouvez explorer quelques raisons de choisir React Native pour le développement d’applications mobiles.