un guide pour les développeurs –

L'intégration de Bootstrap avec React permet aux développeurs de React d'utiliser le système de grille de pointe de Bootstrap et ses divers autres composants.

Dans ce tutoriel, nous allons:

• explorer les outils et les techniques de construction une interface utilisateur avec l'apparence de Bootstrap pour une application Web alimentée par React
• utilise reactstrap pour créer une application de liste de contacts React

React est l'une des technologies JavaScript les plus populaires pour applications web interactives. Sa popularité découle de son approche modulaire basée sur les composants, de sa composabilité et de son algorithme de re-rendu rapide.

Cependant, étant une bibliothèque de vues, React n'a aucun mécanisme intégré qui peut nous aider à créer des designs réactifs et élégants. et intuitive. C'est là qu'un framework de conception frontale comme Bootstrap intervient.

Pourquoi vous ne pouvez pas simplement inclure des composants Bootstrap avec React

Combiner Bootstrap avec React n'est pas aussi simple que d'ajouter à un fichier index.html . Cela est dû au fait que Bootstrap dépend de jQuery pour alimenter certains composants de l'interface utilisateur. jQuery utilise une approche de manipulation DOM directe qui est en contradiction avec l'approche déclarative de React

Si nous avons besoin de Bootstrap juste pour la grille de 12 colonnes responsive, ou les composants qui n'utilisent pas jQuery, nous pouvons simplement la feuille de style Bootstrap à la vanille. Sinon, il existe de nombreuses bibliothèques qui prennent soin de combler le fossé entre React et Bootstrap. Nous allons comparer les deux méthodes afin que nous soyons dans une meilleure position pour choisir l'approche qui fonctionne pour notre cas spécifique.

Commençons!

Configurer une feuille de style Bootstrap avec React

Utilisons le Créer une application React CLI pour créer un projet React, qui ne nécessite aucune configuration pour démarrer

Nous installons Create React App et exécutons la commande suivante pour démarrer un nouveau projet et servir la construction de développement:

 ] $ create-react-app réagir-et-bootstrap
$ cd reac-and-bootstrap
$ npm début

Voici la structure de répertoires créée par Create React App:

.
Package── package.json
├── public
Fav ├── favicon.ico
│ ├── index.html
Manifest └── manifest.json
RE── README.md
├── src
App ├── App.css
App ├── App.js
App ├── App.test.js
│ ├── index.css
Index ├── index.js
│ ├── logo.svg
Register └── registerServiceWorker.js
└── yarn.lock

Ensuite, téléchargeons la dernière version de la bibliothèque Bootstrap depuis le site officiel de Bootstrap . Le package inclut à la fois les versions compilées et minifiées du CSS et JavaScript. Nous allons simplement copier le CSS et le placer dans le répertoire public / . Pour les projets qui ont juste besoin de la grille, une feuille de style spécifique à la grille est incluse

Ensuite, nous créons un nouveau répertoire pour css à l'intérieur public / coller bootstrap.min.css dans notre répertoire css nouvellement créé, et liez-le depuis public / index.html :

Alternativement, nous pouvons utiliser un CDN pour récupérer le CSS minifié:

Voyons ce qui fonctionne et ce qui ne fonctionne pas avec cette configuration

Utiliser Bootstrap Vanilla avec React

Une fois que nous avons ajouté la feuille de style Bootstrap à un projet React, nous pouvons utiliser les classes Bootstrap normales dans JSX code. Dirigeons-nous vers le site de démonstration Bootstrap et recopiez un exemple de code aléatoire, juste pour vérifier que tout fonctionne comme il se doit:

Comme nous pouvons le voir, la forme semble bonne, mais pas NavBar. C'est parce que NavBar dépend du plugin Collapse jQuery que nous n'avons pas importé. En plus d'être incapables de basculer les liens de navigation, nous ne pouvons pas utiliser des fonctionnalités comme les menus déroulants, les alertes fermables et les fenêtres modales, pour n'en nommer que quelques-uns.

Ne serait-il pas génial d'importer Bootstrap comme composants React? le plus de React? Par exemple, imaginez si nous pouvions utiliser une combinaison de composants Grid, Row et Column pour organiser la page au lieu des classes HTML embêtantes:

  

    

       Une des trois colonnes
    
    

       Une des trois colonnes
    
    

       Une des trois colonnes
    
  





  
      
         Une des trois colonnes
    
    
         Une des trois colonnes
    
     
         Une des trois colonnes
    
  

Heureusement, nous n'avons pas besoin d'implémenter notre propre bibliothèque pour atteindre cet objectif, car il existe déjà des solutions populaires. Jetons un coup d'œil à certains d'entre eux

Un aperçu des bibliothèques tierces pour React et Bootstrap

Il y a quelques bibliothèques qui essayent de créer une implémentation spécifique à React de Bootstrap afin que nous puissions utiliser des composants JSX tout en travailler avec des styles Bootstrap. J'ai compilé une liste de quelques modules Bootstrap populaires que nous pouvons utiliser avec nos projets React.

React-Bootstrap est de loin l'une des bibliothèques les plus populaires pour ajouter des composants Bootstrap dans React. Cependant, au moment d'écrire ce tutoriel, il cible Bootstrap v3 et non la dernière version de Bootstrap. Il est en développement actif et l'API peut casser quand une version plus récente est publiée

reactstrap est une autre bibliothèque qui nous donne la possibilité d'utiliser des composants Bootstrap dans React. Contrairement à React-Bootstrap, reactstrap est construit pour la dernière version de Bootstrap. Le module comprend des composants pour la typographie, des icônes, des formulaires, des boutons, des tableaux, des grilles de mise en page et de la navigation. Il est également en développement actif et c'est une bonne alternative pour construire des applications Bootstrap fonctionnant avec React.

Il existe quelques autres bibliothèques comme React-UI et des modules spécifiques au domaine comme React-bootstrap -table et Panneau d'administration CoreUI-React sur GitHub, qui fournit un support étendu pour créer des interfaces utilisateur géniales en utilisant React.

Le reste de ce tutoriel se concentrera sur reactstrap, car c'est le seul module populaire qui utilise la dernière version de Bootstrap.

Configuration de la bibliothèque reactstrap

Nous commençons par installer la bibliothèque reactstrap en utilisant npm:

 npm install --save reactstrap @ next

Maintenant, nous pouvons importer les composants pertinents du module comme suit:

 import {Container, Row, Col} de 'reactstrap';

Cependant, la bibliothèque ne fonctionnera pas comme on pourrait s'y attendre. Comme expliqué sur le site reactstrap la raison en est que reactstrap n'inclut pas CSS Bootstrap, nous devons donc l'ajouter nous-mêmes:

 npm install --save bootstrap

Ensuite, nous importons Bootstrap CSS dans le fichier src / index.js :

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

Bootstrap Grid Basics

Bootstrap a un réactif, mobile premier et système de grille fluide qui permet jusqu'à 12 colonnes par page. Pour utiliser la grille, nous devons importer les composants Container, Row et Col.

Le Container accepte une propriété fluide qui convertit une disposition de largeur fixe en une disposition de largeur. Essentiellement, il ajoute la classe correspondante .container-fluid Bootstrap à la grille.

Comme pour s, nous pouvons les configurer pour accepter des accessoires tels que xs ] md sm et lg qui sont équivalents aux classes [- de Bootstrap - par exmple,

Alternativement, nous pouvons passer un objet aux accessoires avec des propriétés optionnelles comme taille ordre et offset . La propriété size décrit le nombre de colonnes, alors que order nous permet d'ordonner les colonnes et accepte une valeur comprise entre 1 et 12. La propriété offset déplace les colonnes vers le droit.

Le code ci-dessous illustre certaines des fonctionnalités de la grille dans reactstrap:

Bootstrap Style Components dans React

Maintenant que nous avons reatstrap à portée de main, il y a des tonnes de Bootstrap 4 Réagir. Les recouvrir tous est au-delà de ce tutoriel, mais essayons quelques composants importants et les utilisons dans un projet réel - par exemple, une application de liste de contacts

Barre de navigation

reactstrap Navbars sont une barre de navigation réactive Composants. Une Navbar peut avoir des sous-composants comme NavbarBrand, Nav, NavItem, etc. pour mieux organiser les liens de navigation.

Pour rendre la NavBar responsive, nous pouvons inclure un dans notre composant puis l'enrober dans un Regardez le code ci-dessous, qui montre comment utiliser le composant Navbar et l'état React pour stocker les données de basculement:

 export default class Exemple extends React. Composant {
  constructeur (accessoires) {
    super (les accessoires);

    this.toggle = this.toggle.bind (ceci);
    this.state = {
      isOpen: false
    }
  }
  bascule () {
    this.setState ({
      isOpen:! this.state.isOpen
    });
  }
  render () {
    revenir (
      

        
             {/ * Nom de la marque * /}
               
                Démo
            
               {/ * Ajouter toggler à l'effacement automatique * /}
          
          

               {/ * Tirez à gauche * /}
            

             {/ * Tirez à droite * /}
            
          
        
      
    );
  }
}

Fenêtre modale

Le composant modal reatstrap Modal crée un Bootstrap Modal avec un en-tête, un corps et un pied de page

Un composant modal accepte quelques accessoires et rappels pour rendre la fenêtre interactive et fermable.

Le prop isOpen détermine si le modal doit être visible. Le rappel à bascule peut être utilisé pour basculer la valeur de isOpen dans le composant de contrôle

Il existe des accessoires supplémentaires pour ajouter des effets de transition. Les rappels disponibles incluent onEnter onExit onOpened et onClosed :

 {/ * Pour le modal d'ouvrir, ce .state.show devrait devenir vrai, ce qui est généralement déclenché par un événement onClick * /}
{/ * toggleModal définirait l'état de show sur false onClose * /}



    
         Titre modal
    

    
         Lorem ipsum dolor s'asseoir amet, consectetur adipisicing elit, sed faire eiusmod temporel incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea commodo consequat.
    

    
         Fais quelque chose  {''}
         Annuler 
     

Forms

Un reactstrap

 
   
       
      
          
      
   

   
       Sélectionnez 
      
          
      
   

   
       Sélectionnez plusieurs 
      
        
      
    

  
     Zone de texte 
    
      
    
  

 
   Article 1 
   Article 2 
   ... 
;