Français

Tutoriel ReactJS

Hooks

Fonctionnalités avancées de ReactJS

Concepts supplémentaires

ReactJS - Bootstrap : Guide de débutant pour l'intégration de Bootstrap

Bonjour à tous, futurs développeurs React ! Je suis ravi de vous guider dans cette excitante aventure dans le monde de ReactJS et Bootstrap. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux vous assurer que à la fin de ce tutoriel, vous aurez une compréhension solide de la manière de rendre vos applications React élégantes et professionnelles en utilisant Bootstrap. Alors, plongeons dedans !

ReactJS - Bootstrap

Qu'est-ce que Bootstrap ?

Avant de commencer à intégrer Bootstrap avec React, penchons-nous sur ce qu'est Bootstrap. Imaginez que vous construisez une maison. Vous pourriez créer chaque brique, chaque clou et chaque pièce de meuble à partir de zéro, ou vous pourriez utiliser des composants pré-fabriqués pour accélérer le processus. Bootstrap est comme ces composants pré-fabriqués, mais pour le développement web.

Bootstrap est un framework CSS populaire qui fournit une collection de composants et de styles pré-conçus. C'est comme avoir un coffre au trésor rempli d'éléments de site web prêts à l'emploi à portée de main. Avec Bootstrap, vous pouvez rapidement créer des pages web responsives et visuellement attractives sans avoir à écrire tout le CSS depuis zéro.

Pourquoi utiliser Bootstrap avec React ?

Vous vous demandez peut-être : "Pourquoi devrais-je utiliser Bootstrap avec React ?" Eh bien, laissez-moi vous raconter une petite histoire. Il y a quelques années, j'avais un élève qui était brillant en React mais avait du mal avec le design. Ses applications fonctionnaient parfaitement mais avaient l'air bloquées dans les années 90. Puis il a découvert Bootstrap, et d'un coup, ses projets sont passés de "bof" à "wow !" en un rien de temps.

React est excellent pour construire des interfaces utilisateur dynamiques, mais il ne comes pas avec des styles intégrés. En combinant React avec Bootstrap, vous obtenez le meilleur des deux mondes : l'architecture puissante et basée sur des composants de React et les éléments de design beautiful et responsive de Bootstrap.

Intégration de Bootstrap avec React

Maintenant, mettons les mains dans le cambouis et commençons à intégrer Bootstrap avec React. Il y a deux principales méthodes pour ce faire :

  1. En utilisant le CSS de Bootstrap
  2. En utilisant React-Bootstrap

Nous allons explorer les deux méthodes, mais d'abord, mettons en place un nouveau projet React.

Mise en place d'un nouveau projet React

Si ce n'est pas déjà fait, vous devez installer Node.js sur votre ordinateur. Une fois cela fait, ouvrez votre terminal et exécutez les commandes suivantes :

npx create-react-app mon-app-bootstrap
cd mon-app-bootstrap
npm start

Cela va créer une nouvelle application React et démarrer le serveur de développement. Vous devriez voir l'application React par défaut s'ouvrir dans votre navigateur.

Méthode 1 : Utiliser le CSS de Bootstrap

La manière la plus simple d'ajouter Bootstrap à votre projet React est en incluant le fichier CSS. Voici comment faire :

  1. Installez Bootstrap :
npm install bootstrap
  1. Importez le CSS de Bootstrap dans votre fichier src/index.js :
import 'bootstrap/dist/css/bootstrap.min.css';

Maintenant, vous pouvez utiliser les classes Bootstrap dans vos composants React. Créons une barre de navigation simple pour voir comment cela fonctionne :

import React from 'react';

function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Mon App Bootstrap</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Accueil</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">À propos</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
);
}

export default App;

Ce code crée une barre de navigation responsive en utilisant les classes Bootstrap. La classe navbar définit le conteneur principal, tandis que d'autres classes comme navbar-expand-lg et navbar-light contrôlent son comportement et son apparence.

Méthode 2 : Utiliser React-Bootstrap

Bien que l'utilisation directe du CSS de Bootstrap fonctionne bien, React-Bootstrap va un peu plus loin en fournissant des composants React qui intègrent la fonctionnalité de Bootstrap. Cette approche est plus "React-like" et peutaboutir à un code plus propre et plus facile à维护.

Mettons-le en place :

  1. Installez React-Bootstrap et Bootstrap :
npm install react-bootstrap bootstrap
  1. Importez le CSS de Bootstrap dans votre src/index.js (comme avant) :
import 'bootstrap/dist/css/bootstrap.min.css';

Maintenant, réécrivons notre barre de navigation en utilisant les composants React-Bootstrap :

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function App() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Mon App Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Accueil</Nav.Link>
<Nav.Link href="#about">À propos</Nav.Link>
<Nav.Link href="#contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default App;

Ce code atteint le même résultat que notre exemple précédent, mais il utilise des composants React-Bootstrap comme Navbar et Nav au lieu d'éléments HTML bruts avec des classes Bootstrap. Cette approche est plus idiomatique en React et peut rendre votre code plus facile à maintenir.

Composants Bootstrap en React

Maintenant que nous avons configuré Bootstrap dans notre application React, explorons quelques composants Bootstrap populaires et voyons comment les utiliser en React. Nous allons créer une mise en page de page simple en utilisant divers composants Bootstrap.

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';

function App() {
return (
<Container>
<Row className="mt-5">
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Carte 1</Card.Title>
<Card.Text>
Cette est une carte exemple avec un peu de contenu.
</Card.Text>
<Button variant="primary">En savoir plus</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Carte 2</Card.Title>
<Card.Text>
Une autre carte avec un contenu différent.
</Card.Text>
<Button variant="secondary">Explorer</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Carte 3</Card.Title>
<Card.Text>
Encore une carte pour montrer Bootstrap.
</Card.Text>
<Button variant="success">Découvrir</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

export default App;

Dans cet exemple, nous utilisons plusieurs composants Bootstrap :

  • Container : Crée un conteneur centré pour notre contenu.
  • Row et Col : Implémentent le système de grille Bootstrap pour des mises en page responsives.
  • Card : Affiche le contenu dans un conteneur flexible.
  • Button : Crée des boutons stylisés avec diverses apparitions.

La propriété md={4} sur les composants Col indique à Bootstrap de faire en sorte que chaque colonne occupe 4 unités sur 12 de la grille système sur les écrans de taille moyenne et plus grands. Cela résulte en trois colonnes de largeur égale.

Personnalisation de Bootstrap en React

L'une des grandes choses à propos de Bootstrap est sa flexibilité. Vous pouvez facilement le personnaliser pour correspondre au style unique de votre projet. Voici quelques moyens de le faire :

1. Surcharger les variables Bootstrap

Créez un fichier nommé custom.scss dans votre répertoire src :

// Custom.scss

// Surcharger les variables par défaut
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// Importer Bootstrap et ses variables par défaut
@import '~bootstrap/scss/bootstrap.scss';

Ensuite, importez ce fichier dans votre index.js au lieu du CSS de Bootstrap par défaut :

import './custom.scss';

2. Ajouter des classes personnalisées

Vous pouvez également ajouter vos propres classes alongside les classes Bootstrap :

<Button className="ma-bouton-personnalisee" variant="primary">Bouton personnalisé</Button>

Ensuite dans votre fichier CSS (ou SCSS) :

.ma-bouton-personnalisee {
border-radius: 25px;
text-transform: uppercase;
}

Conclusion

Félicitations ! Vous avez刚刚迈出了将Bootstrap与React集成的世界的第一步。我们已经覆盖了在React项目中设置Bootstrap的基础、使用Bootstrap组件以及甚至自定义Bootstrap以满足您的需求。

记住，熟能生巧。尝试使用这里学到的内容构建一个小项目。也许是一个个人作品集页面或一个简单的博客布局。Plus vous utilisez ces outils, plus vous deviendrez à l'aise avec eux.

Alors, continuez à coder, restez curieux, et surtout, amusez-vous avec ça. Jusqu'à la prochaine fois, joyeuse programmation avec Bootstrap !

Credits: Image by storyset

Tutoriel précédent:
ReactJS - Animation
Tutoriel suivant:
ReactJS - Carte