1# react-bootstrap o'rnatish
2npm install react-bootstrap bootstrap
3
4# yoki reactstrap
5npm install reactstrap bootstrap

1import "bootstrap/dist/css/bootstrap.min.css";
2import React from "react";
3import ReactDOM from "react-dom/client";
4import App from "./App";
5
6ReactDOM.createRoot(document.getElementById("root")).render(<App />);

1import { Button, Card, Container, Row, Col } from "react-bootstrap";
2
3function App() {
4  return (
5    <Container className="py-4">
6      <Row>
7        <Col md={6}>
8          <Card>
9            <Card.Img variant="top" src="/rasm.jpg" />
10            <Card.Body>
11              <Card.Title>Mahsulot</Card.Title>
12              <Card.Text>
13                Qisqa tavsif shu yerda.
14              </Card.Text>
15              <Button variant="primary">Sotib olish</Button>
16              <Button variant="outline-secondary" className="ms-2">
17                Batafsil
18              </Button>
19            </Card.Body>
20          </Card>
21        </Col>
22      </Row>
23    </Container>
24  );
25}

1import { Button, Card, CardBody, CardTitle, CardText } from "reactstrap";
2
3function App() {
4  return (
5    <Card>
6      <CardBody>
7        <CardTitle tag="h5">Sarlavha</CardTitle>
8        <CardText>Matn</CardText>
9        <Button color="primary">Bosing</Button>
10      </CardBody>
11    </Card>
12  );
13}

1npm install react-toastify

1import { ToastContainer, toast } from "react-toastify";
2import "react-toastify/dist/ReactToastify.css";
3
4function App() {
5  const muvaffaq = () => toast.success("Saqlandi!");
6  const xato = () => toast.error("Xato yuz berdi");
7  const ogohlik = () => toast.warning("Diqqat!");
8  const info = () => toast.info("Ma'lumot");
9
10  return (
11    <div>
12      <button onClick={muvaffaq}>Muvaffaqiyat</button>
13      <button onClick={xato}>Xato</button>
14      <button onClick={ogohlik}>Ogohlantirish</button>
15      <button onClick={info}>Ma'lumot</button>
16
17      {/* ToastContainer — 1 marta, odatda App ildizida */}
18      <ToastContainer
19        position="top-right"
20        autoClose={3000}
21        theme="colored"
22      />
23    </div>
24  );
25}

1npm install react-slick slick-carousel

1import Slider from "react-slick";
2import "slick-carousel/slick/slick.css";
3import "slick-carousel/slick/slick-theme.css";
4
5function Galereya() {
6  const sozlamalar = {
7    dots: true,           // pastdagi nuqtalar
8    infinite: true,       // cheksiz aylanish
9    speed: 500,           // animatsiya tezligi (ms)
10    slidesToShow: 3,      // bir vaqtda ko'rsatiladigan
11    slidesToScroll: 1,    // bir harakatda siljiydigan
12    autoplay: true,
13    autoplaySpeed: 3000,
14    responsive: [
15      { breakpoint: 768, settings: { slidesToShow: 1 } },
16    ],
17  };
18
19  const rasmlar = [
20    "/rasm1.jpg", "/rasm2.jpg", "/rasm3.jpg",
21    "/rasm4.jpg", "/rasm5.jpg",
22  ];
23
24  return (
25    <Slider {...sozlamalar}>
26      {rasmlar.map((src, i) => (
27        <div key={i}>
28          <img src={src} alt={`Slide ${i}`} style={{ width: "100%" }} />
29        </div>
30      ))}
31    </Slider>
32  );
33}

1// React + asosiy stil
2import "./index.css";
3
4// Bootstrap
5import "bootstrap/dist/css/bootstrap.min.css";
6
7// React Toastify
8import "react-toastify/dist/ReactToastify.css";
9
10// React Slick (2 ta fayl)
11import "slick-carousel/slick/slick.css";
12import "slick-carousel/slick/slick-theme.css";
13
14import React from "react";
15import ReactDOM from "react-dom/client";
16import App from "./App";
17
18ReactDOM.createRoot(document.getElementById("root")).render(<App />);