Heim >Web-Frontend >js-Tutorial >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>es2105的写法 <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!