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
Abschnitt betitelt „1. React-Bootstrap installieren“Zuerst müssen wir React-Bootstrap sowie React Icons installieren:
npm install react-bootstrap bootstrap react-iconsDann importieren wir das Bootstrap CSS in der main.jsx Datei:
// In src/main.jsx hinzufügenimport "bootstrap/dist/css/bootstrap.min.css";2. Header-Komponente erstellen
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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.jsximport SearchBar from "./components/SearchBar/SearchBar";
// Innerhalb der App-Komponenteconst 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
Abschnitt betitelt „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.
Danke für Ihr Feedback!