اموزش ری اکت جی اس ( ReactJS ) – آشنایی با Fragments

اموزش های دوره یی و پروژه محور ری اکت جی اس

اموزش پایه یی – بخش چهاردم

پیش نیاز ها:

آموزش نصب و راه اندازی ری اکت جی اس

ساخت اولین برنامه ری اکت جی اس hello world

آشنایی با کامپوننت ها در ری اکت

اشنایی با props

اشنایی با JSX

آشنایی با state و setState

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

این ویژگی برای راحت تر شدن بیشتر کار با ری اکت جی اس می باشد.

خوب، اما این فرگمنت چیست ؟  بهترین توضیح این بخش را خود فیسبوک داده است را می توانیم استفاده کنیم. فرگمنت به شما اجازه می دهد تا یک گروه، لیستی از زیر مجموعه های مختلف را بدون اضافه کردن نودهای مختلف به DOM  بسازید.

اگر قبلا DOM را توضیح نداده باشیم بهتر است بدانیم DOM چیست؟جاوا اسکریپت برای دسترسی به عناصر صفحه از یک مدل به نام DOM استفاده می کند که مخفف کلمات Document Object Model می باشد.

بهترین توصیف برای این مدل تصویر زیر می باشد.

مدل DOM یک ساختار درختی از المان ها، خواص و…. موجود در یک صفحه می باشد که به هنگام بارگذاری یک صفحه ایجاد می شود.

و از طریق این مدل جاوا اسکریپت می تواند تغییرات را به صورت پویا در صفحه اجرا کند به طور مثال متنی را تغییر دهید یا یک بخشی با کلیک بر روی متن دیگر غیر فعال شود و ….

اما باز گردیم به فرگمنت در ری اکت جی اس. برای مثال استفاده از فرگمنت می توانید حالت زیر را در نظر بگیرید :

<React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
</React.Fragment> 

برای درک بهتر فرگمنت ها بهتر است این ویدئو را مشاهده نمایید

مدت زمان : 9 دقیقه