la popularité croissante des applications mono-page au cours des dernières années a conduit à un afflux de frameworks JavaScript, y compris Angular, React, Vue.js, Ember-la liste continue. Par conséquent, il n’est plus nécessaire d’utiliser une bibliothèque DOM, telle que jQuery, pour créer des applications web.
cela a coïncidé avec l’émergence de frameworks CSS conçus pour aider les développeurs à créer des applications Web réactives., Si vous êtes un développeur frontend, vous avez presque certainement utilisé ou au moins entendu parler de Bootstrap, Foundation et Bulma, tous les frameworks CSS réactifs (mobile-first) avec des fonctionnalités robustes et des utilitaires intégrés. Si React est le framework JavaScript le plus utilisé pour créer des applications web, Bootstrap est le framework CSS le plus populaire, alimentant des millions de sites Web sur internet.,
Dans ce tutoriel, nous allons vous montrer comment utiliser Réagir et Bootstrap, comment ajouter des fichiers d’amorce à Réagir application, comment faire pour installer Réagir Bootstrap paquets react-bootstrap (avec des exemples), et, enfin, comment créer un Réagir app avec Bootstrap.
Si vous ne faites que commencer avec ces frameworks, je vous suggère de parcourir la documentation officielle React et Bootstrap. Je vous encourage également à regarder le tutoriel vidéo complet ci-dessous pour une plongée plus approfondie.,
Ajouter un Bootstrap de Réagir
Les trois façons les plus courantes pour ajouter d’Amorçage de votre Réagissent application sont:
- Utiliser BootstrapCDN
- Importer des fichiers d’amorce à Réagir comme une dépendance
- Installer une Réagir paquet Bootstrap (
bootstrap-reactoureactstrap)
Utilisation de la BootstrapCDN
BootstrapCDN est le moyen le plus facile d’ajouter de Bootstrap Réagir à votre application. Aucune installation ou téléchargement. Mettez simplement un <link> dans la section <head> de votre application, comme indiqué dans l’extrait suivant.,
Si vous souhaitez utiliser les composants JavaScript livrés avec Bootstrap, vous devez placer les balises<script> suivantes près de la fin de vos pages, juste avant la balise</body> de fermeture, pour les activer.
comme vous pouvez le voir, Bootstrap 4 nécessite jQuery et Popper.js pour ses composants JavaScript. Dans l’extrait ci-dessus, nous avons utilisé la version slim de jQuery, bien que vous puissiez également utiliser la version complète.
Pour vos Réagir application, ces extraits de code sera généralement ajouté à la page d’index de votre application., Si vous avez utilisé create-react-app pour créer votre application, votre page public/index.html devrait ressembler à l’extrait suivant:
Vous pouvez maintenant commencer à utiliser les classes Bootstrap intégrées et les composants JavaScript dans vos composants React app.
importer Bootstrap en tant que dépendance
Si vous utilisez un outil de construction ou un module bundler tel que webpack, c’est l’option préférée pour ajouter Bootstrap à votre application React. Vous devrez installer Bootstrap en tant que dépendance pour votre application.,
npm install bootstrap
ou si vous utilisez Yarn:
yarn add bootstrap
Une fois Bootstrap installé, allez-y et incluez-le dans le fichier JavaScript d’entrée de votre application. Si vous êtes habitué à create-react-app, cela devrait être votre fichier src/index.js.
notez que nous avons importé le CSS minifié Bootstrap comme première dépendance. Avec cela, nous pouvons aller de l’avant en utilisant les classes Bootstrap intégrées dans nos composants React app., Cependant, avant de pouvoir utiliser les composants JavaScript de Bootstrap dans votre application, vous devrez installer jquery Et popper.js s’ils ne sont pas déjà installés.
npm install jquery popper.js
Ensuite, vous devez apporter des modifications supplémentaires à la balise src/index.js fichier pour ajouter les nouvelles dépendances comme le montre l’extrait suivant.
Ici, nous avons ajouté les importations de $ et Popper. Nous avons également importé le fichier Bootstrap JavaScript minified bundle. Vous pouvez maintenant utiliser des composants JavaScript Bootstrap dans votre application React.,
Installer une Réagir paquet Bootstrap
La troisième façon d’ajouter de Bootstrap à Réagir application consiste à utiliser un package qui a reconstruit Bootstrap composants conçus pour fonctionner comme Réagir composants. Les deux plus populaires sont des paquets:
react-bootstrapreactstrap
les Deux paquets sont d’excellents choix pour l’utilisation de Bootstrap avec Réagissent apps bien que vous n’êtes pas obligé d’utiliser l’un d’eux. Ils partagent des caractéristiques très similaires.,
Utilisation des classes et composants Bootstrap intégrés
Vous pouvez utiliser Bootstrap directement sur les éléments et les composants de votre application React en appliquant les classes intégrées comme n’importe quelle autre classe. Construisons un composant React de commutateur de thème simple à démontrer à l’aide de classes et de composants Bootstrap.,
Comme indiqué dans cette démo, nous sommes en utilisant une liste déroulante de composants disponibles dans le Bootstrap pour mettre en œuvre notre thème switcher. Nous utilisons également les classes de boutons intégrées pour définir la taille et la couleur du bouton déroulant.
nous allons continuer à écrire le code de notre composant ThemeSwitcher. Assurez-vous d’avoir déjà configuré une application React., Créez un nouveau fichier pour le composant et ajoutez – y l’extrait de code suivant:
ici, nous avons construit un composant de commutation de thème très simple en tirant parti du composant déroulant de Bootstrap et de quelques classes intégrées. Vous pouvez en savoir plus sur L’utilisation de la liste déroulante Bootstrap ici.
Tout d’abord, nous configurons l’état du composant avec une propriététheme et l’initialisons ennull., Ensuite, nous avons défini deux gestionnaires d’événements de clic resetTheme() Et chooseTheme() sur la classe de composant pour choisir un thème et réinitialiser le thème respectivement.
dans la méthode render(), nous affichons un menu déroulant de bouton divisé contenant trois thèmes. à savoir: Primary, Danger et Success. Chaque élément de menu est attaché à un gestionnaire d’événement de clic pour l’action appropriée. Notez comment nous utilisons theme.toLowerCase() pour obtenir la classe de couleur de thème pour les boutons déroulants et le texte., Nous utilisons par défaut secondary comme couleur de thème si aucun thème n’est défini.
dans cet exemple, nous avons vu à quel point il est facile d’utiliser les classes et composants intégrés de Bootstrap dans notre application React. Consultez la documentation Bootstrap pour en savoir plus sur les classes et composants intégrés.
react-bootstrap exemple
Maintenant, nous allons reconstruire notre thème commutateur à l’aide de react-bootstrap. Nous utiliserons l’outil de ligne de commandecreate-react-app pour créer notre application. Assurez-vous que l’outil create-react-app est installé sur votre machine.,
Créer un nouveau Réagir application à l’aide de create-react-app comme suit:
create-react-app react-bootstrap-app
Ensuite, aller de l’avant et installer les dépendances comme suit:
yarn add bootstrap@3 react-bootstrap
react-bootstrap actuellement cibles Bootstrap v3. Cependant, le travail est activement en cours pour fournir le support Bootstrap v4.
créez un nouveau fichier nomméThemeSwitcher.js dans le répertoiresrc de votre projet et mettez-y le contenu suivant.
ici, nous avons essayé d’imiter notre exemple initial autant que possible en utilisantreact-bootstrap., Nous importons des deux composantes de la balise react-bootstrap le paquet, à savoir SplitButton et MenuItem. Voir la documentation déroulantereact-bootstrap pour en savoir plus.
Tout d’abord, nous configurons l’état du composant avec une propriététheme et l’initialisons ennull. Ensuite, nous définissons unchooseTheme() cliquez sur le gestionnaire d’événements pour choisir un thème ou réinitialiser le thème.
puisque nous utilisons Bootstrap 3.3.,7, Nous avons créé quelques styles de conteneur dans la méthode render() pour nous aider à réaliser le centrage horizontal et vertical.
notez comment nous spécifions la taille du bouton sur le composantSplitButton en utilisant l’accessoirebsSize. Notez également comment nous passons lethemeClass à l’accessoirebsStyle pour changer dynamiquement la couleur du bouton en fonction du thème de l’état.
nous passons le nom du thème aueventKey prop de chaque composantMenuItem., Nous avons également mis la balise onSelect gestionnaire this.chooseTheme(), que nous avons définie précédemment. Le composantMenuItem transmet leeventKey et leevent lui-même au gestionnaireonSelect comme suit:
(eventKey: any, event: Object) => any
enfin, nous allons modifier le fichiersrc/index.js pour ressembler à l’extrait suivant:
ici, nous importons d’abord les fichiers CSS minifiés de Bootstrap. Nous importons également notre composantThemeSwitcher et le rendons dans le DOM.,
Si vous exécutez l’application avec la commande yarn start ou npm start. Votre application doit démarrer sur le port 3000 et doit ressembler à la démonstration suivante:
react-bootstrap démo. reactstrap exemple
Nous allons aller de l’avant et de reconstruire notre thème commutateur à l’aide de reactstrap cette fois., Nous utiliserons l’outil de ligne de commandecreate-react-app pour créer notre application. Assurez-vous que l’outil create-react-app est installé sur votre machine.
Créer un nouveau Réagir application à l’aide de create-react-app comme suit:
create-react-app reactstrap-app
Ensuite, aller de l’avant et installer les dépendances comme suit:
yarn add bootstrap reactstra
Créer un nouveau fichier nommé ThemeSwitcher.js dans le src répertoire de votre projet et de mettre le contenu suivant dans:
Ici, nous avons reconstruit notre premier exemple d’utilisation de la balise reactstrap., Nous importons quelques composants à partir de reactstrap. Voir la documentation déroulante du bouton reactstrap pour en savoir plus.
tout d’Abord, nous avons mis en place l’état du composant avec deux propriétés:
-
themepropriété initialisé ànull -
dropdownOpeninitialisé àfalse. Cette propriété sera utilisée dans le composantButtonDropdowndereactstrappour maintenir l’état de bascule de la liste déroulante.,
Nous définissons également un toggleDropdown() méthode pour basculer l’état ouvert de la liste déroulante. Cela sera également utilisé dans le composant ButtonDropdown.reactstrap fournit également un incontrôlée composant UncontrolledButtonDropdown qui ne nécessitent pas la balise isOpen prop ou le toggle gestionnaire prop de travail. Dans la plupart des cas, cela peut être utilisé au lieu d’utiliser ButtonDropdown.
chaque élément du menu déroulant est rendu à l’aide du composantDropdownItem., Notez comment nous spécifions la taille du bouton sur le composant DropdownToggle en utilisant l’accessoire size. Notez également comment nous passons le themeClassau colorprop sur les composants ButtonEt DropdownToggle pour changer dynamiquement la couleur du bouton en fonction du thème de l’état.
Nous avons également mis la balise onClick gestionnaire sur chaque DropdownItem comme nous l’avons fait avant, à l’aide de la balise chooseTheme() et resetTheme() les gestionnaires que nous avons défini précédemment.,
enfin, nous allons modifier le fichiersrc/index.js pour ressembler à l’extrait de code suivant:
ici, nous importons d’abord le fichier CSS minifié Bootstrap. Nous importons également notre composantThemeSwitcher et le rendons dans le DOM.
Si vous exécutez l’application avec la commande yarn start ou npm start., Votre application doit démarrer sur le port 3000 et doit ressembler à la démonstration suivante:
Créer un Réagir app avec Bootstrap
Nous allons pousser un peu plus loin pour créer une application avec un peu plus de détails. Nous allons essayer d’utiliser autant de classes et de composants Bootstrap que possible. Nous utiliserons également reactstrap pour intégrer Bootstrap avec React, car il prend en charge Bootstrap 4.,
nous allons utiliser l’outil de ligne de commande create-react-app pour créer notre application. Assurez-vous que l’outil create-react-app est installé sur votre machine. Voici une capture d’écran de ce que nous allons créer.,
Créer un nouveau Réagir application à l’aide de create-react-app comme suit:
create-react-app sample-app
Ensuite, aller de l’avant et installer les dépendances comme suit:
yarn add axios bootstrap reactstrap
Notez ici que nous installons axios comme une dépendance. Axios est un client HTTP basé sur des promesses pour le navigateur et le nœud.js. Cela nous permettra de récupérer les messages de L’API JSON BaconIpsum.,
apportez une petite modification au fichiersrc/index.js pour inclure le fichier CSS minifié Bootstrap. Il devrait ressembler à l’extrait suivant:
Créer un nouveau répertoire nommé components dans le src répertoire de votre projet. Créez un nouveau fichier, Header.js, dans le répertoire components avec le contenu suivant:
le composant que nous venons de créer dans cet extrait est le composant Header qui contient le menu de navigation., Ensuite, nous allons créer un nouveau fichier nommé SideCard.js dans le components répertoire avec le contenu suivant:
Ensuite, créez un nouveau fichier nommé Post.js dans le components répertoire et ajouter l’extrait de code suivant pour elle:
Ici nous avons créé un Post composant qui rend un post sur la page. Nous initialisons l’état du composant avec une propriété post définie sur null., Lorsque le composant se monte, nous utilisons axios pour récupérer un message aléatoire de quatre paragraphes de L’API JSON BaconIpsum et mettre à jour la propriété post dans l’état.
Enfin, modifier le src/App.js fichier pour ressembler à l’extrait suivant:
Ici, nous avons simplement inclure la balise Header, SideCard et Post composants dans le App composant. Remarquez comment nous utilisons quelques classes utilitaires réactives fournies par Bootstrap pour adapter notre application à différentes tailles d’écran.,
Si vous exécutez l’application avec la commande yarn start ou npm start, votre application doit démarrer sur le port 3000 et devrait ressembler à la capture d’écran, nous l’avons vu précédemment.
Conclusion
dans ce tutoriel, nous avons exploré différentes façons d’intégrer Bootstrap à nos applications React. Nous avons également vu comment nous pouvons utiliser deux des plus populaires Réagir Bootstrap bibliothèques, à savoir react-bootstrap et reactstrap.,
Nous avons utilisé seulement quelques composants Bootstrap dans ce tutoriel, comme d’alerte, insigne, liste déroulante, barre de navigation, système de navigation, un formulaire, un bouton, une carte, etc. Il y a encore quelques composants Bootstrap avec lesquels vous pouvez expérimenter, tels que des tables, des modaux, des info-bulles, un carrousel, un jumbotron, une pagination, des onglets, etc.
Vous pouvez consulter la documentation des paquets que nous avons utilisés dans ce tutoriel pour en savoir plus sur leur utilisation. Le code source de toutes les applications de démonstration de ce tutoriel se trouve sur GitHub.,
visibilité complète sur les applications react de production
le débogage des applications React peut être difficile, en particulier lorsque les utilisateurs rencontrent des problèmes difficiles à reproduire. Si vous souhaitez surveiller et suivre L’état Redux, faire apparaître automatiquement les erreurs JavaScript et suivre les requêtes réseau lentes et le temps de chargement des composants, essayez LogRocket. 
LogRocket est comme un DVR pour les applications web, enregistrant littéralement tout ce qui se passe sur votre application React., Au lieu de deviner pourquoi les problèmes se produisent, vous pouvez agréger et signaler l’état dans lequel se trouvait votre application lorsqu’un problème s’est produit. LogRocket surveille également les performances de votre application, en créant des rapports avec des mesures telles que la charge CPU du client, l’utilisation de la mémoire du client, etc.
le package middleware LogRocket Redux ajoute une couche supplémentaire de visibilité à vos sessions utilisateur. LogRocket enregistre toutes les actions et tous les états de vos magasins Redux.
modernisez la façon dont vous déboguez vos applications React — démarrez la surveillance gratuitement.