Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

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.

instagram viewer

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é public 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 déposer.

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 :

début npm

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 dans 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 :

importer Réagir depuis'réagir'
constante En-tête = () => {
retour (




"tête de mât">
"récipient">
"mât-sous-titre">Bienvenue dans notre studio !</div>









"masthead-heading text-uppercase">
 IlRavi de vous rencontrer
 </div>



"btn btn-primaire btn-xl text-majuscule" href="#prestations de service">
 Dis m'en plus
 </a>
 </div>
 </header>
 </div>
 );
};


exporterdéfaut Entête

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:

html>
<htmllangue="fr">


<diriger>
<métajeu de caractères="utf-8" />
<lienrel="icône"href="%PUBLIC_URL%/favicon.ico" />
<métanom="fenêtre"contenu="width=device-width, initial-scale=1" />
<métanom="thème-couleur"contenu="#000000" />
<métanom="description"contenu="Site Web créé à l'aide de create-react-app"/>
<lienrel="Icône Apple touch"href="%PUBLIC_URL%/logo192.png" />
<lienrel="manifeste"href="%PUBLIC_URL%/manifest.json" />
<titre>Application de réactiontitre>
<lienrel="icône"taper="image/x-icone"href="assets/favicon.ico" />


 Icônes Font Awesome (version gratuite)
<scénariosrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"origine croisée="anonyme">scénario>


 Polices Google
<lienhref=" https://fonts.googleapis.com/css? famille=Montserrat: 400 700"rel="feuille de style"taper="texte/css" />
<lienhref=" https://fonts.googleapis.com/css? famille=Roboto+Dalle: 400 100 300 700"rel="feuille de style"taper="texte/css" />


 CSS du thème principal (inclut Bootstrap)
<lienhref="%PUBLIC_URL%/css/styles.css"rel="feuille de style" />
diriger>


<corps>
<pas de script>Vous devez activer JavaScript pour exécuter cette application.pas de script>


<dividentifiant="racine">div>


 Noyau d'amorçage JS
<scénariosrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">scénario>


 Thème central JS
<scénariosrc="%URL_PUBLIC%/js/scripts.js">scénario>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * Formulaires SB JS * *


 * * Activez votre formulaire sur https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<scénariosrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">scénario>
corps>
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 installer réagir-routeur-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 :

importer { NavigateurRouteur comme Routeur, Itinéraires, Itinéraire } depuis"réagir-routeur-dom";
importer La navigation depuis'./composants/Navigation';
importer Maison depuis'./Pages/Accueil';
importer À propos depuis'./Pages/À propos';
importer Contact depuis'./Pages/Contact'
importer Entête depuis"./composants/En-tête";
fonctionApplication() {
retour (


"Application">










"/" élément={} />
"/à propos de" élément={} />
"/contact" élément={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


exporterdéfaut application ;

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.