Ի՞նչ է 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-ը՝ count={1} փոխանցելով CartIcon-ին։
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 կոդը և արտահանել նախագիծը՝ աշխատանքը շարունակելու համար այլուր։

Հարցեր