რა არის React? მარტივი გზამკვლევი არაპროგრამისტებისთვის

React არის JavaScript ბიბლიოთეკა მომხმარებლის ინტერფეისის ასაშენებლად — აპის იმ ნაწილის, რომელსაც ხალხი ხედავს და აწკაპუნებს. ეკრანებს აწყობთ ხელახლა გამოსაყენებელი ნაწილებისგან, რომლებსაც კომპონენტები ჰქვია — მაგალითად ღილაკი, პროდუქტის ბარათი ან მთელი გვერდი — და React ეკრანს მონაცემებთან სინქრონში ინახავს: როცა მონაცემები იცვლება, React განაახლებს გვერდის იმ ნაწილებს, რომლებიც მას ეყრდნობა. ის Facebook-ში (ახლა Meta) შეიქმნა, ღია კოდისაა და ვებაპების ასაშენებლად ერთ-ერთი ყველაზე ფართოდ გამოყენებადი გზაა.

რატომ არის მნიშვნელოვანი AI-ით აშენებისას

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

AI-ით აშენებისთვის React-ის წერა არ გჭირდებათ. მაგრამ მისი ცოტაოდენი ცოდნა გეხმარებათ:

• ცვლილებების ზუსტად აღწერა. „შეცვალე ProductCard კომპონენტი, რომ ფასი მუქი იყოს“ უფრო ნათელია, ვიდრე „სადმე გამოყავი ფასები“.
• შეცდომების გაგება. შეტყობინებები, როგორიცაა „Cannot read properties of undefined“ ან „Too many re-renders“, უფრო გასაგები ხდება.
• გონივრული არჩევანის გაკეთება. უბრალო React აპები ბრაუზერში რენდერდება, რაც ძიებაში ხილვადობასა და პირველი ჩატვირთვის სიჩქარეზე მოქმედებს. ამის ცოდნა გეხმარებათ, გადაწყვიტოთ, როდის სთხოვოთ სხვა მოწყობა.
• მომავალში დეველოპერებთან მუშაობა. React ხშირი უნარია, ამიტომ დეველოპერს ჩვეულებრივ React-ის კოდბაზის აყვანა შეუძლია.

ყოველდღიური ანალოგია

წარმოიდგინეთ LEGO. მთელი მოდელის ერთი ბლოკიდან გამოთლის ნაცვლად, მას სტანდარტული კუბიკებით აწყობთ. რამდენიმე კუბიკი ბორბალს ქმნის; ოთხი ბორბალი და სხვა ნაწილები მანქანას. თუ გინდათ, რომ ყველა მანქანას წითელი ბორბლები ჰქონდეს, ბორბლის დიზაინს ერთხელ ცვლით.

React-ის კომპონენტები ეს კუბიკებია. Button კომპონენტი გამოიყენება ProductCard-ის შიგნით, რომელიც გამოიყენება ProductGrid-ში, რომელიც ShopPage-ის ნაწილია. შეცვალეთ Button ერთხელ და აპში ყველა ღილაკი შეიცვლება.

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

ძირითადი იდეები

კომპონენტები

კომპონენტი არის JavaScript ფუნქცია, რომელიც ინტერფეისის ნაწილს აბრუნებს. React-ის დოკუმენტაცია კომპონენტს აღწერს როგორც UI-ის ნაწილს, რომელსაც საკუთარი ლოგიკა და იერსახე აქვს. კომპონენტების სახელები დიდი ასოთი იწყება.

JSX

კომპონენტები ჩვეულებრივ JSX-ში იწერება, რომელიც HTML-ს ჰგავს და JavaScript-ში არის ჩართული:

function Greeting() {
  return <h1>კეთილი დაბრუნება!</h1>;
}

JSX არ არის სავალდებულო, მაგრამ React-ის დოკუმენტაცია აღნიშნავს, რომ პროექტების უმეტესობა მას იყენებს. ის ბრაუზერში გაშვებამდე ჩვეულებრივ JavaScript-ად გარდაიქმნება.

Props

Props არის შეყვანები, რომელსაც კომპონენტს გადასცემთ, როგორც ხელახლა გამოსაყენებელი ნაწილის პარამეტრებს:

<ProductCard name="ლავანდის სანთელი" price={24} />

იგივე ProductCard შეიძლება ნებისმიერი პროდუქტი აჩვენოს.

State

State არის ინფორმაცია, რომელსაც კომპონენტი ინახავს და რომელიც აპის მუშაობისას შეიძლება შეიცვალოს — ღია არის თუ არა მენიუ, რა წერია საძიებო ველში, რამდენი ნივთია კალათაში. როცა state იცვლება, React კომპონენტს თავიდან ხატავს, რათა ეკრანი შეესაბამებოდეს.

Hooks

Hooks არის ფუნქციები, რომელთა სახელიც use-ით იწყება, მაგალითად useState (მნიშვნელობის დამახსოვრება) და useEffect (კოდის გაშვება რენდერის შემდეგ, მაგალითად მონაცემების ჩამოსატვირთად). ისინი ყველგან გხვდებათ AI-ით გენერირებულ React კოდში.

სამუშაო მაგალითი: კალათის მთვლელი

ვთქვათ, თქვენს ონლაინ მაღაზიას აქვს ღილაკი „კალათაში დამატება“ და კალათის ხატულა, რომელიც ნივთების რაოდენობას აჩვენებს. React-ში ეს დაახლოებით ასე გამოიყურება:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="ლავანდის სანთელი"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>კალათა ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>კალათაში დამატება</button>
    </div>
  );
}

რა ხდება, როცა მყიდველი დააწკაპუნებს „კალათაში დამატება“-ზე:

1. ღილაკის onClick იძახებს onAdd-ს, რომელიც იძახებს setCartCount-ს.
2. React ანახლებს cartCount state-ს 0-დან 1-მდე.
3. React თავიდან ხატავს Shop-ს და CartIcon-ში გადასცემს count={1}-ს.
4. გვერდზე უკვე წერია „კალათა (1)“. არავის დაუწერია კოდი „იპოვე კალათის ტექსტი და შეცვალე“ — ეკრანი მონაცემებს მიჰყვება.

შეზღუდვებიც გაითვალისწინეთ. ეს მთვლელი ბრაუზერის მეხსიერებაში ცხოვრობს. გვერდის განახლებისას ის ისევ 0-ზე დაბრუნდება. კალათის შესანახად მას რაიმე მდგრად ადგილას უნდა შეინახავდეთ — cookie-ში, ბრაუზერის საცავში, ან მონაცემთა ბაზაში თქვენი ბექენდის მეშვეობით. React ეკრანს მართავს; ის თქვენს მონაცემებს არ ინახავს.

სად ერგება React ვებაპში

„Vite + React“ აპი ბრაუზერში რენდერდება (ერთგვერდიანი აპი). Next.js აპს შეუძლია გვერდები ჯერ სერვერზე დაარენდეროს, რაც საძიებო სისტემებს და პირველი ჩატვირთვის სიჩქარეს ეხმარება.

ძირითადი ტერმინები განმარტებით

გავრცელებული შეცდომები და მცდარი წარმოდგენები

• „React არის პროგრამირების ენა.“ ეს ბიბლიოთეკაა, რომელიც JavaScript-ში (ან TypeScript-ში) იწერება და იქიდან გამოიყენება.
• „React ინახავს ჩემს მონაცემებს.“ State ბრაუზერში ცხოვრობს და გვერდის განახლებისას ქრება. მდგრად მონაცემებს ბექენდი და მონაცემთა ბაზა სჭირდება.
• საიდუმლოებების ჩასმა React კოდში. React აპის ყველაფერი ვიზიტორის ბრაუზერში იგზავნება. იქ ჩაწერილი API გასაღებები საჯაროა. ინახეთ ისინი სერვერზე.
• „React აპებს საძიებო სისტემაში ვერ დაიწევენ.“ მხოლოდ კლიენტის მხარეს რენდერინგი საძიებოსთვის სუსტია, მაგრამ წინასწარი რენდერინგი ან სერვერული რენდერინგი ამის უმეტესობას ასწორებს.
• გიგანტური კომპონენტები. ერთი 1 000-სტრიქონიანი კომპონენტის უსაფრთხოდ შეცვლა რთულია როგორც ადამიანისთვის, ისე AI-სთვის. მოითხოვეთ უფრო პატარა კომპონენტები.
• React ვებაპის მობილურ აპად მიჩნევა. ის ბრაუზერში მუშაობს, მობილურებზეც, მაგრამ App Store-ის აპი არ არის.

რა სთხოვოთ თქვენს AI შემქმნელს

• „დაყავი ეს გვერდი პატარა, დასახელებულ კომპონენტებად და მითხარი, რომელ ფაილშია თითოეული.“
• „გახადე ProductCard კომპონენტი ხელახლა გამოსაყენებელი, სახელით, ფასით და სურათით როგორც props-ით.“
• „შეინახე კალათა მონაცემთა ბაზაში, რომ გვერდის განახლების შემდეგაც შენარჩუნდეს.“
• „ყველა API გასაღები შეინახე სერვერზე; React კოდმა ჩვენს საკუთარ API-ს უნდა დაუძახოს.“
• „დაამატე ჩატვირთვისა და შეცდომის მდგომარეობები სერვერიდან მოსულ მონაცემებზე.“
• „თუ ამ გვერდებზე საძიებო ხილვადობა მნიშვნელოვანია, წინასწარ დარენდერე ისინი ან გამოიყენე სერვერზე რენდერებული მოწყობა.“
• „ჩვეულებრივი ენით აგიხსნა, რას ნიშნავს ეს შეცდომა და რომელი კომპონენტიდან მოდის.“

უფრო ფართო სურათისთვის იხილეთ ფრონტენდი და ბექენდი, ხოლო AI-ს მიერ დაწერილი კოდის გადასამოწმებლად — როგორ გადავხედოთ AI-ით გენერირებულ კოდს.

React Mythex-ში

თუ სხვას არ მოითხოვთ, Mythex ახალ პროექტებს იწყებს Vite + React + TypeScript + Tailwind-ზე, ხოლო ჩატში მუშაობის დროს ცოცხალი გადახედვა მუშაობს. პირველ prompt-ში სხვა მოწყობა შეგიძლიათ დაასახელოთ — მაგალითად „გამოიყენე Next.js“ ან „უბრალო სტატიკური HTML სადესანტო გვერდი“ — და Mythex მას იმის მიხედვით აირჩევს, რაც დაწერეთ; ამისთვის პარამეტრების ეკრანი არ არსებობს. დოკუმენტაციის გვერდი როგორ ირჩევა ტექნოლოგია ვარიანტებს განმარტავს. კოდის რედაქტორი Free გეგმაზე მხოლოდ კითხვადია; Pro-ზე შეგიძლიათ React კოდის პირდაპირ რედაქტირება და პროექტის ექსპორტი, რომ სხვაგან გააგრძელოთ.

კითხვები