Web განვითარება - საშუალო დონე: React.js და თანამედროვე ინტერფეისები

1. React-ის საფუძვლები და JSX

მოგესალმებით, React.js-ის საშუალო დონის კურსის პირველ ლექციაზე. ამ გაკვეთილში ჩვენ განვიხილავთ React-ის არქიტექტურულ თავისებურებებს, ვირტუალურ DOM-ს და JSX-ს, როგორც ინტერფეისის აგების მთავარ ინსტრუმენტს.

რა არის React.js?

React არის JavaScript ბიბლიოთეკა, რომელიც განკუთვნილია ინტერფეისების (UI) შესაქმნელად. მისი მთავარი მიზანია დეკლარატიული მიდგომით, კომპონენტებზე დაფუძნებული სტრუქტურის შექმნა. React-ის ოფიციალური დოკუმენტაცია შეგიძლიათ იხილოთ react.dev საიტზე.

ვირტუალური DOM (Virtual DOM)

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

1. ქმნის ვირტუალური DOM-ის ახალ ხეს.
2. ადარებს ახალ ხეს ძველს (Diffing algorithm).
3. ცვლილებებს ასახავს მხოლოდ იმ ელემენტებზე, რომლებიც რეალურად შეიცვალა.

JSX: JavaScript XML

JSX არის JavaScript-ის სინტაქსური გაფართოება, რომელიც საშუალებას გვაძლევს დავწეროთ HTML-ის მსგავსი კოდი უშუალოდ JavaScript ფაილებში. ეს კოდი მოგვიანებით ტრანსპილირდება React.createElement() ფუნქციებად.

const element = <h1>გამარჯობა, მსოფლიო!</h1>;

შედარება: ჩვეულებრივი DOM vs Virtual DOM

კომპონენტების აგება

React-ში ყველაფერი კომპონენტია. კომპონენტი არის ფუნქცია, რომელიც აბრუნებს JSX-ს. მაგალითად:

function Welcome(props) { return <h1>მოგესალმებით, {props.name}</h1>; }

React-ის ძალა მდგომარეობს იმაში, რომ ის აერთიანებს ინტერფეისის ლოგიკასა და ვიზუალურ ნაწილს ერთ ლოგიკურ ერთეულში - კომპონენტში.

დამატებითი ინფორმაციისთვის კომპონენტების შესახებ, ეწვიეთ MDN Web Docs რესურსს, სადაც დეტალურადაა აღწერილი React-ის დაწყების პრინციპები.