React اور کمپوننٹس

تین طریقے

1. 1

   React 2013 میں فیس بک میں بنی JavaScript لائبریری ہے جو یوزر انٹرفیس سنبھالنے کے لیے ہے۔ اس کا مرکزی خیال کمپوننٹ ہے: ایک خود مختار UI ٹکڑا جو ان پٹ (props) لیتا ہے اور مارک اپ واپس دیتا ہے۔ آپ چھوٹے کمپوننٹس کو بڑے کمپوننٹس میں جوڑ کر پورا صفحہ ایک درخت بناتے ہیں۔ صفحہ ڈیٹا کا ایک فنکشن بن جاتا ہے۔ ڈیٹا بدلے، UI خود اپ ڈیٹ ہو۔ نہ ہاتھ سے DOM چھوا، نہ ایونٹ لسنر کا الجھن۔ 2026 میں React پاکستان کی زیادہ تر بڑی پروڈکٹ سطحوں پر چلتی ہے: SadaPay, Tajir, Bazaar, Bykea, دراز کے حصے، اور کراچی لاہور کے زیادہ تر Y Combinator طرز کے اسٹارٹ اپ۔

2. 2

   پہلا طریقہ، کمپوننٹ بطور فنکشن۔ سادہ ترین کمپوننٹ ایک فنکشن ہے جو JSX (JavaScript مع HTML جیسی نحو) واپس دیتا ہے۔ مثال: function TransactionRow({ date, name, amount, status }) { return <div className='flex justify-between p-3'><span>{date}</span><span>{name}</span><span>PKR {amount}</span><span>{status}</span></div>; }۔ آپ props دیتے ہیں، آپ کو مارک اپ ملتا ہے۔ سو ایسی قطاریں دکھانے کے لیے ایک array پر map کریں: transactions.map(tx => <TransactionRow key={tx.id} {...tx} />)۔ ایک تعریف، کئی نمونے، ہر ایک کا اپنا ڈیٹا۔

3. 3

   دوسرا طریقہ، useState کے ذریعے state۔ کمپوننٹس کی یاد ہکس سے بنتی ہے۔ useState ایک قدر اور setter دیتا ہے: const [count, setCount] = useState(0)۔ جب بھی setCount چلے گا، React نئی قدر کے ساتھ کمپوننٹ دوبارہ پیش کرے گا۔ state ڈیفالٹ پر مقامی ہوتی ہے، ہر کمپوننٹ کی اپنی۔ JazzCash کی لین دین فہرست میں state ہو سکتی ہے فلٹر (سب، بھیجی، وصول)، صفحہ نمبر، اور لوڈنگ کے لیے۔ فلٹر بٹن دبائیں، setFilter('sent') چلے، React کمپوننٹ دوبارہ چلائے، نظر آنے والی قطاریں بدل جائیں۔

کیوں؟

Claude کے ساتھ آزمائیں

Claude کے ساتھ پرامپٹ: 'JazzCash طرز ڈیٹا کے لیے React TransactionList کمپوننٹ بنائیں۔ loading، empty، اور error states شامل کریں۔ TypeScript اور Tailwind استعمال کریں۔ fetchUrl prop لیں، فلٹر تبدیلیوں کو debounce کریں، اور useMemo سے فہرست memoize کریں۔ vitest میں ٹیسٹ کیسز دیں۔ state مشین پر تبصرہ کریں۔' جواب کا اپنے کام سے موازنہ کریں۔ ماڈل نے کہاں اضافی پیچیدگی شامل کی؟ کہاں اصلی دنیا کا کیس چھوڑا؟