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 میں لکھے جاتے ہیں، جو HTML جیسا لگتا ہے جو JavaScript کے ساتھ ملا ہوا ہو:

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 ایپس سرچ میں رینک نہیں کر سکتیں۔" صرف کلائنٹ پر رینڈرنگ سرچ کے لیے کمزور ہے، لیکن prerendering یا سرور رینڈرنگ زیادہ تر مسئلہ حل کر دیتی ہے۔
• بہت بڑے کمپونینٹس۔ ایک 1,000 لائنوں کا کمپونینٹ انسانوں اور AI دونوں کے لیے محفوظ طریقے سے بدلنا مشکل ہے۔ چھوٹے کمپونینٹس مانگیں۔
• یہ سمجھنا کہ React ویب ایپ فون ایپ ہے۔ یہ براؤزر میں چلتی ہے، بشمول فونز پر، لیکن یہ App Store کی ایپ نہیں ہے۔

اپنے AI بلڈر سے کیا مانگیں

• "یہ صفحہ چھوٹے، نام دار کمپونینٹس میں تقسیم کریں، اور بتائیں کہ ہر ایک کس فائل میں ہے۔"
• "ProductCard کمپونینٹ کو دوبارہ استعمال کے قابل بنائیں، جس میں name، price اور image props ہوں۔"
• "کارٹ کو ڈیٹا بیس میں محفوظ کریں تاکہ ریفریش کے بعد بھی برقرار رہے۔"
• "تمام API کلیدیں سرور پر رکھیں؛ React کوڈ ہماری اپنی API کو کال کرے۔"
• "سرور سے آنے والے ڈیٹا کے لیے لوڈنگ اور خرابی کی حالتیں شامل کریں۔"
• "اگر ان صفحات کے لیے سرچ میں نظر آنا اہم ہے تو انہیں prerender کریں یا سرور پر رینڈر ہونے والا سیٹ اپ استعمال کریں۔"
• "اس خرابی کا سادہ الفاظ میں مطلب بتائیں اور بتائیں کہ یہ کس کمپونینٹ سے آ رہی ہے۔"

بڑی تصویر کے لیے دیکھیں فرنٹ اینڈ بمقابلہ بیک اینڈ، اور AI کے لکھے کوڈ کا جائزہ لینے کے لیے AI کے بنائے کوڈ کا جائزہ کیسے لیں۔

Mythex میں React

جب تک آپ کچھ اور نہ مانگیں، Mythex نئے پروجیکٹس Vite + React + TypeScript + Tailwind پر شروع کرتا ہے، اور چیٹ کے دوران لائیو پریویو چلتا ہے۔ آپ پہلے پرامپٹ میں کوئی اور سیٹ اپ بتا سکتے ہیں، مثلاً "Next.js استعمال کریں" یا "سادہ static HTML لینڈنگ پیج"، اور Mythex آپ کے لکھے ہوئے سے اسے چن لیتا ہے؛ اس کے لیے کوئی سیٹنگز اسکرین نہیں۔ دستاویزات کا صفحہ ٹیکنالوجی کیسے منتخب ہوتی ہے آپشنز کی وضاحت کرتا ہے۔ کوڈ ایڈیٹر Free پر صرف پڑھنے کے لیے ہے؛ Pro پر آپ React کوڈ براہِ راست بدل سکتے ہیں اور پروجیکٹ کو کہیں اور کام جاری رکھنے کے لیے ایکسپورٹ کر سکتے ہیں۔

سوالات