React fait partie des frameworks et bibliothèques JavaScript les plus populaires pour la création d’applications et d’interfaces utilisateur d’une seule page. Sa flexibilité dans la création d’interfaces utilisateur à l’aide de ses composants réutilisables, sa rapidité de développement et sa communauté de soutien sont les raisons de sa popularité.
Cependant, React doit être combiné avec des feuilles de style en cascade (CSS) pour rendre ses applications plus attrayantes et présentables. Rédiger du CSS à partir de zéro peut prendre du temps.
Les développeurs peuvent passer beaucoup de temps à travailler sur le style au lieu des fonctionnalités clés d’une application React. La bonne nouvelle est que des outils et des frameworks comme Bootstrap facilitent l’ajout de CSS à votre application React.
Table des matières
Qu’est-ce que Bootstrap ?
Bootstrap est un framework 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 à son ensemble complet d’outils et de modèles de conception 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 maintenu sur GitHub, et les membres de la communauté peuvent contribuer et envoyer des rapports de bogues et des suggestions. Bootstrap 5.3.0-alpha1 est la version la plus récente au moment de la rédaction.
Pourquoi utiliser Bootstrap avec React ?
- Gain de temps : Bootstrap s’occupe du formatage, vous laissant plus de temps pour vous concentrer sur les fonctionnalités. Vous n’avez donc pas à vous soucier de problèmes tels que l’apparence de vos formulaires ou boutons, mais de domaines tels que l’envoi ou non de données par le bouton d’envoi à 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 grandissent avec le temps. Assurer une conception cohérente de votre site Web est important si vous souhaitez attirer des utilisateurs fidèles. Bootstrap a un style cohérent qui donnera à vos pages un aspect uniforme.
- Des tonnes de modèles parmi lesquels choisir : Bootstrap propose des centaines de modèles allant des barres de navigation, des boutons, des formulaires et des carrousels aux listes déroulantes, 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 fonctionnalités en fonction de vos besoins.
- Support communautaire : Bootstrap dispose d’une documentation complète pour vous aider à démarrer. Cependant, vous pouvez toujours compter sur la grande communauté, en ajoutant toujours de nouvelles fonctionnalités et en maintenant ce cadre 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 éléments ;
Conditions préalables
Utilisez cette commande pour vérifier si node.js est installé sur votre PC :
node -v
Si node.js est installé, vous aurez une sortie similaire à celle-ci sur votre terminal.
Version de nœud
S’il n’est pas installé, vous pouvez consulter les instructions de téléchargement sur https://nodejs.org/en/.
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 ça sur votre terminal.
Version de réaction
- Installez react-create-app sur votre machine. Utilisation de cette commande
npm install -g create-react-app
- Créez votre application React à l’aide de cette commande
npx create-react-app my-app
Vous pouvez remplacer my-app par le nom de votre choix. Pour notre cas, nous avons nommé notre application react-b.
Une fois installé, vous aurez quelque chose de similaire sur votre terminal :
Exécutez ces commandes 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’amorçage d’installation NPM
Node.js est livré avec npm (node package manager) 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 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.
importer ‘bootstrap/dist/css/bootstrap.css’ ;
Utilisation du gestionnaire de paquets de fils
Contrairement à npm, yarn n’est pas installé par défaut lorsque vous installez node.js.
Installez yard à l’aide de cette commande ;
npm install -g yarn
Cette commande installera le fil globalement, vous n’avez donc plus besoin d’installer le package 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.
importer ‘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 modifier les valeurs par défaut des modèles lorsque vous créez votre application React.
Méthode CDN
À l’aide d’un lien CDN (Content Delivery Network), vous pouvez ajouter Bootstrap à React. En ajoutant ce lien CDN, 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
- Sur la balise , ajoutez cette 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 enfin installé sur votre application React.
Utilisation du paquet React Bootstrap
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 déroulant de 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 le 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 la classe par className manuellement.
Pour que ce code fonctionne sur React, nous devons remplacer chaque « classe » 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, nous avons deux autres approches, react-bootstrap et reactstrap, où une intervention manuelle n’est pas nécessaire.
React-bootstrap
React-bootstrap a de vrais composants React construits à partir de zéro. La bibliothèque est compatible avec le noyau Bootstrap.
Suivez ces étapes pour démarrer avec React-bootstrap :
- Installez React-bootstrap avec cette commande :
npm install react-bootstrap bootstrap
- Accédez au fichier src/index.js ou App.js et ajoutez cette ligne avant les autres fichiers CSS
importer ‘bootstrap/dist/css/bootstrap.min.css’ ;
React-bootstrap vous permet d’importer un composant spécifique au lieu de toute la bibliothèque. Par exemple, si vous avez besoin d’importer un bouton sur l’un de vos composants, vous pouvez l’importer comme suit ;
importer { Button } de ‘react-bootstrap’ ;
Sangle React
Il s’agit d’une bibliothèque de composants React pour Bootstrap. Reactstrap s’appuie sur le framework CSS 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 la fonctionnalité.
Suivez ces étapes pour ajouter Reactstrap à votre application React :
- Installez Reactstrap via cette commande :
npm install reactstrap react react-dom
- Importez Bootstrap à l’aide de ces commandes :
npm install --save bootstrap
importer ‘bootstrap/dist/css/bootstrap.min.css’ ; (ajoutez cette ligne à votre app.js)
Vous pouvez également utiliser l’option de lien CDN pour inclure Bootstrap dans votre application. Après la première étape, accédez au 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 vous permet d’importer un composant spécifique au lieu de toute la bibliothèque. Par exemple, si vous avez besoin d’importer un bouton sur l’un de vos composants, vous pouvez importer en tant que ;
importer { Button } de ‘reactstrap’ ;
Conclusion
Vous trouverez ci-dessus quelques approches que vous pouvez utiliser pour installer Bootstrap sur 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 avec Bootstrap vous évite d’avoir à suivre tous les styles CSS au fur et à mesure que votre application se développe. Le style de votre application devient facile et efficace à mesure que vous disposez de plus de temps pour vous concentrer sur la fonctionnalité.
Vous pouvez explorer quelques raisons de choisir React Native pour le développement d’applications mobiles.