Waa maxay React? Hage cad oo loogu talagalay kuwa aan horumariyeyn

React waa maktabad JavaScript ah oo loogu talagalay dhismaha interface-yada — qaybta app-ka dadku arkaan oo riixaan. Waxaad ka dhisaysaa shaashadaha qaybo dib loo isticmaali karo oo loo yaqaan components, sida badhan, kaarka alaabta ama bog oo dhan, React waxa uu shaashadda la socodsiiyaa xogtaada: markii xogtu isbeddesho, React wuxuu cusbooneysiiyaa qaybaha bogga ku xiran xogtaas. Waxa uu ka soo jeedaa Facebook (hadda Meta), waa open source, waana mid ka mid ah siyaabaha ugu badan lagu dhiso app-yada websaydhka.

Sababta ay muhiim u tahay markaad AI wax dhisayso

Haddii aad app websaydh ah ku dhisto qalab AI ah, waxa suurtagal ah in lagu qoro React. Qalabyo badan oo dhisida AI-ga ah ayaa React u isticmaala default, sababtoo ah waa caan, dokumentiyadiisu waa fiican yihiin, oo waxa jira koodh React oo aad u badan oo moodelada AI ay ka baratay.

Ma u baahnid inaad React qorto si aad AI ula dhisto. Laakiin wax yar oo ka mid ah aqoontiisa ayaa kaa caawin doona:

• Isbeddelada si cad u sharax. "Ka dhig qiimaha bold ee ProductCard component-ka" ayaa ka cadaysan "ka dhig qiimayaasha si ay u soo muuqdaan meel" oo guud.
• Khaladaadka fahan. Fariimo sida "Cannot read properties of undefined" ama "Too many re-renders" way macno badan yeelanayaan.
• Go'aanno macquul ah qaado. App-yada React ee caadiga ah browser-ka ayay sawiraan, taas oo saameysa aragtida search-ka iyo xawaaraha furitaanka markii ugu horreeya. Taas oo aad ogaato wuxuu kaa caawinayaa inaad go'aan ka gaarto goorta aad ku weydiisato habayn kale.
• Horumariyeyaasha mustaqbalka la shaqee. React waa xirfad caadi ah, sidaas darteed horumariye ayaa inta badan si fudud u qaadan kara codebase React ah.

Tusaale maalin kasta

Ka fikir LEGO. Halkii aad hal block ka xardhi lahayd model oo dhan, waxaad ka dhisaysaa dhismayaasha caadiga ah. Hal dhiso wuxuu sameeyaa bushimo; afar bushimo iyo qaybo kale waxay sameeyaan gaari. Haddii aad rabto gaari kasta inuu leeyahay bushimo casaan ah, naqshadda bushimaha mar keliya ayaad beddeshaa.

Components-ka React waa dhismayaasha. Component-ka Button waxa lagu isticmaalaa gudaha ProductCard, kaas oo lagu isticmaalo ProductGrid, kaas oo qayb ka ah ShopPage. Button hal mar beddel, badhanka kasta oo app-ka ku jira ayaa isbeddelaya.

Qaybta kale ee tusaalaha: ka fikir in model-ka LEGO uu dib u dhisto isagu markii aad tilmaamaha beddeshid. Taasi waa hilibka kale ee React — waxaad sharaxdaa sida shaashaddu u ahaan lahayd xogta hadda jirta, React wuxuu go'aaminayaa waxa bogga lagu beddelayo.

Fikradaha ugu muhiimsan

Components

Component waa function JavaScript ah oo soo celiya qayb interface ah. Dokumentiyada React waxay component ku qeexaan inuu yahay qayb UI ah oo leh macquulkiisa iyo muuqaalkiisa. Magacyada components waxay ku bilaabmaan xarf weyn.

JSX

Components-ka badanaa waxa lagu qoraa JSX, taas oo la mid ah HTML oo lagu daray JavaScript:

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

JSX waa ikhtiyaari, laakiin dokumentiyada React waxay sheegaan inuu mashruucyada badankood isticmaalo. Waa la beddelaa JavaScript caadi ah ka hor intaan browser-ku socodsiin.

Props

Props waa gelinta aad u gudbiso component-ka, sida dejinta qayb dib loo isticmaali karo:

<ProductCard name="Lavender Candle" price={24} />

Isla ProductCard wuxuu tusi karaa alaab kasta.

State

State waa macluumaad component-ku xasuusto oo isbedeli kara intii app-ku shaqeynayo — menu-gu furan yahay mise, maxaa lagu qoray sanduuqa raadinta, immisa shay ayaa gaariga ku jira. Markii state isbeddesho, React dib ayuu u sawiraa component-ka si shaashaddu u waafaqdo.

Hooks

Hooks waa functions magacyadoodu ku bilaabmaan use, sida useState (xusuuso qiime) iyo useEffect (socodsii koodh kadib sawirka, tusaale ahaan si xogta loo soo qaado). Waxaad ku arki doontaa meel kasta koodka React ee AI-gu abuuray.

Tusaale shaqeeya: tiradaha gaariga

Ka soo qaad dukaankaaga online-ka ah wuxuu leeyahay badhan "Ku dar gaariga" iyo calaamad gaari oo muujinaysa tirada alaabta. React-ku wuxuu u eg yahay sidan:

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>
  );
}

Waxa dhaca marka macaamil uu riixo "Ku dar gaariga":

1. Badhanka onClick wuxuu wicayaa onAdd, kaas oo wicaya setCartCount.
2. React wuxuu cusbooneysiiyaa state-ka cartCount oo ka 0 ilaa 1.
3. React wuxuu dib u sawiraa Shop, isagoo count={1} u gudbinaya CartIcon.
4. Bogga hadda wuxuu muujinayaa "Cart (1)". Ma jirto qof code qoray oo leh "raadi qoraalka gaariga oo beddel" — shaashaddu waxay raacaysaa xogta.

Xadadka ayaa sidoo kale muuqda. Tiradan waxay ku nooshahay xusuusta browser-ka. Bogga markaad dib u soo rogto, wuxuu dib ugu noqonayaa 0. Si aad gaarigu u sii haysato, waa in aad kaydisaa meel joogto ah — cookie, browser storage, ama database adigoo marinaya backend. React wuxuu maamulaa shaashadda; ma kaydiyo xogtaada.

Meesha React ku jirto app-ka websaydhka

App "Vite + React" wuxuu ku sawiraa browser-ka (single-page app). App Next.js ah wuxuu bogagga ku sawiri karaa server-ka marka hore, taas oo caawiso search engines-ka iyo xawaaraha furitaanka markii ugu horreeya.

Erayada caadiga ah oo la sharaxay

Khaladaadka caadiga ah iyo fikradaha qaldan

• "React waa luuqad barnaamij." Waa maktabad lagu qoro oo laga isticmaalo JavaScript (ama TypeScript).
• "React wuxuu kaydiyaa xogtayda." State-ku wuxuu ku nool yahay browser-ka wuuna baabi'iyaa markii bogga dib loo soo rogo. Xogta joogtada ah waxay u baahan tahay backend iyo database.
• In sirta lagu dhejiyo koodhka React. Wax walba oo app React ah ayaa loo diraa browser-ka booqdaha. Furayaasha API-ga halkaas ku jira waa kuwo dadweyne ah. Ku hay server-ka.
• "App-yada React ma kala hore karaan search-ka." Client-only rendering wuu liito search-ka, laakiin prerendering ama server rendering wuxuu xalliyaa inta badan.
• Components-ka waaweyn. Component 1,000 sadar ah waa adag tahay in dadku iyo AI-gu si ammaan ah u beddelaan. Weydii kuwa yaryar.
• In la moodo in websaydhka React uu yahay app telefoon. Wuxuu ku shaqeeyaa browser-ka, oo ay ku jiraan telefoonada, laakiin ma aha app App Store-ka.

Waxa aad ka codsan karto dhisaha AI-gaaga

• "Bogga kala jebi components yaryar oo la magacaabay, oo ii sheeg faylka kasta ku jiro."
• "Ka dhig ProductCard component dib loo isticmaali karo, oo leh name, price iyo image props ahaan."
• "Keydi gaariga database-ka si uu u badbaadiyo markii bogga dib loo soo rogo."
• "Furayaasha API-ga oo dhan server-ka ku hay; koodhka React waa inuu u yeero API-keena."
• "Ku dar xaaladaha loading iyo error xogta ka timaadda server-ka."
• "Haddii muhiim tahay in bogagan search-ka laga arko, prerender samee ama isticmaal dejin server-rendered ah."
• "Si Ingiriisi fudud ii sharax khaladkan macnihiisa iyo component-ka uu ka yimid."

Aragti ballaaran, eeg frontend iyo backend, iyo koodhka AI-gu qoray si loo eego, sida loo dib u eegi karo koodhka AI-gu soo saaray.

React gudaha Mythex

Haddii aadan weydiin wax kale, Mythex wuxuu mashruucyada cusub ku bilaabaa Vite + React + TypeScript + Tailwind, oo preview toos ah ayaa socda intaad chat-ka samaynayso. Waxaad magacaabi kartaa dejin kale prompt-kaaga ugu horreeya — tusaale ahaan "Isticmaal Next.js" ama "bog HTML static ah oo fudud" — Mythex wuxuu ka dooranayaa waxa aad qortay; ma jiro shaashad dejin oo gaar ah. Bogga docs-ka ee sida tignoolajiyada loo doortay wuxuu sharaxayaa ikhtiyaarrada. Tafatiraha koodhka Free wuu akhriska oo keliya yahay; Pro-na waxaad si toos ah u tafatiri kartaa koodhka React-ka oo waxaad mashruuca u dhoofin kartaa si aad uga sii shaqaysid meel kale.

Su'aalaha