Utilisation de bootstrap avec React: Exemples pratiques

Voir comment utiliser Bootstrap avec React Trois Ways: Bootstrap directement avec des classes de services publics, React-Bootstrap et Kendoreact avec Bootstrap Thary.

La création d’applications Web modernes nécessite à la fois des fonctionnalités et une conception attrayante. Réagir excelle à créer des interfaces utilisateur dynamiques, tandis que Amorce Fournit un cadre CSS complet pour les conceptions réactives et professionnelles. Lorsque vous combinez ces deux technologies, vous obtenez une boîte à outils pour le développement rapide des applications de l’interface utilisateur.

Dans ce didacticiel React Bootstrap, nous explorerons comment utiliser Bootstrap avec React à travers des exemples pratiques. Nous couvrirons trois approches différentes:

• Installation de bootstrap directement via NPM et utiliser des cours de services publics
• Tirant l’extraction du react-bootstrap Bibliothèque de composants pour les composants spécifiques à React
• Utilisation de progrès Kendoreact Composants avec thèmes bootstrap pour les applications de qualité d’entreprise

Partage: Installation de bootstrap dans votre projet React

Commençons par l’approche la plus directe, en installant Bootstrap en tant que dépendance dans votre application React. Cette méthode vous donne accès à toutes les classes et composants des utilitaires de Bootstrap tout en conservant un contrôle total sur votre style.

Tout d’abord, installez bootstrap à l’aide de NPM ou de fil:

npm install bootstrap

Une fois installé, importez le CSS de bootstrap dans votre fichier d’application principal (généralement src/main.jsx ou src/App.jsx):

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

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

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Maintenant, vous pouvez commencer à utiliser des classes bootstrap à travers vos composants React. Créons un exemple pratique: un composant de carte de produit qui présente les capacités de style de bootstrap.

React Bootstrap Exemple: Construire un tableau de bord produit

Nous créerons un tableau de bord de produit qui démontre divers composants bootstrap travaillant ensemble dans une application React. Cet exemple vous montrera comment utiliser Bootstrap avec React pour les scénarios du monde réel.

Tout d’abord, nous créerons un ProductCard composant:

export function ProductCard({ product }) {
  return (
    <div className="card h-100 shadow-sm">
      <img
        src={product.image}
        className="card-img-top"
        alt={product.name}
        style={{ height: '200px', objectFit: 'cover' }}
      />
      <div className="card-body d-flex flex-column">
        <h5 className="card-title">{product.name}</h5>
        <p className="card-text text-muted flex-grow-1">
          {product.description}
        </p>
        <div className="d-flex justify-content-between align-items-center">
          <span className="h5 text-primary mb-0">${product.price}</span>
          <button className="btn btn-outline-primary">Add to Cart</button>
        </div>
      </div>
    </div>
  );
}

Ensuite, créons un composant de tableau de bord principal qui utilise le système de grille de bootstrap:

import { useState } from 'react';

export function ProductDashboard() {
  const [products] = useState([
    {
      id: 1,
      name: "Wireless Headphones",
      description: "High-quality wireless headphones with noise cancellation",
      price: 199.99,
      image: "https://via.placeholder.com/300x200"
    },
    {
      id: 2,
      name: "Smart Watch",
      description: "Feature-rich smartwatch with health monitoring",
      price: 299.99,
      image: "https://via.placeholder.com/300x200"
    },
    {
      id: 3,
      name: "Laptop Stand",
      description: "Ergonomic adjustable laptop stand for better posture",
      price: 79.99,
      image: "https://via.placeholder.com/300x200"
    }
  ]);

  const [searchTerm, setSearchTerm] = useState('');

  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="container-fluid py-4">
      {}
      <div className="row mb-4">
        <div className="col-12">
          <div className="d-flex justify-content-between align-items-center">
            <h1 className="display-4 fw-bold text-primary">Product Store</h1>
            <div className="d-flex gap-2">
              <input
                type="text"
                className="form-control"
                placeholder="Search products..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                style={{ width: '250px' }}
              />
              <button className="btn btn-primary">
                <i className="bi bi-search"></i> Search
              </button>
            </div>
          </div>
        </div>
      </div>

      {}
      {searchTerm && filteredProducts.length === 0 && (
        <div className="alert alert-warning" role="alert">
          <i className="bi bi-exclamation-triangle"></i> No products found matching "{searchTerm}"
        </div>
      )}

      {}
      <div className="row g-4">
        {filteredProducts.map(product => (
          <div key={product.id} className="col-lg-4 col-md-6 col-sm-12">
            <ProductCard product={product} />
          </div>
        ))}
      </div>

      {}
      <div className="row mt-5">
        <div className="col-12">
          <div className="card bg-light">
            <div className="card-body">
              <div className="row text-center">
                <div className="col-md-4">
                  <h3 className="text-primary">{products.length}</h3>
                  <p className="text-muted">Total Products</p>
                </div>
                <div className="col-md-4">
                  <h3 className="text-success">{filteredProducts.length}</h3>
                  <p className="text-muted">Showing</p>
                </div>
                <div className="col-md-4">
                  <h3 className="text-info">$579.97</h3>
                  <p className="text-muted">Total Value</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProductDashboard;

Nous pouvons enfin rendre ce tableau de bord dans notre composant d’application principal:

import { ProductDashboard } from './ProductDashboard';

function App() {
  return <ProductDashboard />;
}

export default App;

Le résultat est un tableau de bord de produit professionnel avec un grand titre de «magasin de produits», des fonctionnalités de recherche dans le coin supérieur droit et une grille réactive de cartes de produits. Chaque carte affiche l’image du produit, le nom, la description et le prix avec un bouton «Ajouter au panier» propre.

Cet exemple montre plusieurs fonctionnalités bootstrap travaillant ensemble dans React:

• Système de grille: Colonnes réactives qui s’adaptent à différentes tailles d’écran
• Cartes: Présentation des produits propres avec un style cohérent
• Formes: Fonctionnalité de recherche avec des contrôles de forme bootstrap
• Alertes: Messagerie conditionnelle pour les résultats de recherche vides
• Services publics: Espacement, couleurs et cours d’alignement

Testez ce qui précède dans ce stackblitz démo.

Utilisation de React-Bootstrap pour le développement basé sur les composants

Bien que l’utilisation des classes CSS de bootstrap fonctionne directement bien, le react-bootstrap La bibliothèque offre une approche plus axée sur la réaction. Cette bibliothèque propose des composants de réaction prédéfinis qui encapsulent la fonctionnalité de bootstrap tout en suivant les modèles et les conventions React.

Nous installons d’abord la bibliothèque React-Bootstrap:

npm install react-bootstrap

Avec React-Bootstrap installé, nous pouvons reconstruire notre tableau de bord de produit à l’aide de React-Bootstrap composants. Nous allons commencer par convertir notre ProductCard Composant pour utiliser les composants React-Bootstrap:

import { Card, Button, Badge } from 'react-bootstrap';

export function ProductCard({ product }) {
  return (
    <Card className="h-100 shadow-sm">
      <Card.Img 
        variant="top" 
        src={product.image}
        style={{ height: '200px', objectFit: 'cover' }}
      />
      <Card.Body className="d-flex flex-column">
        <Card.Title>{product.name}</Card.Title>
        <Card.Text className="text-muted flex-grow-1">
          {product.description}
        </Card.Text>
        <div className="d-flex justify-content-between align-items-center">
          <h5 className="text-primary mb-0">${product.price}</h5>
          <Button variant="outline-primary">Add to Cart</Button>
        </div>
        {product.isNew && (
          <Badge bg="success" className="position-absolute top-0 start-0 m-2">
            New
          </Badge>
        )}
      </Card.Body>
    </Card>
  );
}

Remarquez comment nous utilisons maintenant Card, Card.Img, Card.Body, Card.Title et Card.Text Composants au lieu d’éléments HTML avec des classes bootstrap. Le Button Le composant remplace l’élément de bouton HTML, et nous pouvons utiliser le variant Prop pour spécifier le style du bouton bootstrap.

Reconstruisons maintenant notre composant de tableau de bord à l’aide des composants de disposition de React-Bootstrap:

import { useState } from 'react';
import { 
  Container, 
  Row, 
  Col, 
  Form, 
  Alert
} from 'react-bootstrap';

function ProductDashboard() {
  const [products] = useState([
    {
      id: 1,
      name: "Wireless Headphones",
      description: "High-quality wireless headphones with noise cancellation",
      price: 199.99,
      image: "https://via.placeholder.com/300x200",
      isNew: true
    },
    {
      id: 2,
      name: "Smart Watch",
      description: "Feature-rich smartwatch with health monitoring",
      price: 299.99,
      image: "https://via.placeholder.com/300x200"
    },
    {
      id: 3,
      name: "Laptop Stand",
      description: "Ergonomic adjustable laptop stand for better posture",
      price: 79.99,
      image: "https://via.placeholder.com/300x200"
    }
  ]);

  const [searchTerm, setSearchTerm] = useState('');
  const [showAlert, setShowAlert] = useState(false);

  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleSearch = (e) => {
    const term = e.target.value;
    setSearchTerm(term);
    setShowAlert(term && filteredProducts.length === 0);
  };

  return (
    <Container fluid className="py-4">
      <Row className="mb-4">
        <Col>
          <div className="d-flex justify-content-between align-items-center">
            <h1 className="display-4 fw-bold text-primary">Product Store</h1>
            <Form.Control
              type="text"
              placeholder="Search products..."
              value={searchTerm}
              onChange={handleSearch}
              style={{ width: '250px' }}
            />
          </div>
        </Col>
      </Row>

      {showAlert && (
        <Alert variant="warning" dismissible onClose={() => setShowAlert(false)}>
          No products found matching "{searchTerm}"
        </Alert>
      )}

      <Row xs={1} md={2} lg={3} className="g-4">
        {filteredProducts.map(product => (
          <Col key={product.id}>
            <ProductCard product={product} />
          </Col>
        ))}
      </Row>

      <Row className="mt-5">
        <Col>
          <Card bg="light">
            <Card.Body>
              <Row className="text-center">
                <Col md={4}>
                  <h3 className="text-primary">{products.length}</h3>
                  <p className="text-muted">Total Products</p>
                </Col>
                <Col md={4}>
                  <h3 className="text-success">{filteredProducts.length}</h3>
                  <p className="text-muted">Showing</p>
                </Col>
                <Col md={4}>
                  <h3 className="text-info">$579.97</h3>
                  <p className="text-muted">Total Value</p>
                </Col>
              </Row>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}

export default ProductDashboard;

Le résultat semble identique à notre exemple de bootstrap Vanilla – un tableau de bord propre et professionnel avec la fonctionnalité de recherche, les cartes de produits et les statistiques. La seule différence est que nous utilisons maintenant des composants React au lieu d’éléments HTML avec des classes bootstrap.

L’approche React-Bootstrap offre plusieurs avantages:

• Composant basé sur les composants: Chaque élément de bootstrap est un composant réact avec des accessoires
• Support dactylographié: Meilleur support IDE et vérification des types
• Manipulation des événements: Les gestionnaires d’événements de style réact au lieu des attributs de données de bootstrap
• Accessibilité: Attributs ARIA intégrés et navigation au clavier

Testez ce qui précède dans ce stackblitz démo.

Kendoreact avec thème bootstrap

Pour les applications d’entreprise nécessitant des composants tels que les grilles de données, les graphiques et les contrôles de formulaires complexes, Progress Kendoreact fournit une solution complète. Ce qui rend Kendoreact particulièrement attrayant pour les utilisateurs de bootstrap, c’est sa prise en charge du thème bootstrap.

KendoreAct propose un Thème bootstrap Cela permet la cohérence visuelle avec les applications de style bootstrap. Le thème Bootstrap de Telerik et Kendo est un thème basé sur SCSS entièrement personnalisable qui utilise des mesures bootstrap pour intégrer de manière transparente avec les applications déjà en utilisant Bootstrap pour la mise en page et les styles.

Voici comment configurer Kendoreact avec le thème bootstrap:

npm install --save @progress/kendo-theme-bootstrap

Nous importons ensuite le thème bootstrap dans notre application:

import '@progress/kendo-theme-bootstrap/dist/all.css';

Vous pouvez maintenant utiliser des composants KendoreAct qui héritent automatiquement du style bootstrap:

import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Button } from '@progress/kendo-react-buttons';

function EnterpriseProductGrid() {
  const [products] = useState([
    {
      id: 1,
      name: "Wireless Headphones",
      category: "Electronics",
      price: 199.99,
      inStock: true,
    },
    
  ]);

  return (
    <div className="container mt-4">
      <div className="row mb-3">
        <div className="col">
          <h2 className="text-primary">Product Management</h2>
          <p className="text-muted">Powered by KendoReact with Bootstrap theme</p>
        </div>
        <div className="col-auto">
          <Button themeColor="primary" className="me-2">
            Add Product
          </Button>
          <Button themeColor="secondary">
            Export Data
          </Button>
        </div>
      </div>
      
      <Grid data={products} style={{ height: '400px' }}>
        <GridColumn field="name" title="Product Name" />
        <GridColumn field="category" title="Category" />
        <GridColumn field="price" title="Price" format="{0:c}" />
        <GridColumn field="inStock" title="In Stock" />
        <GridColumn field="lastUpdated" title="Last Updated" format="{0:d}" />
      </Grid>
    </div>
  );
}

Le thème Bootstrap Kendoreact offre plusieurs avantages:

• Design cohérent: Les composants correspondent au langage visuel de bootstrap
• Fonctionnalité avancée: Composants de qualité d’entreprise comme grilles de données et graphiques que Bootstrap et React-Bootstrap n’offre pas
• Personnalisation: Prise en charge de la personnalisation SCSS complète
• Apparition professionnelle: Composants polis adaptés aux applications commerciales

Meilleures pratiques pour l’intégration bootstrap et réagir

Lors de la création d’applications qui combinent bootstrap avec React, considérez ces meilleures pratiques:

1. Choisissez votre approche de manière cohérente

Ne mélangez pas différentes méthodes d’intégration bootstrap dans le même projet. Choisissez une approche et respectez-le pour la cohérence.

2. Tire en œuvre les modules CSS pour un style personnalisé

Lorsque vous avez besoin de styles personnalisés aux côtés de bootstrap, utilisez des modules CSS pour éviter les conflits mondiaux d’espace de noms:

import styles from './ProductCard.module.css';

function ProductCard({ product }) {
  return (
    <div className={`card ${styles.customCard}`}>
      {}
    </div>
  );
}

3. Optimiser la taille du faisceau

Si vous utilisez Vanilla Bootstrap, envisagez d’importer uniquement les composants dont vous avez besoin:

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


import 'bootstrap/scss/functions';
import 'bootstrap/scss/variables';
import 'bootstrap/scss/mixins';
import 'bootstrap/scss/grid';
import 'bootstrap/scss/cards';

4. Maintenir une conception réactive

Testez toujours vos composants sur différentes tailles d’écran et utilisez les utilitaires réactifs de bootstrap:

function ResponsiveComponent() {
  return (
    <div className="row">
      <div className="col-12 col-md-8 col-lg-6">
        <div className="d-block d-md-flex justify-content-between">
          <span className="fw-bold">Product Name</span>
          <span className="text-muted d-none d-lg-block">SKU: 12345</span>
        </div>
      </div>
    </div>
  );
}

Conclusion

Apprendre à utiliser Bootstrap avec React ouvre de puissantes possibilités pour le développement rapide de l’interface utilisateur. Que vous choisissiez d’utiliser directement les classes d’utilité de Bootstrap, tirez parti des composants React-Bootstrap ou intégrez Kendoreact à Bootstrap The Thary, chaque approche offre des avantages uniques pour différentes exigences de projet.

La clé est de comprendre les besoins de votre projet:

En maîtrisant ces approches, vous serez équipé pour créer des applications Web réactives qui combinent les fonctionnalités de React avec le système de conception éprouvé de Bootstrap.

N’oubliez pas que Bootstrap et réagissent le mieux ensemble lorsque vous maintenez la cohérence dans votre approche choisie et suivez les meilleures pratiques de React pour la conception des composants et la gestion de l’État.