Deutsch

ReactJS-Tutorial

Hooks

Erweiterte Funktionen von ReactJS

Zusätzliche Konzepte

ReactJS - Bootstrap: Ein Anfängerguide zur Integration von Bootstrap

Hallo da draußen, zukünftige React-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ReactJS und Bootstrap zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen versichern, dass Sie am Ende dieses Tutorials ein solides Verständnis dafür haben werden, wie Sie Ihre React-Anwendungen mit Bootstrap stilvoll und professionell aussehen lassen können. Also, tauchen wir ein!

ReactJS - Bootstrap

Was ist Bootstrap?

Bevor wir mit der Integration von Bootstrap in React beginnen, lassen Sie uns einen Moment darauf verwenden, zu verstehen, was Bootstrap ist. Stellen Sie sich vor, Sie bauen ein Haus. Sie könnten jeden Ziegel, Nagel und jedes Möbelstück vom Scratch erstellen, oder Sie könnten vorgefertigte Komponenten verwenden, um den Prozess zu beschleunigen. Bootstrap ist wie diese vorgefertigten Komponenten, aber für die Webentwicklung.

Bootstrap ist ein beliebtes CSS-Framework, das eine Sammlung von vorgedachten Komponenten und Stilen bietet. Es ist wie ein Schatzkästchen voller sofort einsetzbarer Webseitenelemente, das Sie zur Hand haben. Mit Bootstrap können Sie schnell responsive und visuell ansprechende Webseiten erstellen, ohne alle CSS von Grund auf schreiben zu müssen.

Warum Bootstrap mit React verwenden?

Vielleicht fragen Sie sich, "Warum sollte ich Bootstrap mit React verwenden?" Lassen Sie mich Ihnen eine kleine Geschichte erzählen. Vor Jahren hatte ich einen Schüler, der brillant in React war, aber Schwierigkeiten mit Design hatte. Seine Anwendungen funktionierten einwandfrei, aber sie sahen aus, als wären sie in den 90ern stecken geblieben. Dann entdeckte er Bootstrap, und plötzlich wurden seine Projekte von "naja" zu "wow!" in null Komma nichts.

React ist großartig für die Erstellung dynamischer Benutzeroberflächen, aber es bringt keine eingebauten Stile mit. Durch die Kombination von React mit Bootstrap erhalten Sie das Beste aus beiden Welten: die leistungsstarke komponentenbasierte Architektur von React und die schönen, responsiven Designelemente von Bootstrap.

Bootstrap mit React integrieren

Nun, lassen Sie uns die Hände schmutzig machen und mit der Integration von Bootstrap in React beginnen. Es gibt zwei Hauptmethoden dazu:

  1. Verwenden von Bootstrap CSS
  2. Verwenden von React-Bootstrap

Wir werden beide Methoden erkunden, aber zuerst lassen Sie uns ein neues React-Projekt einrichten.

Ein neues React-Projekt einrichten

Falls Sie es noch nicht getan haben, müssen Sie Node.js auf Ihrem Computer installieren. Sobald das erledigt ist, öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus:

npx create-react-app mein-bootstrap-app
cd mein-bootstrap-app
npm start

Dies erstellt eine neue React-Anwendung und startet den Entwicklungsserver. Sie sollten die Standard-React-App in Ihrem Browser sehen.

Methode 1: Verwenden von Bootstrap CSS

Der einfachste Weg, Bootstrap in Ihr React-Projekt hinzuzufügen, ist durch das Einbinden der CSS-Datei. So geht's:

  1. Installieren Sie Bootstrap:
npm install bootstrap
  1. Importieren Sie das Bootstrap CSS in Ihrer src/index.js Datei:
import 'bootstrap/dist/css/bootstrap.min.css';

Jetzt können Sie Bootstrap-Klassen in Ihren React-Komponenten verwenden. Lassen Sie uns eine einfache Navbar erstellen, um es in Aktion zu sehen:

import React from 'react';

function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Meine Bootstrap-App</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Startseite</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Über</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
);
}

export default App;

Dieser Code erstellt eine responsive Navbar mit Bootstrap-Klassen. Die navbar Klasse definiert den Hauptcontainer, während andere Klassen wie navbar-expand-lg und navbar-light das Verhalten und Aussehen steuern.

Methode 2: Verwenden von React-Bootstrap

Obwohl das direkte Verwenden von Bootstrap CSS gut funktioniert, geht React-Bootstrap einen Schritt weiter, indem es React-Komponenten bietet, die Bootstrap-Funktionalität integrieren. Dieser Ansatz ist mehr "React-ähnlich" und kann zu saubererem, easier zu wartendem Code führen.

Lassen Sie uns es einrichten:

  1. Installieren Sie React-Bootstrap und Bootstrap:
npm install react-bootstrap bootstrap
  1. Importieren Sie das Bootstrap CSS in Ihrer src/index.js Datei (wie zuvor):
import 'bootstrap/dist/css/bootstrap.min.css';

Nun schreiben wir unsere Navbar neu, indem wir React-Bootstrap-Komponenten verwenden:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function App() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Meine Bootstrap-App</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Startseite</Nav.Link>
<Nav.Link href="#about">Über</Nav.Link>
<Nav.Link href="#contact">Kontakt</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default App;

Dieser Code erreicht das gleiche Ergebnis wie unser vorheriges Beispiel, aber er verwendet React-Bootstrap-Komponenten wie Navbar und Nav anstelle von rohen HTML-Elementen mit Bootstrap-Klassen. Dieser Ansatz ist mehr idiomatic in React und kann Ihren Code einfacher zu warten machen.

Bootstrap-Komponenten in React

Nun, da wir Bootstrap in unserer React-App eingerichtet haben, lassen uns einige beliebte Bootstrap-Komponenten erkunden und sehen, wie man sie in React verwendet. Wir werden ein einfaches 页面 Layout mit verschiedenen Bootstrap-Komponenten erstellen.

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';

function App() {
return (
<Container>
<Row className="mt-5">
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Karte 1</Card.Title>
<Card.Text>
Dies ist eine Beispielkarte mit etwas Inhalt.
</Card.Text>
<Button variant="primary">Mehr erfahren</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Karte 2</Card.Title>
<Card.Text>
Eine andere Karte mit unterschiedlichem Inhalt.
</Card.Text>
<Button variant="secondary">Erkunden</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Karte 3</Card.Title>
<Card.Text>
Wieder eine andere Karte, um Bootstrap zu präsentieren.
</Card.Text>
<Button variant="success">Entdecken</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

export default App;

In diesem Beispiel verwenden wir mehrere Bootstrap-Komponenten:

  • Container: Erzeugt einen zentrierten Container für unseren Inhalt.
  • Row und Col: Implementieren Bootstrap's Rastersystem für responsive Layouts.
  • Card: Präsentiert Inhalt in einem flexiblen Container.
  • Button: Erstellt gestylte Buttons mit verschiedenen Erscheinungsformen.

Die md={4} Eigenschaft auf den Col Komponentenweist Bootstrap an, jede Spalte auf mittelgroßen und größeren Bildschirmen 4 Einheiten aus dem 12-Einheiten-Rastersystem zu beanspruchen. Dies ergibt drei gleichbreite Spalten.

Bootstrap in React anpassen

Eine der großartigen Eigenschaften von Bootstrap ist seine Flexibilität. Sie können es leicht anpassen, um dem einzigartigen Stil Ihres Projekts zu entsprechen. Hier sind einige Möglichkeiten dazu:

1. Überschreiben von Bootstrap-Variablen

Erstellen Sie eine Datei namens custom.scss in Ihrem src Verzeichnis:

// Custom.scss

// Standardvariablen überschreiben
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// Bootstrap und seine Standardvariablen importieren
@import '~bootstrap/scss/bootstrap.scss';

Dann importieren Sie diese Datei in Ihrem index.js anstelle des Standard-Bootstrap CSS:

import './custom.scss';

2. Hinzufügen von benutzerdefinierten Klassen

Sie können auch Ihre eigenen Klassen neben den Bootstrap-Klassen hinzufügen:

<Button className="meine-eigene-schaltflaeche" variant="primary">Benutzerdefinierte Schaltfläche</Button>

Dann in Ihrer CSS (oder SCSS) Datei:

.meine-eigene-schaltflaeche {
border-radius: 25px;
text-transform: uppercase;
}

Fazit

Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt der Integration von Bootstrap mit React gemacht. Wir haben die Grundlagen der Einrichtung von Bootstrap in einem React-Projekt, die Verwendung von Bootstrap-Komponenten und sogar die Anpassung von Bootstrap an Ihre Bedürfnisse behandelt.

Denken Sie daran, dass Übung den Meister macht. Versuchen Sie, ein kleines Projekt mit dem zu bauen, was Sie hier gelernt haben. Vielleicht eine persönliche Portfolio-Seite oder eine einfache Blog-Layout. Je öfter Sie diese Werkzeuge verwenden, desto bequemer werden Sie mit ihnen.

Als wir hier schließen, erinnere ich mich an eine andere Schülerin, die initially von Frontend-Design intimidiert war. Nachdem sie gelernt hatte, Bootstrap mit React zu verwenden, schuf sie einige der schönsten und funktionalsten Webanwendungen, die ich je gesehen habe. Wer weiß? Vielleicht werden Sie meine nächste Erfolgsgeschichte!

Weiter codieren, bleiben Sie neugierig und vor allem, haben Sie Spaß daran. Bis zum nächsten Mal, fröhliches Reacten mit Bootstrap!

Credits: Image by storyset

Vorheriges Tutorial:
ReactJS - Animation
Nächstes Tutorial:
ReactJS - Karte