4 façons d'installer Bootstrap dans React pour créer une application plus détaillée

Comment installer Bootstrap dans React pour créer une application plus détaillée

React est l'un des frameworks et bibliothèques JavaScript les plus populaires pour la création d'applications et d'interfaces utilisateur à page unique. Sa flexibilité dans la construction d'interfaces utilisateur à l'aide de ses composants réutilisables, sa rapidité de développement et le soutien de sa communauté sont autant de raisons qui expliquent sa popularité.

Cependant, Réagir doit être associé à des feuilles de style en cascade (CSS) pour rendre ses applications plus attrayantes et présentables. L'écriture de feuilles de style en cascade à partir de zéro peut prendre beaucoup de temps.

Les développeurs risquent de passer beaucoup de temps à travailler sur le style plutôt que sur les fonctionnalités clés d'une application React. La bonne nouvelle, c'est que des outils et des frameworks comme Bootstrap facilitent l'ajout de CSS à votre application React.

Qu'est-ce que Bootstrap ?

Bootstrap est un cadre CSS open-source pour le développement frontal. Bootstrap permet aux développeurs de créer des sites web réactifs et mobiles grâce à un ensemble complet d'outils de conception et de modèles basés sur JavaScript et CSS.

Bootstrap a été créé par Twitter et est également maintenu par une équipe d'ingénieurs de la même société. Son code source est conservé sur GitHub, et les membres de la communauté peuvent y contribuer et envoyer des rapports de bogues et des suggestions. Bootstrap 5.3.0-alpha1 est la version la plus récente au moment où nous écrivons ces lignes.

Pourquoi utiliser Bootstrap avec React ?

Gagnez du temps: Bootstrap s'occupe de la mise en forme, ce qui vous laisse plus de temps pour vous concentrer sur la fonctionnalité. Vous n'avez donc pas à vous préoccuper de questions telles que l'apparence de vos formulaires ou de vos boutons, mais plutôt de questions telles que le fait de savoir si le bouton d'envoi envoie des données à votre backend ou à votre API.
Facilité d'utilisation : Une fois que vous avez ajouté Bootstrap à votre application React, il vous suffit de prendre les composants d'interface utilisateur préconçus et de les ajouter à votre application.
Conception cohérente : La plupart des applications prennent de l'ampleur au fil du temps. Il est important de veiller à la cohérence du design de votre site web si vous voulez attirer des utilisateurs fidèles. Bootstrap a un style cohérent qui donnera à vos pages un aspect uniforme.
Des tonnes de modèles à choisir : Bootstrap propose des centaines de modèles allant des barres de navigation, boutons, formulaires et carrousels aux dropdowns, pour n'en citer que quelques-uns.
Facilité de personnalisation : Même si Bootstrap propose des modèles de conception, vous pouvez toujours personnaliser la taille de la police, la couleur et d'autres caractéristiques en fonction de vos besoins.
Soutien de la communauté : Bootstrap dispose d'une documentation complète pour vous aider à démarrer. Cependant, vous pouvez toujours compter sur la grande communauté, qui ajoute toujours de nouvelles fonctionnalités et assure la maintenance de ce framework CSS.
Conception réactive : Une fois que vous avez ajouté Bootstrap à votre application React, vous êtes assuré que votre application web sera réactive sur toutes les tailles d'écran.

Comment installer Bootstrap dans React

Une application React n'est pas livrée avec Bootstrap installé par défaut. Mais avant d'explorer comment ajouter/installer Bootstrap dans React, nous devons vérifier quelques points ;

Conditions préalables

Vérifiez que Node.js est installé : Cet environnement d'exécution JavaScript multiplateforme permet aux développeurs d'exécuter JavaScript en dehors d'un navigateur web.

Utilisez cette commande pour vérifier si node.js est installé sur votre PC :

node -v

Si node.js est installé, vous obtiendrez un résultat similaire à celui-ci dans votre terminal.

S'il n'est pas installé, vous pouvez consulter les instructions de téléchargement sur https://nodejs.org/en/.

Vérifiez que React est installé : Vous utiliserez React pour créer des fonctionnalités tandis que Bootstrap se chargera de la mise en forme.

Utilisez cette commande pour vérifier si React est installé sur votre PC :

npm list react

Si React est installé globalement sur votre machine, vous aurez quelque chose comme ceci sur votre terminal.

Créez votre application React : Vous pouvez créer une application React manuellement, mais cela demande beaucoup de travail. Pour notre démonstration, nous utiliserons la commande create-react-app. Suivez les étapes suivantes pour créer votre application react :

Installez react-create-app sur votre machine. Utilisez la commande suivante

npm install -g create-react-app

Créez votre application React à l'aide de cette commande

npx create-react-app mon-app

Vous pouvez remplacer mon-app par le nom de votre choix. Dans notre cas, nous avons nommé notre application react-b.

Une fois installé, vous aurez quelque chose de similaire sur votre terminal :

Exécutez les commandes suivantes pour commencer

cd react-b (utilisez le nom de votre application choisi à 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 de Bootstrap par NPM

Node.js est livré avec npm (node package manager) installé par défaut.

Vous pouvez vérifier la version de votre npm grâce à cette commande :

npm -v

Si npm est installé, vous obtiendrez une sortie telle que 9.2.0

Vous pouvez maintenant installer bootstrap à l'aide de cette commande :

npm install bootstrap

Une fois cela fait, allez dans le fichier . /src/index.js. Ajoutez cette ligne en haut.

import 'bootstrap/dist/css/bootstrap.css' ;

Utiliser le gestionnaire de paquets Yarn

Contrairement à npm, yarn n'est pas installé par défaut lorsque vous installez node.js.

Installez yarn à l'aide de cette commande ;

npm install -g yarn

Cette commande installera globalement yarn, de sorte que vous n'aurez plus à installer le paquet à chaque fois que vous créez une application React.

Exécutez cette commande pour ajouter bootstrap à React :

yarn add bootstrap

Une fois cela fait, allez dans le fichier . /src/index.js. Ajoutez cette ligne en haut.

import 'bootstrap/dist/css/bootstrap.css' ;

Vous devez toujours importer Bootstrap en haut du fichier d'entrée de votre application, avant les autres fichiers CSS. Cela facilite la modification de vos entrées Bootstrap si vous devez changer les valeurs par défaut des modèles au fur et à mesure que vous créez votre application React.

Méthode CDN

En utilisant un lien CDN (Content Delivery Network), vous pouvez ajouter Bootstrap à React. En ajoutant ce lien CDN, vous incluez la bibliothèque Bootstrap à votre application React sans avoir à télécharger et à héberger les fichiers dans votre dossier de projet. Suivez les étapes suivantes.

Dans votre dossier racine, accédez au fichier.public/index.html
Dans la balise <head>, ajoutez la balise <link> suivante

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZL6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"&gt

Vous devez ajouter les dépendances JavaScript à votre application. Allez dans le corps de votre fichier index.html et ajoutez cette balise juste avant la balise de fermeture <body/> :

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script&gt

Bootstrap est enfin installé sur votre application React.

Utilisation du package Bootstrap de React

Les approches que nous avons couvertes jusqu'à présent ont été conçues à l'origine pour les fichiers HTML. Pour mieux comprendre cela, considérez ce code de liste déroulante de Bootstrap :

<div class="dropdown">

 <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

 Bouton déroulant

 </button>

 <ul class="dropdown-menu">

 <li><li><li>.a class="dropdown-item" href="#"&gt;Action</a></li>

 <li><a class="dropdown-item" href="#">Une autre action</a></li>

 <li><a class="dropdown-item" href="#">Une autre action</a></li>

 </ul>

</div&gt>

Qu'est-ce qui ne va pas dans ce code ? Bootstrap, par défaut, utilise la classe pour classer ses divisions (DIV). Cependant, React utilise JSX, qui utilise la syntaxe camelCase. Vous devez donc remplacer manuellement class par className.

Pour que ce code fonctionne sur React, nous devons remplacer chaque "class" 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">

 Bouton déroulant

 </button>

 <ul classname="dropdown-menu">

 <li><li>Menu déroulant"&gt; <li>Menu déroulant"&gt; <li>Menu déroulant"&gt; <li>Menu déroulant"&gt;Menu déroulant.a className="dropdown-item" href="#"&gt;Action</a></li>

 <li><a classname="dropdown-item" href="#">Une autre action</a></li>

 <li><a classname="dropdown-item" href="#">Une autre action</a></li>

 </ul>

</div&gt>

Heureusement, nous avons deux autres approches, react-bootstrap et reactstrap, qui ne nécessitent pas d'intervention manuelle.

React-bootstrap

React-bootstrap dispose de véritables composants React construits à partir de zéro. La bibliothèque est compatible avec le noyau Bootstrap.

Suivez les étapes suivantes pour commencer à utiliser React-bootstrap :

Installez React-bootstrap avec cette commande :

npm install react-bootstrap bootstrap

Naviguez jusqu'au fichier src/index.js ou App.js et ajoutez cette ligne avant les autres fichiers CSS

importez 'bootstrap/dist/css/bootstrap.min.css' ;

React-bootstrap vous permet d'importer un composant spécifique au lieu de la bibliothèque entière. Par exemple, si vous avez besoin d'importer un bouton sur 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 s'appuie sur le cadre CSS de Bootstrap pour ses styles et son thème. Cette bibliothèque importe les bonnes classes Bootstrap dans votre application React, ce qui vous permet d'avoir un style d'application cohérent. Vous n'avez pas non plus besoin d'ajouter les fichiers JavaScript de Bootstrap pour déclencher des fonctionnalités.

Suivez les étapes suivantes pour ajouter Reactstrap à votre application React :

Installez Reactstrap à l'aide de cette commande :

npm install reactstrap react-dom

Importez Bootstrap à l'aide de ces commandes :

npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css' ; (ajoutez cette ligne à votre app.js)

Vous pouvez également utiliser l'option CDN link pour inclure Bootstrap dans votre application. Après la première étape, allez dans le répertoire racine et naviguez jusqu'au fichier.public/index.html et ajoutez cette ligne à la balise

<link

 rel="stylesheet"

 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"

 /&gt

Reactstrap vous permet d'importer un composant spécifique au lieu de la bibliothèque entière. Par exemple, si vous avez besoin d'importer un bouton sur l'un de vos composants, vous pouvez importer comme suit ;

import { Button } from 'reactstrap' ;

Conclusion

Voici quelques approches que vous pouvez utiliser pour installer Bootstrap dans votre application React afin de styliser vos applications web. Le choix de l'approche d'installation est une question de préférence, car l'objectif final est le même.

La combinaison de React et de Bootstrap vous évite d'avoir à suivre tous les styles CSS au fur et à mesure que votre application grandit. Le stylisme de votre application devient facile et efficace, ce qui vous laisse 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.

Titus Kamunya

Auteur