React-Komponenten mit React-Bootstrap erstellen

In diesem Abschnitt lernen Sie, wie man React-Komponenten mit React-Bootstrap erstellt. React-Bootstrap ist eine Bibliothek, die vorgefertigte Komponenten und Styling bereitstellt.

1. React-Bootstrap installieren

Zuerst müssen wir React-Bootstrap sowie React Icons installieren:

npm install react-bootstrap bootstrap react-icons

Dann importieren wir das Bootstrap CSS in der main.jsx Datei:

// In src/main.jsx hinzufügen
import "bootstrap/dist/css/bootstrap.min.css";

2. Header-Komponente erstellen

import { Navbar, Container, Nav } from "react-bootstrap";

function Header() {
  return (
    <Navbar bg="light" expand="lg" className="mb-4">
      <Container>
        <Navbar.Brand href="/">Bücher-Projekt</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ms-auto">
            <Nav.Link href="/">Startseite</Nav.Link>
            <Nav.Link href="/search">Bücher suchen</Nav.Link>
            <Nav.Link href="/favorites">Meine Favoriten</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Header;

3. BookCard-Komponente erstellen

import { Card, Button } from "react-bootstrap";

function BookCard({ title, author, imageUrl, description }) {
  return (
    <Card className="mb-4">
      <div className="d-flex">
        <Card.Img
          src={imageUrl || "https://placehold.co/128x192"}
          alt={`Cover of ${title}`}
          style={{ width: "128px", height: "192px", objectFit: "cover" }}
        />
        <Card.Body>
          <Card.Title>{title}</Card.Title>
          <Card.Subtitle className="mb-2 text-muted">
            von {author || "Unbekannter Autor"}
          </Card.Subtitle>
          <Card.Text>
            {description
              ? description.length > 150
                ? description.substring(0, 147) + "..."
                : description
              : "Keine Beschreibung verfügbar."}
          </Card.Text>
          <div className="d-flex gap-2">
            <Button variant="primary">Details</Button>
            <Button variant="outline-danger">🤍</Button>
          </div>
        </Card.Body>
      </div>
    </Card>
  );
}

export default BookCard;

4. BookList-Komponente erstellen

import { Container, Row, Col, Alert } from "react-bootstrap";
import BookCard from "../BookCard/BookCard";

function BookList({ books }) {
  if (!books || books.length === 0) {
    return <Alert variant="info">Keine Bücher gefunden.</Alert>;
  }

  return (
    <Container fluid className="p-0">
      <Row>
        {books.map((book) => (
          <Col key={book.id} xs={12} md={6}>
            <BookCard
              title={book.title}
              author={book.author}
              imageUrl={book.imageUrl}
              description={book.description}
            />
          </Col>
        ))}
      </Row>
    </Container>
  );
}

export default BookList;

5. Komponenten in App.jsx verwenden

import { Container, Row, Col } from "react-bootstrap";
import Header from "./components/Header/Header";
import BookList from "./components/BookList/BookList";

function App() {
  // Beispiel-Bücher (später werden wir diese durch echte API-Daten ersetzen)
  const sampleBooks = [
    {
      id: "1",
      title: "Die unendliche Geschichte",
      author: "Michael Ende",
      imageUrl: "https://placehold.co/128x250",
      description:
        "Ein Junge namens Bastian gerät in eine fantastische Welt, als er ein geheimnisvolles Buch liest.",
    },
    {
      id: "2",
      title: "Harry Potter und der Stein der Weisen",
      author: "J.K. Rowling",
      imageUrl: "https://placehold.co/128x192",
      description:
        "Ein Waisenjunge erfährt, dass er ein Zauberer ist und beginnt sein Abenteuer in Hogwarts.",
    },
    {
      id: "3",
      title: "Der Herr der Ringe",
      author: "J.R.R. Tolkien",
      imageUrl: "https://placehold.co/128x192",
      description:
        "Die epische Geschichte von Frodo Beutlin und seiner Reise, um den Einen Ring zu zerstören.",
    },
  ];

  return (
    <div className="App">
      <Header />
      <Container>
        <Row className="mb-4">
          <Col>
            <h1>Willkommen im Bücher-Projekt</h1>
            <p className="lead">
              Entdecke neue Bücher und verwalte deine Favoriten.
            </p>
          </Col>
        </Row>

        <Row className="mb-3">
          <Col>
            <h2>Empfohlene Bücher</h2>
          </Col>
        </Row>

        <BookList books={sampleBooks} />
      </Container>
    </div>
  );
}

export default App;

Der Vorteil von React-Bootstrap

Mit React-Bootstrap können wir:

Zeit sparen, da viele UI-Komponenten bereits fertig sind
Ein einheitliches, responsives Design ohne viel CSS-Code erreichen
Auf eine Vielzahl von vorgefertigten Komponenten zugreifen, die gängige UI-Elemente abdecken

Weiterführender Schritt: SearchBar mit React-Bootstrap

import { Form, Button, InputGroup } from "react-bootstrap";

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState("");

  return (
    <Form className="mb-4">
      <InputGroup>
        <Form.Control
          type="text"
          placeholder="Suche nach Buchtitel, Autor, ISBN..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <Button type="submit" variant="primary">
          Suchen
        </Button>
      </InputGroup>
    </Form>
  );
}

export default SearchBar;

Füge dann die SearchBar-Komponente in App.jsx ein:

// In App.jsx
import SearchBar from "./components/SearchBar/SearchBar";

// Innerhalb der App-Komponente
const handleSearch = (searchTerm) => {
  console.log("Suche nach:", searchTerm);
  // Später implementieren wir hier die echte Suchfunktion
};

// Im JSX vor der BookList einfügen
<Row className="mb-4">
  <Col>
    <SearchBar onSearch={handleSearch} />
  </Col>
</Row>;

Zusammenfassung

Wir haben React-Bootstrap installiert und eingerichtet
Wir haben eine Header-Komponente mit Navbar erstellt
Wir haben eine BookCard-Komponente für die Darstellung von Büchern implementiert
Wir haben eine BookList-Komponente für die Anzeige mehrerer Bücher erstellt
Wir haben eine SearchBar-Komponente für die Suche hinzugefügt
Alle Komponenten verwenden React-Bootstrap, was uns viel CSS-Code und Styling-Arbeit erspart hat

Mit React-Bootstrap können wir schnell eine ansprechende Benutzeroberfläche erstellen, ohne viel Zeit mit CSS zu verbringen. Die vorgefertigten Komponenten sind leicht zu verwenden und bieten ein konsistentes Design.