რატომ React?

პრობლემა — გვერდი, რომელიც ცოცხალია

წარმოიდგინე ფასდაკლების კალკულატორი. ფასი — 100 ₾. დააწკაპუნე ღილაკზე „10% ფასდაკლება" და გვერდმა უნდა:

• ფასი გადათვალოს და გამოაჩინოს ახალი ციფრი
• გამოაჩინოს მცირე ნიშანი „−10%"
• ფასი გადააფერადოს (ნაცრისფერი → მწვანე)
• ღილაკი გათიშოს, რომ ორჯერ არ დააწკაპუნო

ვცადოთ vanilla JavaScript-ით:

const button = document.getElementById('discount-btn');
const priceEl = document.getElementById('price');
const labelEl = document.getElementById('label');
let price = 100;

button.addEventListener('click', () => {
  const newPrice = price * 0.9;
  priceEl.textContent = newPrice + ' ₾';
  priceEl.classList.remove('text-zinc-500');
  priceEl.classList.add('text-brand-700');
  labelEl.textContent = '−10%';
  labelEl.classList.remove('hidden');
  button.disabled = true;
});

ცხრა ხაზი — ერთი ღილაკისთვის. დაამატე „ფასდაკლების მოშლა" და ყველაფერი უკან გადააბრუნე. დაამატე მეორე ფასდაკლება („20%") და სამი ცვლადი სამ ადგილას შეცვალე. ხუთი ღილაკის შემდეგ კოდი ვერ წაიკითხავ.

ეს არის იმპერატიული მართვა — ბრძანებები DOM-ისთვის, ნაბიჯ-ნაბიჯ.

გადასვლა — აღწერე, არ უბრძანო

React-ის ცენტრალური იდეა ერთი წინადადებაა: არ უთხრა გვერდს, რა გააკეთოს. აღწერე, რა უნდა იყოს.

იგივე კალკულატორი React-ით:

function Calculator() {
  const [discount, setDiscount] = useState(0);
  const price = 100;
  const final = price * (1 - discount / 100);

  return (
    <div>
      <h1 className={discount ? 'text-brand-700' : 'text-zinc-500'}>
        {final} ₾
      </h1>
      {discount > 0 && <p>−{discount}%</p>}
      <button onClick={() => setDiscount(10)} disabled={discount > 0}>
        10% ფასდაკლება
      </button>
    </div>
  );
}

კოდი აღწერს რა უნდა იყოს გვერდზე ნებისმიერი მდგომარეობისთვის — discount = 0, 10, 20, 50. React-ი თვითონ წყვეტს, რა შეცვალოს DOM-ში. ჩვენი მუშაობა გახდა მდგომარეობის აღწერა, არა DOM-ის მართვა.

მექანიზმი — Virtual DOM

React-ი არ ცვლის DOM-ს პირდაპირ. ნაცვლად:

1. ინახავს გვერდის „ვირტუალურ ასლს" — მსუბუქი JavaScript-ის ხის ფორმით
2. როცა setDiscount(10) დაიძახე — React ააწყობს ახალ ვირტუალურ ხეს ისე, როგორც გვერდი უნდა გამოიყურებოდეს
3. შეადარებს ძველ და ახალ ხეებს (diff)
4. მხოლოდ რეალურ ცვლილებას ატარებს ნამდვილ DOM-ში

შედეგი: სრულდება ზუსტად ის, რაც აუცილებელია. დანარჩენი არ ეხება. ეს არის React-ის სიჩქარის საფუძველი.

სად მუშაობს React

Facebook, Instagram, WhatsApp Web (Meta-მ React 2013-ში თვითონ შექმნა), Netflix-ის ფლეიერი, Airbnb, Uber, Dropbox, Discord, Vercel.

საქართველოში: TBC-ის ფრონტენდი, EVEX, Theneo, Pulsar AI, Adjarabet — ყველა React-ით. ფრონტენდის ვაკანსიების 65–70% React-ის ცოდნას ითხოვს (Stack Overflow Developer Survey 2024). საშუალო ხელფასი React-ის დეველოპერისთვის თბილისში: 3,500–6,000 ₾.

ამ გაკვეთილის შემდეგ უნდა შეგეძლოს

• ერთი წინადადებით ახსნა — რა განსხვავებაა იმპერატიულ და დეკლარაციულ მართვას შორის
• ახსნა — რა არის Virtual DOM და რა პრობლემას წყვეტს
• გრძნობდე, რა იქნება „state" კომპონენტისთვის (მომდევნო გაკვეთილებზე ღრმად)

სავარჯიშო

ააწყე ფასდაკლების კალკულატორი ორ ვერსიად, ერთ HTML ფაილში:

1. vanilla JS-ით — ერთი ღილაკი, რომელიც 100 ₾ → 90 ₾ გადააქცევს
2. ფურცელზე — დახატე იგივე ლოგიკა „თუ X → მაშინ Y" ფორმით

შემდეგ შეადარე ეს ორი ვერსია მაღლა ნაჩვენებ React-ის ვერსიასთან. რომელი იკითხება უფრო ცხადად? რომელი გაიზრდება ადვილად, თუ დაამატე მეორე ფასდაკლება?

შემდეგ გაკვეთილზე: დავაყენებთ React-ის პროექტს ერთი ბრძანებით (Vite-ით) და გვექნება მცირე, მუშა აპლიკაცია.