اپنے سر کو ان پانچ عوامل کے ساتھ رد عمل کے ارد گرد حاصل کریں

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

01. اجزاء

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

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

ایچ ٹی ایم ایل میں، آپ اس درخواست کے بارے میں سوچ سکتے ہیں عناصر کی ایک سیریز کے طور پر، اس طرح:

 & lt؛ div id = "petappintions" & gt؛
  & lt؛ div class = "addappintions" & gt؛ & lt؛ / div & gt؛
  & lt؛ div class = "searchapints" & gt؛ & lt؛ / div & gt؛
  & lt؛ div class = "listapentments" & gt؛ & lt؛ / div & gt؛
& lt؛ / div & gt؛ 

اور یہ بھی ہے کہ آپ ردعمل میں کیا کریں گے. آپ ایک سنگل ٹیگ (& lt؛ div id = "petappinentments" & gt بناتے ہیں؛) جو ایک petappintsations کے اجزاء کو فون کرتا ہے، جس کے بعد دیگر ذیلی اجزاء کی ضرورت ہوتی ہے. اس طرح کی ترتیب میں اعتراض کے ساتھ پاس کرنے کے لئے، آپ کو رد عمل کی تخلیق کا استعمال کرتے ہیں.

 وار مین انٹرفیس = reasct.createclass ({
  رینڈر: فنکشن () {
    واپسی (
      & lt؛ div classname = "انٹرفیس" & gt؛
        & lt؛ addappintment / & gt؛
        & lt؛ searchapintments / & gt؛
        & lt؛ listapentments / & gt؛
      & lt؛ / div & gt؛
    )
  } // رینڈر
})؛ // maininterface.

Reactdom.render (
  & lt؛ مرکزی انٹرفیس / اور جی ٹی؛
  دستاویز. petapintmentbeldd ('petappintions')
)؛ // فراہم کرتے ہیں 

دو رینڈر طریقوں ہیں. مرکزی انٹرفیس کلاس میں، ہم ایسے اشیاء کا اعلان کرتے ہیں جو براؤزر اور رییکٹوم کو بھیجے جائیں گے. رینڈر طریقہ کو تبدیل کرتا ہے & lt؛ div id = "petappintments" & gt؛ & lt؛ / div & gt؛ رد عمل کے کوڈ کے ساتھ آپ کے ایچ ٹی ایم ایل میں عنصر. پھر ہم اس کوڈ کو لکھیں گے جو ہمارے تین ذیلی اجزاء میں سے ہر ایک کو ہینڈل کرتی ہے.

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

02. جے ایس ایکس

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

یہ اس طرح کی نوعیت کی طرح ٹیمپلیٹ زبانوں کے ساتھ کیا ہوتا ہے، جس میں آپ کو ایچ ٹی ایم ایل کے اندر جاوا اسکرپٹ شامل کرنے کی اجازت دیتا ہے. لیکن جے ایس ایکس جاوا اسکرپٹ میں ترجمہ (ٹرانسمیشن) میں شامل ہوتا ہے. لہذا آپ صرف ایک ٹیمپلیٹ کی تعمیر نہیں کر رہے ہیں لیکن ایک ڈھانچہ جو جاوا اسکرپٹ بیانات کی ایک سیریز میں تبدیل ہوجاتا ہے. Templating زبانوں کے برعکس، اسے رن ٹائم میں تشریح نہیں ہونا چاہئے. چلو ایک مثال پر نظر آتے ہیں.

 & lt؛ li classname = "پالتو جانوروں کی شناخت میڈیا" کلید = {انڈیکس} & gt؛
  & lt؛ div classname = "پالتو جانوروں کی معلومات میڈیا جسم" اور جی ٹی؛
    & lt؛ div classname = "پالتو سر" اور GT؛
      & lt؛ اسپین کلاس نام = "پالتو نام" & gt؛ {it.state.data [انڈیکس] .petname} & lt؛ / span & gt؛
      & lt؛ اسپین Classname = "Apt-Dater Dater-Sture" & GT؛ {its.state.data [انڈیکس] .aptdate} & lt؛ / span & gt؛
    & lt؛ / div & gt؛
    & lt؛ div classname = "مالک کا نام" اور جی ٹی؛ & lt؛ اسپین کلاس نام = "لیبل آئٹم" اور GT؛ مالک: & lt؛ / span & gt؛
    {it.state.data [انڈیکس] .ownername} & lt؛ / div & gt؛
    & lt؛ div classname = "apt-notes" & gt؛ {it.state.data [انڈیکس] .apnotes} & lt؛ / div & gt؛
  & lt؛ / div & gt؛
& lt؛ / li & gt؛ 

ہم اس کوڈ کو ہماری تقرریوں کو آؤٹ کرنے کے لئے استعمال کرسکتے ہیں. یہ باقاعدگی سے ٹیمپلیٹنگ زبان کا استعمال کرتے ہوئے بہت زیادہ محسوس ہوتا ہے، لہذا JSX کے بارے میں کچھ معمولی idiosyncrasies سیکھنے کے علاوہ، آپ اسے جلدی اٹھا سکتے ہیں.

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

03. ریاست

تیسری دماغ کی تبدیلی کو رد عمل میں ریاست کے ساتھ کام کرنا سیکھ رہا ہے. ریاست آپ کی درخواست کے سب سے اوپر اجزاء پر ذخیرہ کیا جاتا ہے اور آپ کے ایپ میں کیا ہو رہا ہے کا انتظام کرتا ہے. GetInitialstate نامی ایک خاص طریقہ ہے جہاں آپ کی درخواست شروع ہوتی ہے جب آپ اس بات کو ترتیب دے سکتے ہیں.

میرے نمونے کی درخواست میں، ابتدائی ریاست اس طرح قائم کی گئی ہے:

 وار مین انٹرفیس = reasct.createclass ({
  GetInitialstate: فنکشن () {
    واپسی {
      Aptbindivisible: غلط،
      حکم دیا: 'پیٹنٹ'،
      آرڈر: 'ASC'،
      سوالات ٹیکسٹ: ''
    } // واپسی
  }، // getInitialstate 

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

جب آپ ایک جزو لکھتے ہیں، تو درخواست کی ریاست میں ترمیم کرنا آسان ہے. لکھنا اجزاء آسان ہے کیونکہ آپ صرف اس پر توجہ مرکوز کرتے ہیں کہ جزو کیا ہے. یہاں میرا ایپ کی آخری فہرست جزو ہے:

 وار ردعمل = ضرورت ('رد عمل')؛
var aptlist = reasct.createclass ({

  ہینڈلیلیٹ: فنکشن () {
    یہ .props.ondelete (یہ.props.whichitem)
  }،

  رینڈر: فنکشن () {
    واپسی (
      & lt؛ li classname = "پالتو جانوروں کی شناخت میڈیا" & gt؛
        & lt؛ div classname = "میڈیا-بائیں" اور جی ٹی؛
          & lt؛ بٹن classname = "پالتو جانوروں کو حذف کریں BTN BTN-XS BTN-DIRING" ONCLICK = {ry.handledelete} & gt؛
          & lt؛ اسپین Classname = "GLYPHICON GYLYPHICON-ENTER" & GT؛ & lt؛ / span & gt؛ & lt؛ / بٹن & gt؛
        & lt؛ / div & gt؛
        & lt؛ div classname = "پالتو جانوروں کی معلومات میڈیا جسم" اور جی ٹی؛
          & lt؛ div classname = "پالتو سر" اور GT؛
            & lt؛ اسپین کلاس نام = "پالتو نام" & gt؛ {it.props.singleitem.petname} & lt؛ / span & gt؛
            & lt؛ اسپین Classname = "Apt تاریخ ھیںچ دائیں" & gt؛ {it.props.singleitem.aptdate} & lt؛ / span & gt؛
          & lt؛ / div & gt؛
          & lt؛ div classname = "مالک کا نام" اور جی ٹی؛ & lt؛ اسپین کلاس نام = "لیبل آئٹم" اور GT؛ مالک: & lt؛ / span & gt؛
          {اس .props.singleitem.ownername} & lt؛ / div & gt؛
          & lt؛ div classname = "apt-notes" & gt؛ {it.props.singleitem.aptnotes} & lt؛ / div & gt؛
        & lt؛ / div & gt؛
      & lt؛ / li & gt؛
    ) // واپسی
  } // رینڈر
})؛ // Aptlist.

ماڈیول. exports = aptlist؛ 

جزو صرف دو چیزوں سے تعلق رکھتا ہے. سب سے پہلے، درخواست کی موجودہ حالت پر مبنی تقرریوں کی فہرست دکھا رہا ہے. دوسرا، ریڈ 'ایکس کی ایک پر کلک کریں.

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

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

04. ایک طرفہ ڈیٹا بہاؤ

اگلے دماغ کی تبدیلی کو ایک طرفہ ڈیٹا بہاؤ سے محبت کرنا سیکھنا ہے. ردعمل میں، آپ کی درخواست کی حالت سب سے اوپر کے اجزاء میں رہتا ہے. جب آپ اسے ذیلی جزو میں تبدیل کرنے کی ضرورت ہے، تو آپ سب سے اوپر کے اجزاء کا حوالہ دیتے ہیں اور اسے ہینڈل کرتے ہیں. استعمال کرنے کے لئے یہ تھوڑا سا مشکل ہے. یہاں ایک مثال ہے:

 وار ردعمل = ضرورت ('رد عمل')؛
var aptlist = reasct.createclass ({
  ہینڈلیلیٹ: فنکشن () {
    یہ .props.ondelete (یہ.Props.Whichitem)
  }،
  رینڈر: فنکشن () {
    واپسی (
      & lt؛ li classname = "پالتو جانوروں کی شناخت میڈیا" & gt؛
        & lt؛ div classname = "میڈیا-بائیں" اور جی ٹی؛
          & lt؛ بٹن classname = "پالتو جانوروں کو حذف کریں BTN BTN-XS BTN-DIRING" ONCLICK = {ry.handledelete} & gt؛
          & lt؛ اسپین Classname = "GLYPHICON GYLYPHICON-ENTER" & GT؛ & lt؛ / span & gt؛ & lt؛ / بٹن & gt؛
        & lt؛ / div & gt؛
      & lt؛ / li & gt؛
      ...
    ) // واپسی
  } // رینڈر
})؛ // Aptlist.

ماڈیول. exports = aptlist؛ 

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

مرکزی ماڈیول میں آپ کو ماڈیول کی نمائندگی کرنے کے لئے آپ ٹیگ پر ایک خاصیت بنائے گا. یہ صرف ایک ایچ ٹی ایم ایل ٹیگ کو ایک خاصیت کو گزرنے کی طرح لگتا ہے:

 & lt؛ aptlist ondelete = {it.deletemessage} / & gt؛ 

اور پھر آپ کو درخواست کی ریاست میں تبدیلی کو سنبھالنے کے لئے اہم جزو میں اپنا اپنا طریقہ بنانا. مرکزی ماڈیول میں ریاست رکھنا آپ کے ذیلی ماڈیولز کو زیادہ موثر بنانے میں مدد ملتی ہے. کوڈ کو برقرار رکھنے میں بھی آسان ہے کیونکہ زیادہ تر کارروائی ایک جگہ میں ہوتی ہے.

05. لائفیکائل طریقوں

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

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

مثال کے طور پر، زندگی سکائل طریقوں جو آپ کو AJAX کی درخواستوں کے ذریعہ بیرونی ڈیٹا لوڈ کرنے کی اجازت دیتا ہے:

 ComponentDIDMOUNT: فنکشن () {
  یہ .erverRevest = $ .G ('./ js / data.json'، فنکشن (نتیجہ) {
    Var Tempapts = نتیجہ؛
    یہ.sostate ({
      MyAppitents: Tempapts.
    })؛ // سیٹسٹیٹ
  } .bind (یہ))؛
}، // componentdidmount 

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

ردعمل ردعمل

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

یہ آرٹیکل - رے ویلیلوبوس کی طرف سے بیان کیا گیا ہے - اصل میں ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کے بہترین فروخت میگزین کے نیٹ ورک کے 286 نیٹ ورک میں شائع کیا گیا تھا. نیٹ ورک سبسکرائب کریں .

اپنی ردعمل کی مہارت کو مزید بہتر بنانے کے لئے چاہتے ہیں؟

اگر آپ ردعمل کے بارے میں مزید سیکھنے میں دلچسپی رکھتے ہیں تو اس بات کو یقینی بنائیں کہ آپ نے اپنی ٹکٹ اٹھایا ہے 19-21 ستمبر 2018 سے لندن پیدا کریں . دنیا بھر میں ردعمل کو سکھانے اور شروع کرنے کے لئے رد عمل اکیڈمی قائم کرنے کے بعد sizzy.co. اور OK-Google.io. کرسٹجن Ristovski اپنے ورکشاپ کی فراہمی کی جائے گی - جانیں کہ کس طرح رد عمل میں سوچنے کے بارے میں سوچتے ہیں - جس میں وہ ردعمل کے بہترین طریقوں کو تلاش کریں گے اور آپ کو حقیقی مسائل کو حل کرنے کے لۓ آپ کو ایک اپلی کیشن کی تعمیر کے عمل میں سامنا کرنا پڑتا ہے.

19-21 ستمبر 2018 تک لندن پیدا ہوتا ہے. اب اپنا ٹکٹ حاصل کرو .

متعلقہ مضامین:

• 10 ماہرین RectJS تجاویز آپ کو آج جاننے کی ضرورت ہے
• ردعمل کے ساتھ ڈیش بورڈ اپلی کیشن بنائیں
• رد عمل کے ساتھ ایک سادہ موسیقی پلیئر کی تعمیر