La création d’une interface frontale peut être difficile si vous débutez avec ReactJS. Le framework Bootstrap, aux côtés de ses modèles, le rend plus facile et plus rapide.
Bootstrap propose des modèles thématiques que tout le monde peut personnaliser et publier gratuitement. Vous pouvez choisir parmi de nombreux modèles avant de les télécharger et de les utiliser dans votre application.
Les modèles vous aident à créer rapidement des interfaces frontales remarquables, ce qui vous laisse plus de temps pour vous concentrer sur des fonctionnalités complexes. Vous pouvez en savoir plus sur les modèles Bootstrap en en intégrant un à une application ReactJS.
Créez votre application React
Commence par créer une application ReactJS dans un dossier sur votre machine. Alternativement, vous pouvez suivre l’officiel Guide de réaction lors de la création d’une nouvelle application.
Télécharger un modèle Bootstrap
Téléchargez un modèle de votre choix à partir du Démarrer l’amorçage site Web de thèmes ou un autre de votre préférence. Il existe plusieurs sites avec des modèles Bootstrap gratuits en ligne.
Pour ce guide, téléchargez le thème Bootstrap nommé Agency.
Une fois téléchargé, décompressez le fichier du dossier pour voir son contenu. Vous remarquerez que vous avez des dossiers nommés assets, CSS, JS et un fichier nommé index.html.
Ajouter un modèle Bootstrap à l’application ReactJS
Ensuite, copiez le contenu du dossier téléchargé dans le dossier nommé Publique dans votre application React. Vous remarquerez que vous avez maintenant deux fichiers index.html. Copiez le contenu du Bootstrap index.html fichier dans l’application React index.html dossier.
Afficher le modèle Bootstrap
Après avoir ajouté le Bootstrap HTML au fichier index.html de l’application, exécutez l’application pour voir si l’intégration a réussi. Utilisez la commande suivante :
npm start
Vous devriez voir le modèle dans votre navigateur, comme l’illustre l’image suivante.
Intégrer le thème Bootstrap dans les composants de l’application
Pour intégrer le modèle Bootstrap dans l’application React, vous devez copier les sections HTML de index.html vers chaque composant. Les composants vous permettent d’écrire du code pour différentes parties de l’application et de les réutiliser. Cela réduit les répétitions et organise également la structure de votre application.
Le fichier index.html comporte désormais différentes sections Navigation, À propos de nous, Contact et Pied de page. Dans le dossier src, créez deux dossiers, composants et pages. Divisez les sections dans les dossiers indiqués ci-dessous :
Les composants doivent inclure les éléments suivants :
- Header.jsx : la section Masthead.
- Navigation.jsx : la barre de navigation et le pied de page.
Le dossier des pages contiendra les éléments suivants :
- AboutUs.jsx : informations sur nous.
- Home.jsx : sections Services, Portefeuille, Clients et Équipe.
- Contacts.jsx : informations de contact.
Copiez le code HTML de chaque section du fichier index.html et ajoutez-le à chaque composant. La syntaxe devrait ressembler à ceci :
import React from 'react'const Header = () => {
return (
<div>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Studio!</div>
<div className="masthead-heading text-uppercase">
It's Nice To Meet You
</div>
<a className="btn btn-primary btn-xl text-uppercase" href="#services">
Tell Me More
</a>
</div>
</header>
</div>
);
};
export default Header
Ensuite, changez la syntaxe du HTML dans les composants en JSX. Pour le faire automatiquement sur l’éditeur Vscode, cliquez sur Ctrl + Maj + P. Cliquez sur l’option HTML vers JSX dans la fenêtre qui apparaît pour changer le HTML en JSX.
JSX est une extension syntaxique de JavaScript. Il vous permet d’utiliser un mélange de HTML et de JavaScript pour écrire du code dans les composants. Une fois que vous avez copié toutes les sections dans les composants, le fichier index.html ne contient que les liens et les scripts de style.
Cela ressemblera à ceci:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="%PUBLIC_URL%/js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
Créer des itinéraires pour les composants
Maintenant que vous avez les liens, les scripts et les composants dans l’application, vous devez créer des routes pour eux dans le fichier App.js. Les itinéraires rendront les pages de l’application pour la rendre dynamique.
Pour afficher les pages, installez react-router-dom avec la commande suivante :
npm install react-router-dom
Dans le App.js fichier, importez BrowserRouter en tant que routeur, Routes et Route à partir du bibliothèque react-router-dom. Ensuite, importez tous les Composants et pages. Le fichier devrait ressembler à ceci :
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Contact/>
<Router>
<Navigation>
<Routes>
<Route exact path="https://news.google.com/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
</Navigation>
</Router>
</div>
);
}
export default App;
Vous devriez voir les pages rendues sur l’hôte local lorsque vous naviguez dans le navigateur. Semblable au modèle que vous avez téléchargé, comme illustré ci-dessous.
Félicitations, vous avez intégré avec succès un thème Bootstrap dans votre application React. Vous pouvez maintenant personnaliser les pages selon vos préférences.
Pourquoi utiliser les modèles thématiques de Bootstrap ?
Les modèles Bootstrap aident à créer des interfaces frontales remarquables en très peu de temps. Il existe de nombreux thèmes parmi lesquels choisir. Tous les thèmes sont de la dernière version de Bootstrap. Ils sont également livrés avec des licences MIT et sont les dernières conceptions de l’industrie.
Bien que les avantages soient nombreux, s’appuyer sur des modèles réduit la créativité. Il est courant de trouver un thème populaire utilisé sur d’autres sites en ligne. Cependant, vous pouvez personnaliser un modèle avec un design unique.
Vous pouvez maintenant intégrer un modèle Bootstrap à votre application React. Commencez à construire avec des modèles Bootstrap et profitez de belles interfaces frontales.
— to news.google.com