ردعمل کے ساتھ ڈیش بورڈ اپلی کیشن کیسے بنائیں

Jan 27, 2026
کيسے

اس سبق میں، ہم چلیں گے اے پی پی کیسے بنائیں استعمال کرتے ہوئے ردعمل صارف انٹرفیس کی تعمیر کے لئے جاوا اسکرپٹ لائبریری. یہ ویب ڈیزائن کا آلہ خاص طور پر مفید ہے جب یہ اجزاء کی تخلیق میں آتا ہے، jQuery کی طرح کچھ پر اہم فوائد کی پیشکش.

خود پر مشتمل، قابل تجدید اجزاء بنانے کی صلاحیت کا مطلب یہ ہے کہ آپ کوڈ کو چھوٹے اور زیادہ منظم رکھنے کے لۓ رکھ سکتے ہیں. اگر اجزاء کو کافی اچھی طرح سے قائم کیا جاسکتا ہے، تو وہ اس میں گرا دیا جا سکتا ہے جہاں کوئی اضافی سیٹ اپ کی ضرورت نہیں ہے.

اس ٹیوٹوریل میں، ہم ڈیش بورڈ کی درخواست بنا رہے ہیں جو اہم معاون میٹرکس پر نظر رکھتا ہے. اسکرین کو ایک گرڈ میں تقسیم کیا جاتا ہے، جس سے مختلف بصیرت کو ظاہر کرنے کے لئے اپنی مرضی کے مطابق کیا جاسکتا ہے.

ایک اپلی کیشن کے بجائے ایک سائٹ بنانا چاہتے ہیں؟ آپ کو بہترین ہدایات کی ضرورت ہے ویب سائٹ بلڈر اور ویب میزبانی سروس.

  • 19 شاندار jQuery پلگ ان

ایک عام ویجیٹ جزو بنانے سے، ہم کسی بھی بنیادی کوڈ کو متاثر کئے بغیر ڈسپلے کو کاٹ اور تبدیل کر سکتے ہیں. ایک کنٹینر جزو میں ان کو ریپنگ ہمیں اس اعداد و شمار کے ذریعہ اس ڈسپلے سے الگ کرنے کی اجازت دیتا ہے.

ہم استعمال کر رہے ہیں سی ایس ایس گرڈ وضاحت شدہ بلاکس میں مواد کو ظاہر کرنے کے لئے. براؤزر جو اس کی حمایت نہیں کرتے ہیں وہ ایک کالم میں دکھائے جائیں گے، جیسے چھوٹے اسکرین کا استعمال کرتے ہوئے.

اس سبق کے لئے فائلوں کو ڈاؤن لوڈ کریں یہاں .

01. انحصار ڈاؤن لوڈ کریں

پروجیکٹ فائلوں کو حاصل کرنے کے بعد (اور ان کو بچانے کے کلاؤڈ اسٹوریج )، ہمیں اس منصوبے کے لئے ضروری تمام ضروری پیکجوں کو کم کرنے کی ضرورت ہے. ان میں 'تخلیق شدہ رد عمل ایپ' سے فائلوں میں شامل ہیں، جو ہمارے لئے تعمیراتی عمل سے متعلق ہے.

ہمیں دو سرورز کو بھی چلانے کی ضرورت ہے - جو اس صفحے کے لئے گرم دوبارہ لوڈ فراہم کرتا ہے اور دوسرے کے ساتھ ٹیسٹ کرنے کے لئے کچھ جعلی ڈیٹا فراہم کرتا ہے.

پروجیکٹ ڈائرکٹری کے اندر اندر کمانڈ لائن پر درج کریں: 

 / * ایک ونڈو میں * /
& gt؛ یارن انسٹال
& gt؛ یارن شروع
/ * ایک اور ونڈو میں * /
& gt؛ یارن کی خدمت

02. پہلے ویجیٹ شامل کریں

react dashboard app

ایک سادہ اجزاء کے ساتھ شروع کرو

چیزوں کو شروع کرنے کے لئے، ہم صفحے پر ایک سادہ جزو پیش کریں گے. بابیل سیٹ اپ کے ساتھ، ہم ES2015 کلاسوں کا استعمال کرتے ہوئے اجزاء لکھ سکتے ہیں. ہم سب کو کرنے کی ضرورت ہے جب ہمیں ضرورت ہو گی اور ویب پیک کے ساتھ بچے کو باقی کریں گے.

کو کھولنے /SRC/Components/App.js. اور صفحے کے سب سے اوپر درآمد میں شامل کریں. پھر، رینڈر تقریب کے اندر، کنٹینر کے اندر جزو کی جگہ رکھیں & lt؛ div & gt؛ . 

 درآمد ویجیٹ سے
  '../components/widget'؛
[...]
& lt؛ div classname = "اے پی پی" اور جی ٹی؛
  & lt؛ ویجیٹ / & gt؛
& lt؛ / div & gt؛

03. سٹائل ایک ویجیٹ باکس

react dashboard app

ویب پیپ کے ساتھ سی ایس ایس درآمد کرتے وقت، شیلیوں کو صفحے کے دیگر حصوں میں لے جانے سے بچنے کے لئے سوال میں صرف جزو کے لئے سکوپ کیا جا سکتا ہے

اس منصوبے پر، WebPack سی ایس ایس درآمد لینے کے لئے قائم ہے. اس کا مطلب یہ ہے کہ ہم سی ایس ایس فائلوں کو درآمد کرسکتے ہیں جیسے ہم نے پچھلے مرحلے میں جاوا اسکرپٹ کے ساتھ کیا، جو ہمیں ہر جزو کے لئے علیحدہ فائلوں کو تخلیق کرنے کی اجازت دیتا ہے. ویجٹ جی ایس کے سب سے اوپر پر مندرجہ ذیل درآمد شامل کریں. یہ 'ویجیٹ' کلاس نام سے منسلک کرے گا اور شیلیوں کو اس جزو میں دائرہ کرے گا. 

 درآمد '../styles/widget.css'_

04. سرخی اور مواد شامل کریں

ہر ویجیٹ کو کیا اعداد و شمار ظاہر کرنے کی ایک مختصر وضاحت کی ضرورت ہوگی. چیزوں کو اپنی مرضی کے مطابق رکھنے کے لئے، ہم اس پراپرٹی کے طور پر یا 'PROP' کے طور پر منتقل کریں گے جب ہم اس کا استعمال کرتے ہیں.

مواد کے طور پر، ایک خصوصی 'بچوں' کے پروپوزل کی فراہمی کو رد عمل کرتا ہے، جس میں ایک اجزاء کے افتتاحی اور اختتامی ٹیگ کے درمیان درج کردہ مواد شامل ہوں گے.

جگہ ہولڈر کو تبدیل کریں & lt؛ p & gt؛ مندرجہ ذیل کے ساتھ رینڈر تقریب میں. لوڈنگ جزو بعد میں کھیل میں آ جائے گا. 

 & lt؛ div classname = "ہیڈر" اور GT؛
  & lt؛ h2 & gt؛ {it..props.hapehing} & lt؛ / h2 & gt؛
  {یہ.props.loading؟ & lt؛ لوڈنگ / & gt ؛: ""}
& lt؛ / div & gt؛
& lt؛ div classname = "مواد" اور GT؛
  {یہ.props.Children}
& lt؛ / div & gt؛

05. ویجیٹ گرڈ سے گریز کرتے ہیں

react dashboard app

سی ایس ایس گرڈ کی تفصیلات کے ساتھ، ترتیب عناصر جیسے گٹروں کو لاگو کیا جائے گا، قطع نظر بچے کے عناصر پر لاگو کسی بھی اسٹائل کے بغیر

ہم شیلیوں کی شیٹوں کے علاوہ ہم درآمد کرتے ہیں، ہم اس کے ذریعے منظور شدہ پر مبنی طور پر متحرک طور پر رد عمل شیلیوں کو تشکیل دے سکتے ہیں.

سی ایس ایس گرڈ کے ساتھ کالم اور قطاروں کو دور کرنے کے لئے گرڈ کالم اور گرڈ قطار کی خصوصیات کا استعمال کریں. ہم 'Colspan' اور 'rosspan' کے ذریعے منتقل کر سکتے ہیں اس فی اجزاء کو اس طرح میں اسی طرح میں منتقل کرنے کے لئے HTML میں ٹیبل کے خلیات کیسے کام کرتے ہیں.

ویجیٹ تعمیر کنندہ میں شیلیوں کا اطلاق کریں اور ان کو کنٹینر سے منسلک کریں & lt؛ div & gt؛ . 

 اگر (props.colspan! == 1) {
  یہ. panstyles.gridcolumn.gridcolumn.gridcolumn
  = `اسپین $ {props.colspan}}؛
}
اگر (props.rosspan! == 1) {
  یہ. panstyles.gridrow.gridrow
  = `اسپین $ {props.rosspan}}؛
}
[...]
& lt؛ div style = {this.spanstyles}
  Classname = "ویجیٹ" اور GT؛

06. سپلائی ڈیفالٹ پروپس

اب ہمارے ویجیٹ خالی ہے کیونکہ ہم ابھی تک کسی بھی پروپس کو فراہم نہیں کرتے ہیں. ان صورتوں میں، ہم اس کے بجائے استعمال کرنے کے لئے ڈیفالٹ پروپس فراہم کرسکتے ہیں.

جب تک دوسری صورت میں نہیں بتایا گیا ہے، سی ایس ایس گرڈ سب سے چھوٹی یونٹ لینے کے لئے ڈیفالٹ کریں گے، اس صورت میں اس صورت میں 1x1 مربع ہے. صرف ویجیٹ برآمد کرنے سے پہلے، اس اثر کو کچھ ڈیفالٹ پروپس کی فراہمی. 

 ویجیٹ. defaultprops = {
  سرخی: "نام نہاد ویجیٹ"،
  کولسن: 1،
  RASSPAN: 1.
}

07. مخصوص پروپس کو نافذ کریں

react dashboard app

NumberDisplay جزو ایک 'پیشکش' جزو ہے، کیونکہ اس میں کوئی اندرونی ریاست نہیں ہے اور اس پر گزرنے پر مکمل طور پر انحصار کرتا ہے

اجزاء کو اشارہ فراہم کر سکتا ہے کہ کس قسم کی اقدار کو پروپس کے طور پر بھیجا جانا چاہئے. ایک درخواست کی ترقی کرتے ہوئے، کسی بھی غلط طور پر منظور شدہ پروپس کو کنسول میں دکھائے جائیں گے جیسے کہ کیڑے کو مزید نیچے کیڑے سے بچنے میں مدد ملے گی.

صرف ڈیفالٹ پروپس کے نیچے، اس بات کی وضاحت کریں کہ کس طرح کے ساتھیوں کو منظور کیا جانا چاہئے یا اس کی ضرورت ہے، اور وہ کس قسم کی ہوگی. 

 ویجیٹ .پروپپپس = {
  سرخی: reasct.proptypes.string،
  کولسن: React.proptypes.number،
  rosspan: reasct.proptypes.number،
  بچے:
    reasect.proptypes.element.isrequired
}

08. اپلی کیشن کو پروپس شامل کریں

ضرورت کے طور پر 'بچوں' کے پروپوزل کی وضاحت سے، آپ براؤزر کو شکایت کر سکتے ہیں کہ یہ فی الحال غیر منقول ہے. جبکہ یہ اپلی کیشن کو توڑ نہیں دے گا، جب تک کہ یہ ترتیب نہیں دیا جائے گا.

App.js پر واپس سر اور ہم نے پہلے ہی تیار کردہ ویجیٹ میں ایک سرخی کی سہولیات شامل کریں. ٹیگ خود کو بند کرنے کے بجائے، اسے کھولیں اور اسے کام کرنے کے لۓ کچھ جگہ دار مواد شامل کریں. 

 & lt؛ ویجیٹ سرٹیفکیٹ = "کھلی ٹکٹ کل" اور جی ٹی؛
  & lt؛ p & gt؛ یہ کچھ مواد ہے & lt؛ / p & gt؛
& lt؛ / ویجیٹ اور جی ٹی؛

09. کچھ ڈیٹا دکھائیں

react dashboard app

ہم سی ایس ایس میں Supports مطابقت استعمال کر سکتے ہیں کہ براؤزر گرڈ ترتیب کی حمایت کرتا ہے یا نہیں. اگر نہیں، تو ہم واحد کالم کے نقطہ نظر پر پہلے سے طے شدہ ہیں

Numberdisplay جزو بہت سے ویجیٹ کی طرح کام کرتا ہے جو ہم نے صرف تخلیق کیا ہے - یہ آپ کو اس میں منتقل ہونے والے پروپس پر خالص طور پر پر مبنی کچھ متن فراہم کرتا ہے. ہم اسے چھوڑ سکتے ہیں جہاں ہمیں عددی اعداد و شمار کی مسلسل ڈسپلے کی ضرورت ہے.

سب سے اوپر پر NumberDisplay جزو درآمد کریں اور اس جگہ کو جگہ فراہم کرنے کے لئے استعمال کریں جو آپ نے صرف ویجیٹ کے اندر شامل کیا ہے. 

 درآمد نمبر'./components/numberdisplay 'سے درآمد نمبر.
[...]
& lt؛ NumberDisplay MAX = {9} قدر = {5} / & gt؛

10. نمبر Widget پر تبدیل کریں

اس وقت، بہت سارے کوڈ موجود ہیں جو کچھ ظاہر کرنے کے لئے استعمال کیا جاتا ہے جو ویجٹ میں تبدیل نہیں کرے گا. ہم اس سب کو الگ کرنے کے لئے ایک خاص جزو بنا سکتے ہیں. اس طرح ہم صرف NEMBEDGET درآمد کرنے کی ضرورت ہے.

نمبر Widget کے ساتھ App.js کے سب سے اوپر پر ویجیٹ اور Numberdisplay درآمدات کو تبدیل کریں. رینڈر طریقہ میں انہیں بھی تبدیل کرنے کے لئے یقینی بنائیں. 

 درآمد نمبر سے متعلق
  '../components/numberwidget'؛
[...]
& lt؛ numberwidget.
  سرخی = "کھلے ٹکٹ کل"
زیادہ سے زیادہ = {9} قدر = {5} / & gt؛

اگلا صفحہ: رد عمل میں اپنا ڈیش بورڈ اپلی کیشن مکمل کریں

  • 1.
  • 2.

موجودہ صفحہ: ردعمل میں ڈیش بورڈ اپلی کیشن بنائیں - 1-10 اقدامات

کيسے - انتہائی مشہور مضامین

آپ کی ویب سائٹ پر پرتوں پارلایکس اثر کیسے بنانا

کيسے Jan 27, 2026

(تصویری کریڈٹ: www.beargrylls.com) Parallax تحریک، مختلف رفتار پر منتقل کرنے ک..

میڈیا سوالات کے بغیر انکولی ترتیب تعمیر کریں

کيسے Jan 27, 2026

ایک طویل عرصے سے میں ویب صفحات پر ایک بہترین بصری ساخت تک پہنچنے کی کوشش کر رہا تھا. میں اپنے روزانہ کام می�..

فوٹوشاپ میں رات کو دن کیسے تبدیل کرنا

کيسے Jan 27, 2026

دن سے رات کے تبادلے کے دوران جب تک فوٹوشاپ ایڈجسٹمنٹ تہوں میں موجود ہے، ..

سی ایس ایس گرڈ کے ساتھ فیشن لچکدار ترتیب

کيسے Jan 27, 2026

سی ایس ایس گرڈ قطاروں اور کالموں کے دو محور لے آؤٹ بنانے کے لئے بہترین ہ�..

استعمال کرنے کا تعارف ٹیسٹنگ

کيسے Jan 27, 2026

ایک کامیاب ویب پروڈکٹ صرف آپ کی تنظیم کی ضروریات کو پورا نہیں کرتا بلکہ آپ کے صارفین کی ضروریات بھی. استعم�..

اظہار خیال ہاتھوں پینٹنگ کے لئے اوپر کی تجاویز

کيسے Jan 27, 2026

ہاتھ شاید جاننے کے لئے سب سے زیادہ مشکل اناتومی عنصر ہیں پینٹ کیسے ..

ایک وشد پری رانی کیسے بنانا

کيسے Jan 27, 2026

میرے پسندیدہ میگزین کے علاوہ کسی دوسرے کی طرف سے کسی بھی برا گدی پری ران..

مادہ پینٹر کا استعمال کرتے ہوئے کھیل کے لئے تیار بناوٹ بنائیں

کيسے Jan 27, 2026

یہ گزشتہ سال ویڈیو کھیلوں کی صنعت کے لئے ایک کھیل مبدل رہا ہے اور کھیلوں..

اقسام