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 કોડમાં તે બધે દેખાય છે.

એક કાર્યરત ઉદાહરણ: કાર્ટ કાઉન્ટર

ધારો કે તમારી ઓનલાઇન દુકાનમાં “Add to cart” બટન અને વસ્તુઓની સંખ્યા બતાવતો કાર્ટ આઇકન છે. 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>
  );
}

જ્યારે ખરીદનાર “Add to cart” પર ક્લિક કરે ત્યારે શું થાય છે:

1. બટનનો onClick onAdd ને બોલાવે છે, જે setCartCount ને બોલાવે છે.
2. React cartCount state ને 0 થી 1 કરે છે.
3. React Shop ને ફરીથી રેન્ડર કરે છે, અને CartIcon માં count={1} પસાર કરે છે.
4. પેજ હવે “Cart (1)” બતાવે છે. “કાર્ટ ટેક્સ્ટ શોધો અને બદલો” એમ કહેતો કોઈ કોડ કોઈએ લખ્યો નથી — સ્ક્રીન ડેટાને અનુસરે છે.

મર્યાદાઓ પણ નોંધો. આ ગણતરી બ્રાઉઝરની મેમરીમાં રહે છે. પેજ રીફ્રેશ કરો તો તે ફરી 0 થઈ જાય છે. કાર્ટ રાખવા માટે તમારે તેને કાયમી જગ્યાએ સાચવવો પડે — કૂકી, બ્રાઉઝર સ્ટોરેજ, અથવા તમારા બૅકએન્ડ દ્વારા ડેટાબેઝ માં. React સ્ક્રીન સંભાળે છે; તે તમારો ડેટા સંગ્રહતું નથી.

વેબ એપમાં React ક્યાં બેસે છે

“Vite + React” એપ બ્રાઉઝરમાં રેન્ડર થાય છે (સિંગલ-પેજ એપ). Next.js એપ સર્ચ એન્જિન અને પહેલી લોડ ગતિમાં મદદ કરવા માટે પહેલાં સર્વર પર પેજ રેન્ડર કરી શકે છે.

સામાન્ય શબ્દો સમજૂતી

સામાન્ય ભૂલો અને ગેરસમજો

• “React એ પ્રોગ્રામિંગ ભાષા છે.” તે એક લાઇબ્રેરી છે જે JavaScript (અથવા TypeScript) માં લખાય છે અને તેમાંથી વપરાય છે.
• “React મારો ડેટા સંગ્રહે છે.” State બ્રાઉઝરમાં રહે છે અને રીફ્રેશ થતાં જતું રહે છે. કાયમી ડેટા માટે બૅકએન્ડ અને ડેટાબેઝ જોઈએ.
• React કોડમાં સિક્રેટ્સ મૂકવા. React એપની દરેક વસ્તુ મુલાકાતીના બ્રાઉઝરમાં મોકલાય છે. ત્યાં API કી જાહેર થઈ જાય છે. તેમને સર્વર પર રાખો.
• “React એપ સર્ચમાં રેન્ક ન કરી શકે.” ફક્ત ક્લાયંટ પર રેન્ડરિંગ સર્ચ માટે નબળું છે, પણ પ્રીરેન્ડરિંગ અથવા સર્વર રેન્ડરિંગ મોટા ભાગની સમસ્યા ઉકેલે છે.
• વિશાળ કમ્પોનન્ટ્સ. એક 1,000 લીટીનો કમ્પોનન્ટ લોકો અને AI બંને માટે સુરક્ષિત રીતે બદલવો મુશ્કેલ છે. નાના કમ્પોનન્ટ માગો.
• React વેબ એપ એ ફોન એપ છે એવું માનવું. તે બ્રાઉઝરમાં ચાલે છે, ફોન પર પણ, પણ તે App Store ની એપ નથી.

તમારા AI બિલ્ડર પાસે શું માગવું

• “આ પેજને નાના, નામવાળા કમ્પોનન્ટ્સમાં વહેંચો, અને કહો કે દરેક કઈ ફાઇલમાં છે.”
• “ProductCard કમ્પોનન્ટને પુનઃઉપયોગી બનાવો, name, price અને image props તરીકે.”
• “કાર્ટને ડેટાબેઝમાં સાચવો જેથી રીફ્રેશ પછી પણ રહે.”
• “બધી API કી સર્વર પર રાખો; React કોડે અમારી પોતાની API ને કૉલ કરવો જોઈએ.”
• “સર્વરથી આવતા ડેટા માટે લોડિંગ અને એરર સ્થિતિ ઉમેરો.”
• “જો આ પેજ માટે સર્ચ દૃશ્યતા મહત્વની હોય, તો તેમને પ્રીરેન્ડર કરો અથવા સર્વર-રેન્ડર સેટઅપ વાપરો.”
• “સાદી ભાષામાં સમજાવો કે આ એરરનો અર્થ શું છે અને તે કયા કમ્પોનન્ટમાંથી આવે છે.”

વ્યાપક ચિત્ર માટે, ફ્રન્ટએન્ડ વિ બૅકએન્ડ જુઓ, અને AI એ લખેલો કોડ તપાસવા માટે, AI-જનરેટેડ કોડની સમીક્ષા કેવી રીતે કરવી.

Mythex માં React

જ્યાં સુધી તમે બીજું કંઈ ન માગો, Mythex નવા પ્રોજેક્ટ Vite + React + TypeScript + Tailwind પર શરૂ કરે છે, અને તમે ચેટ કરો ત્યારે લાઇવ પ્રીવ્યૂ ચાલે છે. તમે પહેલા પ્રોમ્પ્ટમાં બીજું સેટઅપ નામ આપી શકો છો — ઉદાહરણ તરીકે “Next.js વાપરો” અથવા “સાદું સ્ટેટિક HTML લૅન્ડિંગ પેજ” — અને Mythex તમે જે લખો તેમાંથી તે પસંદ કરે છે; તેના માટે કોઈ સેટિંગ્સ સ્ક્રીન નથી. ટેક કેવી રીતે પસંદ થાય છે વિશેનું ડૉક્સ પેજ વિકલ્પો સમજાવે છે. કોડ એડિટર Free પર ફક્ત વાંચી શકાય તેવું છે; Pro પર તમે React કોડ સીધો સંપાદિત કરી શકો છો અને પ્રોજેક્ટને બીજે ચાલુ રાખવા માટે એક્સપોર્ટ કરી શકો છો.

પ્રશ્નો