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 арқылы жазылады, ол JavaScript ішіне араласқан HTML сияқты көрінеді:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX міндетті емес, бірақ React құжаттамасында көп жобалар оны қолданады деп айтылған. Ол браузерде іске қосылмас бұрын қарапайым JavaScript-ке түрлендіріледі.

Props

Props — компонентке берілетін кірістер, қайта қолданылатын бөлікке берілетін баптаулар сияқты:

<ProductCard name="Lavender Candle" 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="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Сатып алушы «Себетке қосу» түймесін басқанда не болады:

1. Түйменің onClick функциясы onAdd шақырады, ол setCartCount шақырады.
2. React cartCount state-ін 0-ден 1-ге жаңартады.
3. React Shop-ты қайта рендерлейді, CartIcon-ға count={1} береді.
4. Бетте енді «Cart (1)» көрінеді. «Себеттегі мәтінді табып өзгерт» деп ешкім код жазбады — экран деректерге ілеседі.

Шектеулерін де байқаңыз. Бұл санақ браузердің жадында тұрады. Бетті жаңартсаңыз, ол қайтадан 0 болады. Себетті сақтау үшін оны ұзақ сақталатын жерге — cookie, браузер қоймасына немесе backend арқылы дерекқорға сақтау керек. React экранды басқарады, деректеріңізді сақтамайды.

React веб-қолданбада қай жерде орналасады

«Vite + React» қолданбасы браузерде рендерленеді (бір беттік қолданба). Next.js қолданбасы беттерді алдымен серверде рендерлей алады, бұл іздеу жүйелеріне және алғашқы жүктелу жылдамдығына көмектеседі.

Жалпы терминдер

Жиі кездесетін қателер мен түсініспеушіліктер

• «React — бағдарламалау тілі». Ол JavaScript (немесе TypeScript) ішінде жазылған және сол тілден пайдаланылатын кітапхана.
• «React деректерімді сақтайды». State браузерде тұрады және жаңартқанда жоғалады. Ұзақ сақталатын деректерге backend және дерекқор керек.
• Құпияларды React кодына салу. React қолданбасындағы барлық нәрсе келушінің браузеріне жіберіледі. Ондағы API кілттері жария болады. Оларды серверде сақтаңыз.
• «React қолданбалар іздеуде көрінбейді». Тек клиенттік рендерлеу іздеуге әлсіз, бірақ алдын ала рендерлеу немесе серверде рендерлеу көбін түзетеді.
• Алып компоненттер. Бір 1 000 жолдық компонентті адамдар да, AI да қауіпсіз өзгерту қиын. Кішірек компоненттерді сұраңыз.
• React веб-қолданбасы — телефон қолданбасы деп ойлау. Ол браузерде жұмыс істейді, телефондарда да, бірақ App Store қолданбасы емес.

AI құрастырғыштан не сұрау керек

• «Бұл бетті шағын, аталған компоненттерге бөл, әр компонент қай файлда екенін айт.»
• «ProductCard компонентін қайта қолданылатын ет, name, price және image props ретінде болсын.»
• «Себетті дерекқорға сақта, сонда бетті жаңартқан соң да сақталады.»
• «Барлық API кілттерін серверде сақта; React коды өз API-мізді шақырсын.»
• «Серверден келетін деректер үшін жүктеу және қате күйлерін қос.»
• «Осы беттерде іздеудегі көрінуі маңызды болса, оларды алдын ала рендерлеңіз немесе серверде рендерленген орнатуды қолданыңыз.»
• «Бұл қатенің не екенін қарапайым тілмен түсіндіріп бер және ол қай компоненттен шыққанын айт.»

Үлкенірек суретті frontend мен backend бетінен, ал AI жазған кодты тексеруді AI жазған кодты қалай тексеру керек бетінен қараңыз.

React Mythex-те

Басқа нәрсе сұрамасаңыз, Mythex жаңа жобаларды Vite + React + TypeScript + Tailwind негізінде бастайды, ал сөйлесу кезінде тірі алдын ала қарау жұмыс істейді. Бірінші сұранысыңызда басқа орнатуды атай аласыз — мысалы «Next.js қолдан» немесе «қарапайым статикалық HTML лендинг беті» — және Mythex оны жазғаныңыздан таңдайды; ол үшін баптаулар экраны жоқ. Технологияның қалай таңдалатыны туралы шаблондар құжатында түсіндірілген. Free тарифінде код редакторы тек оқуға арналған; Pro тарифінде React кодын тікелей өңдеуге және жобаны басқа жерде жалғастыру үшін экспорттауға болады.

Сұрақтар