Component үндэс

React-н хамгийн гол ойлголт бол component юм. Component гэдэг нь UI-н нэг хэсгийг дүрсэлдэг, дахин ашиглагдах функц юм. Том вэбсайт нь олон арван, заримдаа зуу гаруй component-оос тогтдог. Тус бүрт нь өөрийн дүр төрх, логик байдаг. Энэ хичээлд component бичих, ашиглах, зохион байгуулах үндсийг сурна.

Функциональ Component бичих

React component бол нэрээ том үсгээр эхэлдэг, JSX буцаадаг энгийн функц юм:

// Button.jsx
function Button() {
  return <button className="btn">Дарна уу</button>;
}

export default Button;

Нэрийг заавал том үсгээр эхлүүлнэ — Button, UserCard, NavBar гэх мэт. Жижиг үсгээр эхэлвэл React үүнийг component биш HTML элемент гэж ойлгодог.

Export ба Import

Component-г бусад файлд ашиглахын тулд export хийж, ашиглах газраа import хийнэ:

// components/Greeting.jsx
function Greeting() {
  return <h2>Тавтай морил!</h2>;
}

export default Greeting;

// App.jsx
import Greeting from "./components/Greeting";

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

export default App;

<Greeting /> гэж бичснээр тухайн component-г рендер хийнэ. Нэг component-г хэдэн удаа ч дахин ашиглаж болно — энэ бол React-н хамгийн хүчирхэг тал.

Component-уудыг хооронд нь байрлуулах

Component дотор өөр component-уудыг байрлуулж болно. Энийг composition буюу нэгтгэл гэнэ:

function Avatar() {
  return <img src="https://i.pravatar.cc/80" alt="профайл" />;
}

function Username() {
  return <span>@bold_dev</span>;
}

function UserCard() {
  return (
    <div className="card">
      <Avatar />
      <Username />
      <p>Монголын хөгжүүлэгч</p>
    </div>
  );
}

function App() {
  return (
    <main>
      <UserCard />
      <UserCard />
    </main>
  );
}

App → UserCard → Avatar, Username гэсэн component мод (component tree) бий болж байна. React нь энэ модыг дээрээс доош рендер хийдэг.

Файлын зохион байгуулалт

Практикт component бүрийг тусдаа файлд байрлуулах нь код уншихад хялбар болгодог:

src/
├── components/
│   ├── Button.jsx
│   ├── Avatar.jsx
│   ├── UserCard.jsx
│   └── Navbar.jsx
├── App.jsx
└── main.jsx

// components/Navbar.jsx
import Button from "./Button";

function Navbar() {
  return (
    <nav className="navbar">
      <span className="logo">MyApp</span>
      <Button />
    </nav>
  );
}

export default Navbar;

Нэг файлд хэт олон component шахах хэрэггүй — тус бүрийг тусад нь файлд байлга.

Named Export ба Default Export

Default export-оос гадна named export ч байдаг:

// utils/components.jsx — named export
export function Title({ text }) {
  return <h1>{text}</h1>;
}

export function Subtitle({ text }) {
  return <h2>{text}</h2>;
}

// App.jsx — named import
import { Title, Subtitle } from "./utils/components";

function App() {
  return (
    <>
      <Title text="Үндсэн гарчиг" />
      <Subtitle text="Дэд гарчиг" />
    </>
  );
}

Нэг файлаас зөвхөн нэг default export гарч болох ч named export хэд ч байж болно.

Дараагийн хичээлд:

Props буюу component руу өгөгдөл дамжуулах аргыг судална. Props ашиглан нэг component-г өөр өөр агуулгатайгаар ашиглаж сурна.