# ساختارهای پیچیده با widgetها
تا این‌جا با widget و action به صورت تکی و لیستی آشنا شده‌ی. همون‌جور که در پاسخ تمرین قبلی دیدی برای ساخت یه UI در دیوار ممکنه چیزهای زیادی نیاز باشه ولی ما برای سادگی کنارشون گذاشتیم. ولی الآن وقتشه سراغشون بریم.
اگر به response بخش پیش دقت کنی action بعضی از widgetها یه widget_list داره. وقتی کاربر روی اون click میکنه یه modal باز می‌شه ویا به یه صفحه‌ای می‌ریم که بدون فرستادن درخواست و با استفاده از widget_list محتواش رو نشون می‌دیم.
در ادامه‌ی بخش لیست widgetها، actionها رو هم پیاده‌سازی کن.
به این آدرس درخواست GET بفرست:
https://localhost:3000/api/v1/widgets/actions
تعریف LOAD_PAGE اینه که با click روی widget یه modal باز می‌شه و با استفاده از widget_list محتوای اون پر می‌شه.
# Coding style
برای مرتب‌سازی کد از ابزارهایی استفاده می‌شه. این ابزارها بر اساس قوانینی کد رو مرتب می‌کنند و در صورت رعایت نکردنشون خطا یا هشدار نشون می‌دن. رعایت این قوانین باعث خوانایی بهتر کد و consistency پروژه می‌شه.
eslint رو نصب کن و از تنظیمات recommended و airbnb استفاده کن.
همچنین برای همه کامپوننت‌های ری‌اکت که مینویسی حتما propType هم بنویس تا معلوم باشه هر کامپوننت نیاز به چه فیلدهایی داره.
# ری‌اکت Router
با توجه به اینکه نشون دادن کانتن با توجه به url و تصمیم‌گیری اون در سمت کلاینت میتونه به مرور و برای لینک‌های داینامیک پیچیده بشه، از پکیج آماده‌ی react-router استفاده میکنیم که انواع مرورگرها رو میتونه ساپورت کنه.لینک‌های زیر رو از مستندات react-router بخون:
و همه مثال‌هایی که تو همون سایت آورده شده رو یه نگاه بنداز تا کامل یاد بگیری چجوری کار میکنه.
در ادامه میخوایم این پکیج رو به پروژه اضافه کنیم. خود create-react-app توضیحات خوبی برای اضافه کردن router بهمون میده: لینک