Ano ang React? Gabay sa Simpleng Wika para sa Hindi Developer

Ang React ay JavaScript library para gumawa ng user interface — ang bahagi ng app na nakikita at kinli-click ng mga tao. Bumubuo ka ng mga screen mula sa mga reusable na piraso na tinatawag na component, gaya ng button, product card, o buong pahina, at pinapanatiling magkasabay ng React ang screen at ang data: kapag nagbago ang data, ina-update ng React ang mga bahagi ng pahina na nakadepende rito. Nilikha ito sa Facebook (ngayon ay Meta), open source, at isa sa pinakamalawak na ginagamit na paraan ng paggawa ng web app.

Bakit mahalaga ito kapag gumagawa ka gamit ang AI

Kung gumagawa ka ng web app gamit ang AI tool, malaki ang tsansang nakasulat ito sa React. Maraming AI app builder ang default na gumagamit ng React, dahil sikat ito, maayos ang dokumentasyon, at napakaraming React code na natutunan ng mga AI model.

Hindi mo kailangang magsulat ng React para makagawa gamit ang AI. Pero ang kaunting kaalaman ay nakakatulong sa iyo na:

• Ilarawan nang tiyak ang mga pagbabago. Mas malinaw ang "Palitan ang ProductCard component para bold ang presyo" kaysa sa "gawing kapansin-pansin ang mga presyo kung saan-saan".
• Maunawaan ang mga error. Mas may saysay ang mga mensaheng gaya ng "Cannot read properties of undefined" o "Too many re-renders".
• Gumawa ng matatalinong pagpili. Ang simpleng React app ay nire-render sa browser, at nakakaapekto ito sa kakayahang makita sa search at sa bilis ng unang pag-load. Ang pag-alam nito ay tumutulong sa iyong magpasya kung kailan hihingi ng ibang setup.
• Makatrabaho ang mga developer sa hinaharap. Karaniwang skill ang React, kaya kayang kunin ng developer ang isang React codebase nang mabilis.

Pang-araw-araw na paghahalintulad

Isipin ang LEGO. Sa halip na ukit-ukitin ang buong modelo mula sa iisang bloke, binubuo mo ito mula sa mga karaniwang brick. Ilang brick ang bumubuo ng gulong; apat na gulong at ilang iba pang piyesa ay bumubuo ng kotse. Kung gusto mong may pulang gulong ang bawat kotse, babaguhin mo lang ang disenyo ng gulong nang isang beses.

Ang mga component ng React ay ang mga brick. Ang Button component ay ginagamit sa loob ng ProductCard, na ginagamit sa loob ng ProductGrid, na bahagi ng ShopPage. Baguhin mo nang isang beses ang Button, at magbabago ang bawat button sa app.

Ang kabilang kalahati ng paghahalintulad: isipin na nagre-rebuild ang LEGO model sa sarili nito tuwing babaguhin mo ang instruksyon. Iyan ang pangalawang trick ng React — inilalarawan mo kung ano dapat ang itsura ng screen para sa kasalukuyang data, at kinakalkula ng React kung ano ang dapat baguhin sa pahina.

Ang mga pangunahing ideya

Components

Ang component ay JavaScript function na nagbabalik ng piraso ng interface. Inilalarawan ng dokumentasyon ng React ang component bilang bahagi ng UI na may sariling lohika at itsura. Nagsisimula ang pangalan ng component sa malaking titik.

JSX

Kadalasang isinusulat ang mga component sa JSX, na mukhang HTML na hinalo sa JavaScript:

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

Opsyonal ang JSX, pero sabi ng dokumentasyon ng React, karamihan ng proyekto ay gumagamit nito. Kino-convert ito sa plain JavaScript bago tumakbo sa browser.

Props

Ang props ay mga input na ipinapasa mo sa component, gaya ng mga setting sa isang reusable na piyesa:

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

Ang parehong ProductCard ay kayang magpakita ng anumang produkto.

State

Ang state ay impormasyong naaalala ng component na maaaring magbago habang tumatakbo ang app — kung bukas ang menu, ano ang tinype sa search box, ilang item ang nasa cart. Kapag nagbago ang state, nire-render muli ng React ang component para tumugma ang screen.

Hooks

Ang hooks ay mga function na nagsisimula sa use, gaya ng useState (naaalala ang isang value) at useEffect (nagpapatakbo ng code pagkatapos ng render, halimbawa para mag-fetch ng data). Makikita mo ang mga ito sa buong AI-generated React code.

Halimbawang gawa: isang cart counter

Ipagpalagay na may "Add to cart" button ang online shop mo at isang cart icon na nagpapakita ng bilang ng item. Sa React, ganito ito halos:

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

Ang nangyayari kapag na-click ng shopper ang "Add to cart":

1. Tinatawag ng onClick ng button ang onAdd, na tumatawag sa setCartCount.
2. In-update ng React ang cartCount state mula 0 patungong 1.
3. Nire-render muli ng React ang Shop, ipinapasa ang count={1} sa CartIcon.
4. Ipinapakita na ng pahina ang "Cart (1)". Walang nagsulat ng code na nagsasabing "hanapin ang cart text at palitan" — sumusunod ang screen sa data.

Tandaan din ang mga limitasyon. Nasa memory ng browser ang bilang na ito. Kapag nag-refresh ang pahina, babalik ito sa 0. Para mapanatili ang cart, kailangan mo itong i-save sa isang lugar na tatagal — isang cookie, browser storage, o isang database sa pamamagitan ng iyong backend. Ang React ang humahawak sa screen; hindi nito iniimbak ang data mo.

Saan nababagay ang React sa isang web app

Ang app na "Vite + React" ay nire-render sa browser (isang single-page app). Ang Next.js app ay maaaring mag-render muna ng mga pahina sa server, na nakakatulong sa mga search engine at sa bilis ng unang pag-load.

Mga karaniwang termino

Mga karaniwang pagkakamali at maling akala

• "Programming language ang React." Library ito na isinulat at ginagamit mula sa JavaScript (o TypeScript).
• "Ang React ang nag-iimbak ng data ko." Nasa browser ang state at nawawala tuwing mag-refresh. Kailangan ng backend at database ang data na dapat manatili.
• Paglalagay ng secrets sa React code. Lahat ng nasa React app ay ipinapadala sa browser ng bisita. Pampubliko ang API key na nandoon. Panatilihin ito sa server.
• "Hindi puwedeng mag-rank sa search ang React apps." Mas mahina sa search ang client-only rendering, pero naaayos ito ng prerendering o server rendering.
• Malalaking component. Ang isang 1,000-linya na component ay mahirap baguhin nang ligtas, para sa tao at AI. Humingi ng mas maliliit.
• Pag-aakalang phone app ang React web app. Tumatakbo ito sa browser, kasama sa phone, pero hindi ito App Store app.

Ano ang hihingin sa AI builder mo

• "Hatiin ang pahinang ito sa maliliit at may pangalang component, at sabihin kung aling file ang kinaroroonan ng bawat isa."
• "Gawing reusable ang ProductCard component, na may name, price, at image bilang props."
• "I-save ang cart sa database para hindi ito mawala kapag nag-refresh."
• "Panatilihin sa server ang lahat ng API key; dapat tawagan ng React code ang sarili nating API."
• "Magdagdag ng loading at error state para sa data na galing sa server."
• "Kung mahalaga ang visibility sa search para sa mga pahinang ito, i-prerender ang mga ito o gumamit ng server-rendered na setup."
• "Ipaliwanag sa simpleng salita kung ano ang ibig sabihin ng error na ito at saang component ito galing."

Para sa mas malawak na larawan, tingnan ang frontend vs backend, at para suriin ang isinulat ng AI, tingnan ang paano suriin ang code na gawa ng AI.

React sa Mythex

Maliban kung humingi ka ng iba, nagsisimula ang Mythex ng mga bagong project sa Vite + React + TypeScript + Tailwind, na may live preview habang nakikipag-chat ka. Maaari mong pangalanan ang ibang setup sa iyong unang prompt — halimbawa "Gumamit ng Next.js" o "plain static HTML landing page" — at pipiliin ito ng Mythex mula sa isinulat mo; walang settings screen para dito. Ipinapaliwanag ng docs page tungkol sa paano pinipili ang tech ang mga pagpipilian. Read-only ang code editor sa Free; sa Pro maaari mong i-edit nang direkta ang React code at i-export ang project para ipagpatuloy sa ibang lugar.

Mga tanong