React гэж юу вэ?

React бол Facebook (одоогийн Meta) компаний 2013 онд нийтэд нээсэн JavaScript сан (library) юм. React нь вэб хуудасны хэрэглэгчийн интерфейс (UI) бүтээхэд зориулагдсан бөгөөд өнөөдөр дэлхийн хамгийн өргөн хэрэглэгддэг frontend хэрэгсэл болоод байна. Facebook, Instagram, Airbnb, Netflix, Uber зэрэг компаниуд React ашигладаг.

Яагаад React сурах хэрэгтэй вэ?

Ажлын зах зээл — Frontend хөгжүүлэгчийн ажлын байрны дийлэнх нь React мэдлэг шаарддаг. Монголын IT компаниудад ч ижил хандлага ажиглагдаж байна.

Component систем — React-д UI-г жижиг, дахин ашиглагдах хэсгүүд (component) болгон хуваадаг. Нэг удаа бичсэн товч, карт, маягтыг апп даяар ашиглаж болно.

Хурдан хөгжүүлэлт — Virtual DOM ашиглан зөвхөн өөрчлөгдсөн хэсгийг л шинэчилдэг тул гүйцэтгэл сайн байдаг.

React Native — React мэдсэн хүн React Native ашиглан iOS болон Android апп бас хөгжүүлж чаддаг — нэг мэдлэгээр хоёр платформ.

Component гэж юу вэ?

React-н үндсэн ойлголт бол component юм. Component бол UI-н нэг хэсгийг дүрсэлдэг функц юм. Жишээ нь вэбсайтын navigation bar, товч, профайл карт — бүгд тусдаа component байж болно.

function Greeting() {
  return <h1>Сайн уу, дэлхий!</h1>;
}

Энэ бол хамгийн энгийн React component юм. Функцийн нэр том үсгээр эхэлдэг нь заавал дагаж мөрдөх дүрэм.

JSX гэж юу вэ?

Дээрх кодонд <h1> шиг HTML тэмдэглэгээ JavaScript дотор байгааг анзаарсан байх. Энийг JSX гэнэ — JavaScript болон HTML-н хослол.

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

  return (
    <div>
      <h2>{name}</h2>
      <p>Нас: {age}</p>
    </div>
  );
}

{ } хаалт дотор JavaScript илэрхийлэл бичиж болно. Энэ нь React-н хамгийн чухал онцлогуудын нэг.

Анхны React апп

Vite ашиглан React апп үүсгэх хамгийн хялбар арга:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Хөтчөөр http://localhost:5173 хаягаар орвол анхны React аппаа харна.

src/App.jsx файлыг нээж дараах кодоор солиод хэрхэн ажиллахыг ажиглаарай:

function App() {
  return (
    <div>
      <h1>Миний React апп</h1>
      <p>Энэ бол миний анхны component!</p>
    </div>
  );
}

export default App;

Vanilla JavaScript-тэй харьцуулбал

React-гүйгээр динамик UI бичэхэд их код шаарддаг:

// Vanilla JavaScript
const div = document.createElement("div");
const h1 = document.createElement("h1");
h1.textContent = "Сайн уу";
div.appendChild(h1);
document.body.appendChild(div);

React-тай адил үр дүнг хамаагүй энгийн байдлаар бичнэ:

// React
function Hello() {
  return <div><h1>Сайн уу</h1></div>;
}

Апп томрох тусам React-н давуу тал улам тодорхой харагддаг.

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

Vite ашиглан React проект суулгаж, файлын бүтцийг танилцана. App.jsx, main.jsx файлуудын үүргийг ойлгоно.