Comment utiliser le framework React BootStrap

Cette fois, je vais vous montrer comment utiliser le framework React BootStrap et quelles sont les précautions d'utilisation du framework React BootStrap. Ce qui suit est un cas pratique, jetons un coup d'œil.

Installation

[Recommandations vidéo associées : Tutoriel Bootstrap]

Exécutez dans le cd du terminal dans le répertoire de votre projet : $ npm install react-bootstrap

Ensuite, nous devons référencer manuellement le CSS

<!-- Latest compiled and minified CSS -->
<link>
<!-- Optional theme -->
<link>

Mais nous utilisons des URL externes lors de l'apprentissage, ce qui est trop lent. Par conséquent, nous installons bootstrap localement.

$ npm install bootstrap

Ensuite, vous trouverez bootstrap dans votre répertoire node_modules.

De cette façon, les CSS locaux peuvent être référencés sur la page

<link>

D'accord, utilisons le framework React-BootStrap

http://react-bootstrap . github.io/components.html

Nous démontrons ici l'utilisation de son composant de barre de navigation

Dans index.js :

const React = require("react");
const ReactDOM = require("react-dom");
import {Navbar} from "react-bootstrap";
const navbarInstance = (
  <navbar>
    <navbar.header>
      <navbar.brand>
        <a>react-bootstrap</a>
      </navbar.brand>
    </navbar.header>
  </navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

Sur la page html :

nbsp;html>


  
  
  <link>




  <script></script>
  <script></script>

L'effet est le suivant :

Dépend principalement de l'adresse du navigateur, qui est le "démarrage à chaud" que nous avons configuré plus tôt.

Exécutez la commande $ npm start pour démarrer le service

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. des choses plus excitantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

React Native utilise la récupération pour télécharger des images

Comment réduire la taille des fichiers empaquetés par Webpack après compression

Utiliser import et require pour empaqueter JS

Plusieurs façons de lier cela pour réagir aux événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!