پاسخ و حل تمرینات فصل دوم دوره ی React.js

0
67
آموزش ری اکت فارسی

حل تمرینات فصل دوم

اگر این سری آموزشی را دنبال کرده باشید، می دانید که فصل دوم از سری آموزشی react نیز به پایان رسیده است. در جلسه ی قبل به شما تمریناتی ارائه کردیم تا آن ها را حل کنید و به دانش کدنویسی خود بیفزایید. حالا نوبت حل این تمرینات است.

تمرینات ما شامل 6 مورد بودند:

  1. در کامپوننت App یک input بسازید که رویدادی از نوع change داشته باشد. سپس طول (تعداد کاراکتر) رشته ی وارد شده در input را در پایین آن نمایش دهید (مثلا در یک عنصر p).
  2. یک کامپوننت جدید بسازید (به نام ValidationComponent) که طول رشته ی وارد شده در input را به صورت یک prop دریافت کند.
  3. درون کامپوننت ValidationComponent کدی بنویسید که اگر تعداد کاراکترها کمتر از 5 بود پیام «text too short» نمایش داده شود. در غیر این صورت پیام «text long enough» به معنی «اندازه ی متن مناسب است» نمایش داده شود.
  4. یک کامپوننت دیگر به نام CharComponent ایجاد کنید و آن را به شکل inline استایل دهی کنید (یعنی مقدار display را روی inline-block قرار داده، padding و margin را روی 16 پیکسل تنظیم کنید، text-align را روی center بگذارید و border را روی 1px solid black قرار دهید)
  5. لیستی از CharComponent را نمایش دهید به طوری که هر کدام از CharComponent ها یک حرف از حروف وارد شده در input را به عنوان prop دریافت کنند.
  6. کاری کنید که با کلیک روی CharComponent ها، این کامپوننت ها حذف شوند.

ما با قالب خالی زیر شروع می کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

متن تمرینات را دست نمی زنم تا جلوی چشمم باشد و بعد از تگ hr کدنویسی می کنم اما اگر شما دوست دارید می توانید این لیست را حذف کنید.

برای تمرین اول باید یک input بسازیم که متن ورودی در آن، پایین تر از خودش نمایش داده شود بنابراین ابتدا یک input در کدهای JSX ایجاد می کنیم:

حالا متدی را تعریف می کنیم تا به onChange بدهیم. این متد درون کامپوننت App قرار بگیرد (خارج از render) اما این نوع از متدها state را تغییر می دهند بنابراین به state نیاز داریم:

فعلا مقداری برای state نداریم بنابراین آن را به شکل یک رشته ی خالی قرار می دهیم. شما می‌ توانید به جای userInput هر نامی را که خواستید تعیین کنید. اکنون می توانیم متدمان را با نام دلخواه تعریف کنیم. من نام inputChangedHandler را انتخاب می کنم:

این متد مقدار userInput (در state) را برابر با مقدار تایپ شده در input می کند. در جلسات قبلی به صورت مفصل در مورد آن صحبت کردیم.

حالا به input در JSX برمی گردیم و این متد را به آن پاس می دهیم:

من مقدار value را نیز روی مقدار state تنظیم کرده ام تا همیشه در هنگام refresh صفحه این مقدار را نمایش دهد.

اگر به مرورگر مراجعه کنید متوجه می شوید که چیزی نمایش داده نمی شود. دلیل آن هم واضح است؛ ما هیچ خروجی از متن تایپ شده نگرفته ایم. بنابراین:

بدین صورت متن تایپ شده را درون تگ p قرار می دهیم.

تمرین بعدی این بود که کامپوننتی بسازیم تا طول رشته (تعداد کاراکتر ها) را دریافت کند. بنابراین یک پوشه ی جدید به نام Validation می سازیم و در آن فایل Validation.js را می سازیم. محتویات این فایل بدین صورت است:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

حالا باید این کامپوننت را درون فایل App.js وارد کنیم:

تمرین به ما گفته بود که تعداد کاراکترهای متن وارد شده را به عنوان prop به این کامپوننت بدهیم بنابراین Validation را وارد JSX کرده و به راحتی یک prop به نام دلخواه برایش می نویسیم. من این نام را inputLength گذاشته ام:

با استفاده از یکی از متدهای خود جاوا اسکریپت به نام length می توانیم تعداد کاراکترهای یک رشته را محاسبه کنیم. حالا می توانیم درون Validation.js از آن استفاده کنید. تمرین بعدی می گوید طول رشته را محاسبه کنیم و بر اساس آن پیام text too short  یا text long enough را نمایش دهیم. بنابراین به Validation.js می رویم؛ دو راه برای حل این تمرین وجود دارد:

راه اول استفاده از ternary operator است:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در این روش گفته ایم اگر تعداد کاراکترها بیشتر از 5 تا بود پیام اول و در غیر این صورت (علامت دو نقطه) پیام دوم را نمایش بده. اگر به مرورگر برویم متوجه می شویم که به خوبی کار می کند اما قبلا گفته بودیم که بهتر است در پروژه های واقعی از این روش استفاده نکنید چرا که کدهایتان را بسیار شلوغ می کند.

روش دوم استفاده از بلوک if است:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

در مورد هر دو روش به طور مفصل صحبت کرده ایم بنابراین توضیحات تکراری نمی دهم.

حالا نوبت تمرین بعدی است؛ باید کامپوننت Char را بسازیم و با توجه به موارد گفته شده در متن تمرین آن را استایل دهی کنیم. بنابراین پوشه (Char) و فایل (Char.js) مربوط به آن را ایجاد کنید:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

حالا که این کامپوننت آماده شده است می توانیم آن را وارد App.js کنیم:

تمرین بعدی این است که هر کدام از کاراکترهایی را که کاربر وارد input کرده است به یکی از Char های متعدد برسد (لیست مانند). برای شروع، درون فایل App.js و داخل تابع render متغیری به شکل زیر تعریف می کنیم:

سوال: چطور می توانیم از map روی یک رشته استفاده کنیم؟ مگر map برای آرایه ها نبود؟

پاسخ: بله map روی آرایه ها کار می کند و حرف شما درست است. برای تبدیل رشته ی خود به آرایه باید از متد split استفاده کنیم و یک رشته ی خالی را به عنوان پارامتر به آن پاس بدهیم.

بنابراین:

یادآوری: map به آرایه ی اصلی دست نمی زند، بلکه یک آرایه ی جدید می سازد و آن را برمی گرداند. بنابراین charList یک آرایه ی جدید از عناصر است.

دقیقا مانند یک آرایه، ch نماینده ی هر کاراکتر است. حالا می توانیم به Char.js رفته و از آن به صورت props استفاده کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

اگر الان به مرورگر برویم کد های خودمان را صحیح و سالم می بینیم. همه چیز به خوبی کار می کند اما اگر console را باز کنیم متوجه می شویم که خطای key را دریافت می کنیم. بله ما لیستی از عناصر داریم که هیچ کدام key خاصی ندارند و در جلسات قبل گفته بودیم که نباید اجازه دهیم چنین اتفاقی بیفتد.

از آنجایی که برنامه ی ما از پایگاه داده استفاده نمی کند و چیز دیگری هم در اختیار نداریم باید از همان index آرایه برای key استفاده کنیم. بنابراین:

حالا با تست کردن کدها در مرورگر به هیچ خطایی برنمی خوریم.

تست برنامه
تست برنامه

برای تمرین بعد باید کاری کنیم که با کلیک روی هر کاراکتر، همان کاراکتر حذف شود. برای شروع، در فایل App.js و پایین تر از متد inputChangedHandler یک متد دیگر به نام deleteCharHandler می سازیم:

Index همان index کاراکتر ما در آرایه ای است که جدیدا ساختیم. از آنجایی که این اتفاق باید زمانی روی بدهد که روی یکی از کاراکترها کلیک می شود به یک event کلیک نیاز داریم بنابراین به لیست <Char /> ها می رویم و این Event را اضافه می کنیم:

می توانیم برای خواناتر شدن کد آن را بشکنیم:

تفاوتی ندارد.

حالا به Char.js می رویم و قسمت JSX را تغییر می دهیم:

با این کار clicked را به آن پاس داده ایم.

حالا باید متد deleteCharHandler را بنویسیم. از آنجایی که متن وارد شده در input آرایه نیست باید آن را تبدیل به یک آرایه کنیم که با همان متد split قابل انجام است:

باید یکی از آن ها را با متد splice حذف کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید