React ምንድን ነው? ለኮድ ጸሐፊ ላልሆኑ ሰዎች ቀላል ማብራሪያ

React የተጠቃሚ በይነገጽ ለመገንባት የJavaScript ቤተ-መጽሐፍት ነው — የሰዎች የሚያዩትና የሚጫኑት የመተግበሪያው ክፍል። ማያ ገጾችን ከእንደ ቁልፍ፣ የምርት ካርድ ወይም ሙሉ ገጽ ካሉ ተደጋጋሚ ክፍሎች ይገነባሉ፤ 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 በገጹ ላይ ምን መቀየር እንዳለበት ይሠራል።

ዋና ሐሳቦች

ክፍሎች (Components)

ክፍል የበይነገጽ ክፍልን የሚመልስ 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 ን ከ0 ወደ 1 ያዘምናል።
3. React Shopን እንደገና ይሥላል፤ ለCartIcon count={1} ያስተላልፋል።
4. ገጹ አሁን «Cart (1)» ያሳያል። «የቅርጫት ጽሑፉን ፈልግና ቀይረው» የሚል ኮድ ማንም አልጻፈም — ማያ ገጹ መረጃውን ይከተላል።

ገደቦቹንም ልብ ይበሉ። ይህ ቆጣሪ በአሳሹ ማህደረ ትውስታ ውስጥ ይኖራል። ገጹን ካደሱ ወደ 0 ይመለሳል። ቅርጫት ለማቆየት የሚቆይ ቦታ ላይ ማስቀመጥ ያስፈልግዎታል — ኩኪ፣ የአሳሽ ማከማቻ፣ ወይም በ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 vs backend ይመልከቱ፤ AI የጻፈውን ለመገምገም ደግሞ AI የጻፈውን ኮድ እንዴት መገምገም እንደሚቻል።

React በMythex

የሆነ ሌላ ነገር ካልጠየቁ በስተቀር Mythex አዳዲስ ፕሮጀክቶችን በVite + React + TypeScript + Tailwind ይጀምራል፤ ቻት በሚያደርጉበት ጊዜ የቀጥታ ቅድመ-እይታ ይሠራል። በመጀመሪያ prompt ውስጥ ሌላ ዝግጅት መጥቀስ ይችላሉ — ለምሳሌ «Next.js ተጠቀም» ወይም «ቀላል የስታቲክ HTML ማረፊያ ገጽ» — Mythex ከጻፉት ይመርጠዋል፤ ለዚህ የቅንብር ገጽ የለም። ቴክኖሎጂው እንዴት እንደሚመረጥ የሰነድ ገጽ አማራጮቹን ያብራራል። የኮድ አርታኢው በFree ዕቅድ ላይ ለማንበብ ብቻ ነው፤ በPro ላይ የReact ኮዱን በቀጥታ ማርትዕና ፕሮጀክቱን ወደ ሌላ ቦታ ለመቀጠል ማውጣት ይችላሉ።

ጥያቄዎች