So verwenden Sie das React BootStrap-Framework

Dieses Mal zeige ich Ihnen, wie Sie das React BootStrap-Framework verwenden und welche Vorsichtsmaßnahmen für die Verwendung des React BootStrap-Frameworks gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Installation

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Führen Sie in der Terminal-CD Ihr Projektverzeichnis aus: $ npm install react-bootstrap

Dann müssen wir manuell auf das CSS verweisen

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

Aber wir verwenden beim Lernen externe URLs, was zu langsam ist. Daher installieren wir Bootstrap lokal.

$ npm install bootstrap

Dann finden Sie Bootstrap in Ihrem node_modules-Verzeichnis.

Auf diese Weise kann auf lokales CSS auf der Seite verwiesen werden

<link>

Okay, verwenden wir das React-BootStrap-Framework

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

Hier demonstrieren wir die Verwendung seiner Navigationsleistenkomponente

In 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);

Auf der HTML-Seite:

nbsp;html>


  
  
  <link>




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

Der Effekt ist wie folgt:

Hängt hauptsächlich von der Browseradresse ab, bei der es sich um den „Heißstart“ handelt, den wir zuvor konfiguriert haben.

Führen Sie den Befehl $ npm start aus, um den Dienst zu starten

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Für weitere spannende Dinge achten Sie bitte auf PHP Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

React Native verwendet Fetch, um Bilder hochzuladen

So verkleinern Sie die von Webpack gepackten Dateien anschließend Komprimierung

Verwenden Sie Import und Require, um JS zu verpacken

Mehrere Möglichkeiten, dies an Reaktionsereignisse zu binden

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das React BootStrap-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!