آموزش React مقدماتی قسمت چهارم: Multiple Components

قسمت ها

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

در این قسمت ما با استفاده از این مثال ادامه خواهیم داد. تاکنون همه موارد به کامپوننت App اضافه شده است. اکنون برنامه React را کمی refactor کرده و از چندین کامپوننت برای ساختار بهتر کد استفاده خواهیم کرد.

افزودن یک کامپوننت CoursesList مجزا

بیایید از فایل src/App.js شروع کنیم تا کدی را که برای تکرار از طریق لیست و دوره ها مورد نیاز است استخراج کنیم و خروجی HTML مربوطه را در یک component جداگانه به نام CoursesList تولید کنیم:

مجدداً ما این کامپوننت را به همان روشی که قبلاً با کامپوننت App انجام داده بودیم، اجرا می کنیم: به عنوان یک function ساده. توابع CoursesList فقط شامل یک عبارت بازگشتی است که حاوی کد JSX است که برای خروجی لیست دوره ها لازم است. کد خروجی همان است که قبلاً در کامپوننت App استفاده شده بود.

استفاده از کامپوننت CoursesList در کامپوننت App

کد کامپوننت App اکنون می تواند به کد زیر کاهش یابد:

در اینجا می توانید ببینید که خروجی کامپوننت CoursesList با استفاده از عنصر HTML در کد JSX به خروجی کامپوننت App اضافه می شود. با استفاده از آن، CoursesList به یک کامپوننت فرزند از کامپوننت App تبدیل می شود.

کد کامل داخل فایل App.js اکنون باید به شکل زیر باشد:

استفاده از فایل های جداگانه

تجزیه و تحلیل مجدد برنامه React به دو کامپوننت مجزا ساختار بیشتری را برایمان فراهم کرده است. با این وجود ما می توانیم با استفاده از فایل های جداگانه برای کامپوننت های خود، ساختار بیشتری را در پروژه ایجاد کنیم. یک فایل جدید src/CoursesList.js ایجاد کنید و کد کامپوننت CoursesList را به آن فایل جدید منتقل کنید:

اگر اکنون نگاه دقیق تری به پیاده سازی CoursesList بیندازید، چند تفاوت پیدا خواهید کرد:

  • تابع CoursesList اکنون دارای پارامتر props جدیدی است.
  • در داخل بدنه function، ما از شی props استفاده می کنیم تا با استفاده از props.courses به لیست دوره های خود دسترسی پیدا کنیم.

دلیل این تغییرات کاملاً واضح است. آرایه دوره ها در فایل App.js تعریف شده است، بنابراین برای اینکه در CoursesList.js در دسترس باشد، ما باید آرایه دوره ها را از طریق ویژگی component پاس بدهیم. برای دستیابی به خصوصیات کامپوننت باید یک پارامتر برای تابع تعریف کنیم.

برای پاس دادن ویژگی courses، باید در App.js نیز تغییری ایجاد کنیم:

عنصری که برای درج خروجی کامپوننت CoursesList استفاده می شود، گسترش یافته تا حاوی ویژگی courses باشد. مقدار این ویژگی روی عبارت {courses} تنظیم می شود، بنابراین محتوای آرایه courses به آن اختصاص می یابد. با استفاده از آن syntax می توانیم از طریق props.courses به آرایه دوره های درون کامپوننت CoursesList دسترسی پیدا کنیم.

در قسمت بعد خواهید خواند

در قسمت بعدی، ما می خواهیم با معرفی arrow function ها و destructuring syntax در جاوا اسکریپت، برنامه React مان را refactor کنیم و با این کار به ساده سازی کدمان ادامه می دهیم و می آموزیم که چگونه یک برنامه مدرن React را توسعه دهیم.

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: