#03bootstrapreact_przyklad

Opis Bootstrapa można używać też w React. Najłatwiej wkleić import w main.jsx albo App.jsx.

#Instalacja

BASHcopynpm install bootstrap

#Import w main.jsx

REACTcopyimport React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

#App.jsx

REACTcopyfunction App() {
  const produkty = [
    { id: 1, nazwa: "Myszka", cena: 50 },
    { id: 2, nazwa: "Klawiatura", cena: 120 },
    { id: 3, nazwa: "Monitor", cena: 700 }
  ];

  return (
    <div className="container mt-4">
      <h1 className="text-primary mb-3">Produkty</h1>

      <div className="row">
        {produkty.map((produkt) => (
          <div className="col-md-4 mb-3" key={produkt.id}>
            <div className="card">
              <div className="card-body">
                <h5 className="card-title">{produkt.nazwa}</h5>
                <p className="card-text">Cena: {produkt.cena} zł</p>
                <button className="btn btn-primary">Kup</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;