React / JSX үндэс

JSX үндэс

JSX бол JavaScript + XML-н товчлол юм. React-д UI-г бичихдээ JavaScript файл дотор HTML-тэй төстэй тэмдэглэгээ ашигладаг — энэ л бол JSX. Эхэндээ сонин харагддаг ч удалгүй хамгийн байгалийн, тохиромжтой арга гэдгийг мэдрэх болно.

JSX яаж ажилладаг вэ?

JSX бол хөтч шууд ойлгодог зүйл биш — Vite үүнийг цэвэр JavaScript болгон хөрвүүлдэг. Жишээ нь:

jsx
// Та ингэж бичнэ (JSX):
function Hello() {
  return <h1>Сайн уу!</h1>;
}

// Vite ингэж хөрвүүлнэ (цэвэр JS):
function Hello() {
  return React.createElement("h1", null, "Сайн уу!");
}

Хоёр код яг адил үр дүн гаргадаг. JSX нь зүгээр л бичихэд илүү тохиромжтой товчилсон хэлбэр юм.

{ } хаалт — JavaScript илэрхийлэл

JSX дотор { } хаалт ашиглан ямар ч JavaScript илэрхийлэл оруулж болно:

jsx
function UserCard() {
  const name = "Болд";
  const age = 25;
  const isStudent = true;

  return (
    <div>
      <h2>{name}</h2>
      <p>Нас: {age}</p>
      <p>Статус: {isStudent ? "Оюутан" : "Ажилтан"}</p>
      <p>5 жилийн дараа: {age + 5}</p>
    </div>
  );
}

{ } дотор string, number, boolean тооцоолол, функц дуудалт, тернар оператор — бүгдийг бичиж болно. Гэхдээ if блок, for давталт шууд бичиж болохгүй — тэдгээрийг хаалтны гадна бичнэ.

JSX-н чухал дүрмүүд

HTML мэддэг хүн JSX бичихэд хэд хэдэн ялгааг анхаарах хэрэгтэй:

jsx
function RulesExample() {
  const imageUrl = "https://example.com/photo.jpg";

  return (
    // 1. Нэг root элемент буюу Fragment шаардлагатай
    <div>
      {/* 2. class → className */}
      <p className="title">Гарчиг</p>

      {/* 3. Хаасан тэг заавал хэрэгтэй */}
      <input type="text" />
      <img src={imageUrl} alt="зураг" />

      {/* 4. for → htmlFor */}
      <label htmlFor="email">И-мэйл:</label>
      <input id="email" type="email" />
    </div>
  );
}

JSX дахь тайлбар бол {/* ингэж бичнэ */} — энгийн HTML-н <!-- --> тайлбараас ялгаатай.

Fragment ашиглах

Нэмэлт <div> үүсгэхгүйгээр хэд хэдэн элемент буцаахдаа Fragment ашиглана:

jsx
import { Fragment } from "react";

function TwoItems() {
  return (
    <Fragment>
      <h2>Гарчиг</h2>
      <p>Тайлбар текст</p>
    </Fragment>
  );
}

// Богино хэлбэр — <>...</> — яг адил ажиллана
function TwoItems() {
  return (
    <>
      <h2>Гарчиг</h2>
      <p>Тайлбар текст</p>
    </>
  );
}

<>...</> богино хэлбэрийг практикт хамгийн их ашигладаг.

Style шинж чанар

JSX-д inline style бичихдээ string биш object ашигладаг:

jsx
function StyledBox() {
  const boxStyle = {
    backgroundColor: "#1e293b",
    padding: "16px",
    borderRadius: "8px",
    color: "#f1f5f9",
  };

  return (
    <div style={boxStyle}>
      <p style={{ fontSize: "18px", fontWeight: "bold" }}>
        Загварчлагдсан текст
      </p>
    </div>
  );
}

CSS property нэрс camelCase болдогийг анхаарна уу — background-color → backgroundColor, font-size → fontSize.

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

Component-г гүнзгийрч судална. Функциональ component бичих, export/import хийх, component-уудыг хооронд нь хэрхэн холбох талаар практикт суралцана.

← Өмнөх хичээлVite + React суулгах ба тохиргооДараах хичээл →Component үндэс