ری اکت چیست و چه کاربردی دارد؟ – به زبان ساده

ری اکت چیست؟

فرض کنید که در حال گشت و گذار در فیسبوک هستید و پس از لایک کردن پستی جالب، به خواندن کامنت‌های آن مشغول می‌شوید. در همین زمان متوجه می‌شوید که شمارنده مربوط به تعداد لایک‌ها هم افزایش پیدا می‌کند. در این‌گونه مواقع ممکن است این موضوع فکر شما را مشغول کرده باشد که چگونه بدون بارگذاری مجدد کل صفحه، تنها بخشی از آن - مانند شمارنده لایک‌ها و غیره - می‌توانند به‌روزرسانی شوند. همین مثال ساده، به شما می‌گوید که عملکرد و وظیفه ری اکت چیست.

یکی از خصوصیات ری‌اکت را می‌توان مبتنی بودن آن بر «کامپوننت‌ها» (Component) دانست. در این معماری، توسعه‌دهنده می‌تواند عناصر UI مستقلی را ایجاد کند که در مکان‌های مختلف برنامه و به دفعات قابل استفاده هستند. درست مانند بلوک‌های خانه‌سازی یا همان قطعات LEGO که آن‌ها را با هدف ساخت چیزهایی بزرگ‌تر و معنادار در کنار هم قرار می‌دهیم، با کامپوننت‌های ری‌اکت نیز می‌توانیم وب‌اپلیکیشن‌های مدرن، ریسپانسیو و جذابی را ایجاد کنیم که البته، فرایند نگهداری ساده‌تری هم دارند.

فیلم راهنمای یادگیری ری‌اکت در فرادرس

کلیک کنید

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

در تصویر زیر برخی از کاربردهای ری‌اکت را مشاهده می‌کنید.

نقش ری اکت در MVC

در معماری MVC یا «مدل-نما-کنترل‌گر»، ری اکت را می‌توان به عنوان ابزاری برای توسعه بخش «نما» (View) در اپلیکیشن در نظر گرفت. یعنی قسمتی از این الگوی طراحی نرم‌افزار که به نمایش رابط کاربری و تعاملات کاربر با اپلیکیشن رسیدگی می‌کند. استفاده از ری‌اکت در MVC مزیت‌‌هایی مانند آنچه در ادامه فهرست شده را برایمان به‌همراه دارد.

• مدیریت بهتر رابط کاربری
• نگهداری آسان‌تر اپلیکیشن به این دلیل که بخش‌‌های مختلف اپلیکیشن از هم جدا شده‌اند.
• بهبود استفاده مجدد از کامپوننت‌ها در اپلیکیشن

پیش نیازهای یادگیری ری اکت چیست؟

پیش از اینکه منابع مناسب برای یادگیری ری‌اکت را به شما معرفی کنیم، خوب است که با پیش‌نیازهای یادگیری این کتابخانه نیز آشنا باشید.

• HTML و CSS: برای یادگیری این زبان‌ها می‌توانید از فیلم آموزش پروژه‌محور HTML و CSS از فرادرس که لینک آن در ادامه آورده شده، استفاده کنید.

• جاوا اسکریپت و ES6: برای یادگیری این زبان‌ها می‌توانید از فیلم آموزش JavaScript ES6 از فرادرس که لینک آن در ادامه آورده شده، استفاده کنید.

فیلم آموزش JavaScript ES6 در فرادرس

کلیک کنید

• نود جی اس: برای یادگیری نود جی اس می‌توانید از فیلم آموزش مقدماتی Node.js از فرادرس که لینک آن در ادامه آورده شده، استفاده کنید.

یادگیری ری اکت با فرادرس چگونه است؟

در ادامه، عناوین برخی از فیلم‌های آموزشی موجود در این مجموعه را فهرست کرده‌ایم.

• مشاهده فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت، ضمن معرفی و آشنا کردن شما با کتابخانه ری‌اکت و مفاهیم کاربردی ES6، مواردی همچون نصب و راه‌اندازی ابزارها، ساخت نخستین پروژه، معرفی کامپوننت‌ها در ری اکت و استفاده از آن‌ها، فرم‌ها، Context API، هوک‌ها را به شما یاد می‌دهد و در آخر نیز یک پروژه را پیاده‌سازی می‌کند.

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

• فیلم آموزش پروژه‌محور ری اکت جی اس، طراحی وب اپلیکیشن پیشرو PWA با React.js از فرادرس
• فیلم آموزش پروژه‌محور ری اکت جی اس، ساخت To-Do List حرفه ای با React.js از فرادرس
• فیلم آموزش پروژه‌ محور ری اکت جی اس، استفاده از هوک ها Hook در React.JS از فرادرس

ری اکت چه کاری انجام می دهد؟

در این قسمت، به شما توضیح می‌دهیم که ری‌اکت چگونه یکی از مشکلات رایج در وب‌سایت‌ها را حل می‌کند.

فیلم آموزش React و نکات کاربردی در فرادرس

کلیک کنید

روش سنتی

در واقع، برای مشاهده هر صفحه‌‌ای از وب‌سایت مورد نظر یا دسترسی به هر مؤلفه‌ای همچون تصاویر و غیره که روی سایت وجود دارد و قصد باز کردن آن را دارید، این روال درخواست و پاسخ به دفعات بین کلاینت که همان مرورگر شما است و سرور، انجام می‌شود. این شیوه بارگذاری وب‌سایت، با اینکه کاربر را به هدف خود می‌رساند اما گاهی اوقات ممکن است روی تجربه‌ای که از بازدید وب‌سایت شما پیدا می‌کند تأثیر منفی بگذارد. برای مثال، فرض کنید که وب‌سایت شما، اپلیکیشنی مانند یک فروشگاه اینترنتی بزرگ است و با داده‌های بسیار زیادی سر و کار دارد که می‌بایست به دفعات به‌روزرسانی شوند. در این حالت، شیوه‌ای که بیان شد ممکن است کارایی خوبی نداشته باشد و تعداد بارگذاری بیش از حد صفحه وب برای به‌روزرسانی داده‌ها، تجربه کاربری نامناسبی را ایجاد کند.

راهکار ری اکت

DOM اصلی

همان‌طور که می‌دانید «مدل شی سند» که به اختصار DOM هم خوانده می‌شود یک ساختار درختی از اسناد HTML ایجاد می‌کند که هر گره از این درخت در واقع به بخشی از صفحه وب ما اشاره دارد. پس از بارگذاری صفحه و ساخته شدن این رابط، می‌توان با استفاده از جاوا اسکریپت عناصر صفحه را به لحاظ ساختاری، استایل و محتوا تغییر داد. همچنین می‌توان رویدادهای موجود را مدیریت کرد. به زبان ساده از این طریق می‌توان صفحات وب داینامیک ساخت که محتوای آن بر حسب نیاز کاربر می‌تواند تغییر کند. برای اینکه اطلاعات بیشتری را در مورد DOM به‌دست بیاورید، پیشنهاد می‌کنیم تا مطلبی که لینک آن در ادامه آورده شده را مطالعه کنید.

DOM مجازی

DOM مجازی بر خلاف DOM اصلی که بیان‌گر ساختار واقعی موجود در UI اپلیکیشن است، نسخه‌ای است که در حافظه نگه داشته می‌شود و به‌همین دلیل، مجازی نام گرفته است. ری‌اکت با استفاده از DOM مجازی و مقایسه آن با DOM اصلی، تغییرات صورت گرفته را پیدا کرده و به‌جای اینکه مانند شیوه سنتی، کل صفحه را مجدد بارگذاری کند، تنها مواردی که تغییر کرده‌اند را بازیابی و به‌روزرسانی می‌کند.

به زبان ساده یعنی، به‌جای اینکه کاربر منتظر بارگذاری کل صفحه و تولید DOM اصلی بماند، تنها تغییرات موجود در DOM مجازی روی DOM اصلی صفحه اعمال می‌شود و تنها مواردی تغییر کرده‌اند - یا به اصطلاح State آن‌ها عوض شده - رندر می‌شوند. بدین‌ترتیب، بازدید کننده، خیلی سریع شاهد تغییرات رابط کاربری و کامپوننت‌های صفحه خواهد بود. با مطالعه مطلبی که لینک آن در ادامه آورده شده است، اطلاعات مفیدی را در مورد DOM مجازی به‌دست خواهید آورد.

ویژگی های ری اکت چیست؟

• فرایند ساخت اپلیکیشن‌های داینامیک را ساده می‌سازد. استفاده از جاوا اسکریپت در ساخت اپلیکیشن‌های داینامیک ممکن است شما را خیلی سریع با کدهای حجیم و پیچیده مواجه کند. اما ری‌اکت به‌دلیل نیاز به کدنویسی کمتر و امکانات بیشتری که فراهم می‌کند باعث ساده‌تر شدن فرایند ساخت وب اپلیکیشن‌ها می‌شود.
• کارایی بهتری ارائه می‌دهد. کتابخانه ری‌اکت از مفهومی به‌نام DOM مجازی استفاده می‌کند. طرز کار آن به این شکل است که وضعیت پیشین کامپوننت‌ها را بررسی کرده و تنها، مواردی را در DOM اصلی به‌روزرسانی می‌کند که دچار تغییر وضعیت شده‌اند. می‌توان گفت که استفاده از رویکرد DOM مجازی باعث می‌شود تا سرعت توسعه وب‌اپلیکیشن بیشتر شود. به این دلیل که دیگر لازم نیست مانند آنچه در وب‌اپلیکیشن‌های سنتی اتفاق می‌افتد، تمامی کامپوننت‌ها مجدد به‌روزرسانی شوند.
• ری اکت دارای کامپوننت‌هایی است که به دفعات قابل استفاده هستند. برنامه‌هایی که با ری‌اکت توسعه می‌دهیم از مؤلفه‌هایی تشکیل شده‌اند که آن‌ها را کامپوننت می‌نامند. هر یک از این کامپوننت‌ها نماینده یک عنصر UI در برنامه ما هستند که می‌توان آن‌ها را به دفعات مورد استفاده قرار داد. به‌طور مثال، یک دکمه در برنامه می‌تواند یک کامپوننت باشد که دارای مجموعه‌ای از خصوصیات است. در واقع یک صفحه وب را می‌توان به کامپوننت‌های مختلفی تقسیم کرد. کامپوننت‌ها را می‌توان در جای‌جای برنامه، مجدد استفاده کرد و این مورد باعث می‌شود تا زمانی که صرف ساخت اپلیکیشن می‌شود، به‌میزان قابل توجهی کاهش پیدا کند.
• یادگیری React به‌نسبت آسان است. ری‌اکت دارای مفاهیم به‌نسبت ساده‌ای از جمله مباحث اصلی HTML و جاوا اسکریپت است. به‌همین دلیل می‌توان آن را به‌‌آسانی و با انتخاب یک منبع مناسب یاد گرفت. اما این نکته را نیز مدنظر داشته باشید که برای تسلط به هر زبان و فریمورک یا کتابخانه جدیدی، لازم است تا مدتی را صرف یادگیری مفاهیم و نحوه استفاده از آن کنید.
• ابزارهای مخصوصی دارد که دیباگ برنامه را ساده‌تر می‌کند. یافتن خطاهای برنامه و رفع آن‌ها یا به اصطلاح دیباگ کردن یکی از مسائل مهم در ساخت اپلیکیشن محسوب می‌شود. خبر خوب این است که اگر از کروم استفاده کنید افزونه‌ای برای آن وجود دارد که ضمن تسریع عمل دیباگ وب اپلیکیشن‌ها، این فرایند را آسان‌تر می‌کند.
• ری‌اکت در حوزه‌های گوناگونی نظیر ساخت اپ‌های موبایل و همچنین، وب‌اپلیکیشن‌ها قابل استفاده است. حوزه توسعه اپلیکیشن با ری‌‌اکت تنها به وب محدود نمی‌شود و شما می‌توانید با فریمورکی به‌نام React Native که بر مبنای همین کتابخانه ساخته شده، اپلیکیشن‌های موبایلی هم توسعه دهید. بنابراین می‌‌توان گفت که ری‌اکت هم برای ساخت وب‌سایت‌ها و هم برای توسعه اپلیکیشن برای دستگاه‌های اندرویدی و iOS می‌تواند گزینه مناسبی باشد.

در تصویر زیر برخی دیگر از خصوصیات ری‌اکت جی‌اس را مشاهده می‌کنید.

مواردی که توضیح داده شد، بخشی از ویژگی‌های ری‌اکت محسوب می‌شوند که در واقع، اهمیت یادگیری این کتابخانه را بیان می‌کنند.

جریان داده های یک طرفه در ری اکت چیست؟

برای درک این ویژگی، نخست باید بدانید که در ساخت برنامه‌های ری‌اکت می‌توانیم کامپوننت‌های «تو در تو» (Nested) داشته باشیم که در واقع چیزی نیستند جز، کامپوننت‌هایی که درون کامپوننت های دیگر تعریف شده‌اند. در واقع هر کامپوننت درونی نیز می‌تواند فرزندهای خود را داشته باشد و خود، فرزند کامپوننت بیرونی محسوب می‌شود. وقتی که می‌گوییم داده‌ها در ری‌اکت به‌صورت یک‌طرفه یا به اصطلاح «Unidirectional» جریان پیدا می‌کنند منظورمان این است که داده‌ها برای انتقال از یک بخش یا کامپوننتی از برنامه به بخش یا کامپوننتی دیگر، تنها یک راه پیشِ روی خود دارند که آن راه از سمت والد به سمت فرزند است. در برنامه‌های ری‌اکت که کامپوننت‌ها را به‌صورت تو در تو و سلسله‌مراتبی - یعنی کامپوننت فرزند درون کامپوننت والد - ایجاد می‌کنیم، این تکنیک به ما کمک می‌کند تا مشکلات احتمالی در برنامه را راحت‌‌تر شناسایی و رفع کنیم.

کامپوننت در ری اکت چیست؟

کمی پیش‌تر راجع به قطعات اسباب‌بازی خانه‌سازی یا همان بلوک‌های LEGO صحبت کردیم. به‌طور معمول، برنامه‌های ری‌اکت را در قالب قطعه کدها یا همان کامپوننت‌ها می‌نویسند که بی‌شباهت به این قطعات LEGO نیستند. از این لحاظ که شما می‌توانید این مؤلفه‌ها را در سراسر اپلیکیشن خود، یعنی در جایی که نیاز باشد، به‌طور مجدد استفاده کنید و ترکیب آن‌ها UI اپلیکیشن شما را شکل می‌دهد. با این مؤلفه‌ها در واقع، تعیین می‌کنید که آن بخش از اپلیکیشن به چه صورتی نشان داده شود یا اینکه چه عملکردی داشته باشد. برای درک بهتر کامپوننت‌ها، دکمه‌ای با پس‌زمینه آبی رنگ و متن سفید رنگ را در صفحه وب خود تصور کنید که با کلیک روی آن رنگ پس‌زمینه صفحه عوض می‌شود. در این‌جا دکمه به‌عنوان یک کامپوننت، هم خصوصیات خود را دارد و هم، عملکرد مشخصی را ارائه می‌دهد.

فیلم آموزش ReactJS با Tailwind CSS در فرادرس

کلیک کنید

کامپوننت‌هایی که در ری‌اکت می‌سازیم دارای کد، ساختار و استایل مخصوص به خود هستند که درون بدنه آن محصور شده‌اند و آن را به مؤلفه‌ای مستقل تبدیل می‌کنند. همین ویژگی باعث می‌شود تا بتوان آن‌‌ها را دوباره در برنامه استفاده کرد. به این صورت که می‌توانید کتابخانه‌ای از این کامپوننت‌ها ساخته و در مواقع لزوم، خود یا دیگران با دسترسی به آن، کامپوننت‌ها را در پروژه‌های گوناگون به‌کار ببرید. درست مانند همان قطعات LEGO که می‌توانند در شکل دادن به اشیا مختلف - یا پروژه‌های دیگر - استفاده شوند.

با طی کردن این مراحل، کامپوننتی خواهیم داشت که برای استفاده در اپلیکیشن آماده است. ضمن اینکه می‌توانید آن را در اختیار سایر افراد برای استفاده در پروژه‌های گوناگون نیز قرار دهید. با تشبیهی که در بالا صورت گرفت، اکنون می‌دانید که ری‌اکت چگونه در توسعه اپلیکیشن‌های پیشرفته می‌تواند مفید باشد و این فرایند را برایتان تسهیل کند. درواقع ری‌اکت این امکان را فراهم کرده که اپلیکیشن خود را به‌صورت ماژولار ایجاد کنیم.

مثالی برای درک بهتر کامپوننت

برای اینکه درک بهتری از کامپوننت‌ها در عمل پیدا کنید، یک مثال را با هم بررسی می‌کنیم. فرض کنید قرار است یک وب‌اپلیکیشن شبکه اجتماعی بسازیم. در این‌صورت کامپوننت‌های ما می‌توانند شامل مواردی باشند که در ادامه فهرست کرده‌ایم.

• کامپوننت «Header» یا بخش بالایی صفحه: ‌این کامپوننت، بیان‌گر هِدِر یا ناحیه بالای وب‌سایت ما است. یعنی جایی که مواردی مانند نام و لوگوی سایت ما، گزینه‌ها و لینک‌های که نشان دهنده منوی سایت هستند، نوار جست و جو و غیره را در بر می‌گیرد.
• کامپوننت «نمای» (Profile) کاربری: قطعه یا کامپوننت بعدی، اطلاعات یا پروفایل کاربر را نشان می‌دهد و می‌تواند شامل مواردی مانند عکس پروفایل، نام کاربر، معرفی کوتاه کاربر و غیره باشد.
• کامپوننت پست (Post) یا محتوا: این کامپوننت، محلی است که پست کاربر را نشان می‌دهد و مؤلفه‌هایی مانند عنوان پست، محتوای متنی یا تصویری، نظرات، لایک‌ها، بازدیدها و غیره را ممکن است درون خود داشته باشد.
• کامپوننت «نظرات» (Comment): در این قطعه، کامنت‌ها یا همان نظرات کاربر روی یک پست را می‌توان دید. این قسمت نیز می‌تواند متشکل از نام نویسنده نظر، متن نظر و غیره باشد.
• کامپوننت (Footer) یا بخش پایینی صفحه: در آخر نیز کامپوننت Footer را داریم که به‌طور معمول مواردی مانند متن مربوط به کپی‌رایت، برخی لینک‌ها و موارد این‌چنینی را می‌تواند در بر بگیرد.

هر یک از این موارد را می‌توانیم یک قطعه LEGO در نظر بگیریم که روی هم چیده شده‌اند و در نهایت، UI اپلیکیشن را تشکیل می‌دهند.

انواع کامپوننت در ری اکت چیست؟

از انواع Component-های ری اکت می‌توان به «کامپوننت های تابعی» (Functional Components) و «کامپوننت‌های کلاسی» (Class Components) اشاره کرد که در ادامه، هر یک را توضیح و خصوصیات آن را شرح داده‌ایم.

کامپوننت های تابعی

از مزیت‌های کامپوننت‌های تابعی می‌توان به مواردی اشاره کرد که در ادامه آورده‌ایم.

• به لحاظ قواعد نوشتاری و همچنین عدم استفاده از کلمه کلیدی همچون this ، می‌توان گفت که سینتکس کامپوننت‌های تابعی، ساده‌تر از کامپوننت‌های کلاسی است.
• ضمن اینکه تست و دیباگ این نوع کامپوننت‌ها هم به‌دلیل کدنویسی کمتر آن نسبت به کامپوننت‌های کلاسی، آسان‌تر است.

معایب این نوع کامپوننت‌ها را نیز در ادامه بیان کرده‌ایم.

• همان‌طور که گفته شده کامپوننت های تابعی فاقد وضعیت داخلی هستند و برای مدیریت یا همان نگهداری «وضعیت»، ناچار به استفاده از Hook-ها هستیم.
• در این نوع کامپوننت‌ها نمی‌توانید از متدهای مربوط به چرخه حیات کامپوننت‌ها استفاده کنید. لازم به یادآوری است که در ری‌اکت، کامپوننت‌ها دارای چرخه عمری شامل ۳ مرحله «ورود کامپوننت» (Mounting) به DOM، «به‌روزرسانی کامپوننت» (Updating) و «حذف کامپوننت» (Unmounting) هستند که شما می‌‌توانید کارهای مدنظر خود را در این مراحل انجام دهید.
• انتخاب مناسبی برای ساخت رابط‌های کاربری نه چندان پیچیده محسوب می‌شود.

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

در ادامه، مثالی از تعریف کامپوننت تابعی آورده‌ایم.

این کامپوننت جدید، Carنام دارد که براساس قواعد، حرف اول نام آن نیز با حروف بزرگ نوشته شده است. دستورات HTML مورد نظر را نیز با return می‌توانیم برگردانیم.

کامپوننت های کلاسی

مزیت‌هایی که با استفاده از کامپوننت‌های کلاسی از آن بهره‌مند خواهیم شد را در ادامه فهرست کرده‌ایم.

• همان‌طور که گفته شد این نوع کامپوننت‌ها می‌توانند وضعیت را حفظ کنند و به کمک این ویژگی می‌توانیم کامپوننت با توجه به وضعیتی که دارد، بهتر مدیریت کرده و تغییرات لازم را در آن به‌وجود آوریم. برای درک بهتر، مثال می‌زنیم. فرض کنید دکمه‌ای داریم که قرار است با هر بار کلیک روی آن، رنگ پس‌زمینه کامپوننت دیگری در صفحه به میزان چند درجه تیره‌تر شود. برای این منظور می‌توان از کامپوننت کلاسی استفاده کرد و از وضعیت داخلی کامپوننتی که قرار است رنگ آن تغییر کند کمک گرفت. بدیهی است که در این مثال، مقدار رنگ پس‌زمینه فعلی، در وضعیت کامپوننت نگه‌داری می‌شود.
• در صورتی که قصد ایجاد کامپوننت‌های پیچیده، نظیر مواردی با وضعیت‌های پیچیده‌تر و پویاتر، را داشته باشید، می‌توانید روی این روش ساخت کامپوننت حساب کنید.

مزیت‌‌های کامپوننت‌های کلاسی را نیز می‌توان به شکل زیر بیان کرد.

• علی‌رغم توانمندی بیشتر، کامپوننت‌های کلاسی نیازمند کدنویسی بیشتری نسبت به کامپوننت‌های تابعی هستند. این مورد باعث پیچیدگی بیشتر این نوع کامپوننت‌ها شده است و یافتن خطاها و نگهداری آن‌ها را نیز سخت‌تر می‌کند.
• به‌کارگیری کلمه کلیدی this مورد دیگری است که باعث پیچیدگی و سختی کدهای کامپوننت‌های کلاسی می‌شود.
• پیچیدگی‌هایی که بیان شد در کل باعث سخت‌تر شدن فرایند دیباگ‌ و تست این نوع کلاس‌ها می‌شود.

اکنون که با شیوه‌های نوشتن کامپوننت‌‌ها در ری‌اکت آشنا شده‌اید لازم است بگوییم که کامپوننت‌های تابعی به دلیل سادگی بیشتری که فراهم کرده‌اند، طرفداران بیشتری نیز دارند و کمبودهای آن را نیز می‌توان با به‌کارگیری هوک‌ها تا حدی جبران کرد. البته به این معنی نیست که کامپوننت‌های کلاسی به کل، کنار گذاشته شده باشند. می‌توان از آن‌ها نیز در پروژه خود استفاده کرد. به‌طور خلاصه می‌توان گفت که برای ایجاد اپلیکیشن‌های ساده بهتر است از کامپوننت‌های تابعی استفاده کنیم و در مواردی که اپلیکیشن ما بزرگ‌تر و پیشرفته‌تر است، به‌دنبال استفاده از کامپوننت‌های کلاسی باشیم که توانایی نگهداری از State-های متعدد را دارند.

کدهای ساخت کامپوننت های کلاسی در ری اکت

در ادامه، مثالی از تعریف کامپوننت آورده‌ایم.

این نوع کامپوننت‌ها دارای دستور extends React.Component در تعریف خود هستند. این دستور باعث می‌شود تا کامپوننت ما با ارث‌بری از React.Component ، امکان استفاده از توابع ارزشمند موجود در آن را داشته باشد. در این نوع کامپوننت، متد render() را نیز داریم که دستورات HTML مورد نظر را بر می‌گرداند.

Props در ری اکت چیست؟

در این قسمت به شما می‌گوییم که چگونه می‌توان در ری‌اکت کامپوننتی ساخت که ظاهر و عملکردهای متفاوتی داشته باشد.

اگر ماژول‌ها یا همان قطعات LEGO را دیده باشید، روی آنها برجستگی‌ها و در زیر آن‌‌ها فرورفتگی‌‌هایی وجود دارد که برای اتصال راحت‌تر این قطعات به یکدیگر، تعبیه شده‌اند. این اتصالات به ما امکان می‌دهند تا با کنار هم قرار دادن قطعات بتوانیم اجسام گوناگون و بزرگ‌تری را بسازیم. همین قضیه در مورد کامپوننت‌های ری‌کت هم وجود دارد. در واقع، کامپوننت‌های ری اکت به واسطه پارامترهایی به‌نام «Props» یا همان «خصوصیات» (Properties)، به‌هم متصل شده و به تبادل اطلاعات می‌پردازند. به‌وسیله همین پراپس‌ها است که می‌توانید کامپوننت‌ها را طبق نظر و سلیقه خود تغییر دهید و انواع گوناگونی از آن‌ها را بسازید.

پس، با ارسال Props-های مختلف می‌توانیم کامپوننت‌هایی داشته باشیم که عملکردهای مختلف یا ظاهر گوناگونی داشته باشند. تا این قسمت، دانستید که نحوه تبادل اطلاعات در کامپوننت‌های ری اکت چیست و چگونه پراپس‌ها ما را در ساخت اپلیکیشن‌های منعطف و دلخواه در ری‌اکت یاری می‌دهند.

کلید در ری اکت چیست؟

هنگام توسعه برنامه با ری‌اکت گاهی اوقات لازم است تا کامپوننت‌هایی به‌صورت مرتب و دوره‌ای تولید شوند. به‌طور مثال، برنامه‌ای ساخته‌ایم تا فهرستی شامل وظایف یک فرد و تسک‌های قابل انجام او را نشان دهد. در این‌گونه مواقع استفاده و تعریف «کلیدها» (Keys) اهمیت زیادی پیدا می‌‌کند با مشخص کردن کلید در ری‌اکت، هویت هر یک از آیتم‌های لیست حفظ می‌شود. در واقع می‌توان گفت که اگر برای لیستی از کامپوننت‌ها، خصوصیت «کلید» را برای هر کامپوننت مشخص کرده باشیم، آن‌ها یکتا بودن خود را حفظ کرده و پس از تغییر اضافه یا حذف شدن هم قابل شناسایی خواهند بود. به مثال خود باز می‌گردیم، فرض کنید کاربر پس از اتمام تسک مورد نظر روی دکمه «انجام شد» کلیک می‌کند و قرار است آن مورد حذف شود. چون به آن کامپوننت کلید یکتایی اختصاص داده‌ایم. اکنون می‌توانیم عمل مورد نظر خود - یا حذف کردن - را روی آن کامپوننت خاص اعمال کنیم. به این دلیل که تمامی کامپوننت‌ها قابل شناسایی هستند.

وضعیت در ری اکت چیست؟

در پاسخ به اینکه وضعیت یا «حالت» (State) در ری اکت چیست، باید بگوییم که می‌توان آن را یک شی ری‌اکت دانست که برای نگه داشتن داده‌ها و اطلاعات مربوط به کامپوننت مورد استفاده قرار می‌گیرد. مثال تعداد لایک‌های یک پست در فیسبوک که در ابتدای مطلب بیان شد را به خاطر بیاورید. هنگامی که پستی را لایک می‌کنید مقدار یا به بیان دیگر، وضعیت آن تغییر می‌کند و می‌بایست دوباره تولید یا به اصطلاح رندر شود. در این مثال، تعامل کاربر باعث تغییر وضعیت لایک و عملکرد کامپوننت آن شده است اما ممکن است سایر رویدادها نیز در این مورد نقش داشته باشند.

معروف ترین برنامه های ساخته شده با ری اکت چیست؟

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

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

• شبکه اجتماعی فیسبوک: در ساخت فرانت‌اند وب‌سایت فیسبوک از ری‌اکت جی اس استفاده شده است. ضمن اینکه برای اپلیکیشن موبایل آن نیز از ری‌اکت نیتیو بهره گرفته‌اند. از نکات مثبتی که ری‌اکت در این اپلیکیشن ایجاد کرده می‌توان به این مورد اشاره کرد که محتوا و فید‌های کاربر به‌صورت آنی به‌روزرسانی می‌شود و برای این منظور، نیازی به بارگذاری مجدد صفحه نیست.
• پینترست: پلتفرم Pinterest، شبکه اجتماعی دیگری است که شهرت زیادی دارد و در ساخت آن از کتابخانه ری‌اکت استفاده شده است. در «دیزاین سیستم Gestalt» پینترست، کامپوننت‌های مرتبط با وب اپلیکیشن ری‌اکتی این محصول و همچنین اپ‌های موبایلی React Native مربوط به پلتفرم‌های اندروید و iOS آن نیز وجود دارد. در پینترست، شما می‌توانید توانمندی‌ها و کارایی حیرت‌انگیز ری‌اکت را در ساخت وب‌اپلیکیشن SPA به‌طور کامل حس کنید. این سیستم برای نمایش محتوا از «بارگذاری تدریجی» (Lazy Loading) استفاده می‌کند و قابلیت اسکرول بی‌پایانی را برای نمایش محتوای عکس و ویدیو با سرعت بسیار مناسب به کاربر خود عرضه می‌کند.
• اینستاگرام: اینستاگرام نیازی به معرفی ندارد و شاید جز مشهورترین مثال‌‌های استفاده از ری‌اکت در توسعه اپلیکیشن‌ها باشد. این برنامه که جزو محصولات شرکت متا محسوب می‌شود، در اپلیکیشن خود از ری‌اکت استفاده کرده است تا از این طریق تجربه خوبی را برای کاربران خود رقم بزند. ری‌اکت به‌عنوان کتابخانه اصلی برای توسعه اینستاگرام انتخاب شده است و بسیاری از خصوصیات برجسته این پلتفرم نظیر تعیین موقعیت جغرافیایی، تگ کردن تصاویر و محتوا، API-های گوگل‌مپ و مهم‌تر از همه، بهینه‌سازی موتور جست و جوی اینستاگرام از آن استفاده کرده‌اند.
• واتساپ: اپلیکیشن معروف دیگری که در آن از تکنولوژی ری‌اکت استفاده شده، WhatsApp است که به احتمال زیاد، ارسال پیام‌های متنی یا چندرسانه‌ای را از طریق آن به دوستان و آشنایان خود امتحان کرده باشید. رابط کاربری این اپلیکیشن پیام‌رسان با ری‌اکت ساخته شده است تا تجربه کاربری خوبی را برای بازدید کننده به‌دنبال داشته باشد.
• توییتر: کاربران توییتر، در اپلیکیشن آن می‌توانند پیام‌های کوتاهی را در حوزه‌های متنوع، ارسال کرده و به اشتراک بگذارند. همین مورد باعث شده تا به برنامه محبوبی برای اخبار فوری، بحث‌های عمومی و غیره تبدیل شود. ری‌اکت یکی از کتابخانه‌های مورد استفاده در ساخت این برنامه بوده است.

مزایا و معایب ری اکت چیست؟

اکنون که می‌دانید ری اکت چیست، وقت آن رسیده تا با مزیت‌ها و معایب این کتابخانه محبوب آشنا شوید.

فیلم آموزش React Router برای مسیریابی صفحات وب در فرادرس

کلیک کنید

در ادامه، به این موارد اشاره کرده‌ایم.

مزیت های React

برخی از مزیت‌هایی که به‌کارگیری ری‌اکت در توسعه اپلیکیشن‌ها برایمان به‌دنبال دارد را در ادامه بیان کرده‌ایم.

• برنامه‌های ری‌اکت از DOM مجازی جاوا اسکریپت استفاده می‌کنند. این مورد باعث می‌شود تا برنامه‌های کارآمدتری داشته باشیم نسبت به زمانی‌که از DOM اصلی سند استفاده می‌شود و در این‌گونه مواقع، اپلیکیشن، سرعت کمتری دارد.
• شما با کمک گرفتن از ری‌اکت می‌توانید برنامه‌هایی را توسعه دهید که به لحاظ رابط کاربری، بسیار زیبا و کاربرپسند هستند.
• توسعه اپلیکیشن‌های بزرگ و پیچیده با خصوصیاتی که توسط ری‌اکت فراهم شده ساده‌تر می‌شود. منظور، ویژگی‌های مانند خوانایی به‌نسبت خوب سورس‌کدهای آن، ماژولار بودن و غیره است.
• استفاده از ری‌اکت می‌تواند فرایند توسعه اپلیکیشن و برنامه‌نویسی را آسان‌تر کند.
• ری‌اکت، جامعه برنامه‌نویسان بزرگی دارد که هنگام رویارویی با مشکلات می‌توانید به آن مراجعه کنید.

معایب و محدودیت های React

علی‌رغم توانمندی‌های کتابخانه ری‌اکت در توسعه اپلیکیشن‌های مدرن و پیشرفته که UI بی‌نظیری هم دارند، اما باید اعتراف کرد که React در حالت عادی از دید موتورهای جست و جو بهینه‌سازی شاید سئوی خوبی نداشته باشد. به این دلیل که محتوا را در سمت کلاینت با جاوا اسکرپیت تولید یا به اصطلاح «رندر» می‌کند. اما با تکنیک‌هایی نظیر رندر کردن محتوا در سمت سرور می‌توان این مشکل را حل کرد. برای این‌منظور از تکنیک‌های خاصی و ابزارهایی مانند فریمورک Next.js استفاده می‌شود.

• در صورتی‌که قصد یادگیری این فریمورک را دارید، مشاهده فیلم آموزش مقدماتی فریم ورک Next.js در JavaScript برای طراحی و توسعه اپلیکیشن ها از فرادرس که لینک آن در ادامه آورده‌ شده می‌تواند برایتان سودمند باشد.

ادامه یادگیری ری اکت با فرادرس

اکنون، می‌دانید که ری اکت چیست و چه کاربردهایی دارد. همچنین با منابع مورد نیاز برای آموختن آن نیز آشنا شدید. حال اگر بخواهید مهارت خود را در این زمینه تقویت کنید، یکی از راه‌های آن مشاهده فیلم‌های آموزشی از فرادرس است که عناوین و لینک آن‌ها را در ادامه فهرست کرده‌ایم.

• فیلم آموزش ساخت انیمیشن در ری اکت جی اس، کتابخانه GSAP در React.JS از فرادرس
• فیلم آموزش ساخت میکروسرویس با Nodejs و React از فرادرس
• فیلم آموزش طراحی رابط کاربری با «متریال یو آی ری اکت» (Material UI React) از فرادرس
• فیلم آموزش پروژه‌محور ReactJS با فریم ورک Tailwind CSS از فرادرس

ضمن اینکه برای یادگیری ری‌اکت نیتیو نیز می‌توانید از فیلم‌‌های آموزشی فرادرس استفاده کنید که لینک آن‌ها را در ادامه آورده‌‌ایم.

• فیلم آموزش مقدماتی ری اکت نیتیو و طراحی نرم‌افزارهای اندروید و iOS در React Native از فرادرس
• فیلم آموزش پروژه‌محور ری اکت نیتیو، طراحی اپلیکیشن BMI در React Native از فرادرس

جمع‌بندی

در تدوین این نوشتار از مجله فرادرس، سعی بر این بوده تا به زبانی ساده به شما توضیح دهیم که ری اکت چیست و به‌عنوان یک ابزار و کتابخانه فرانت‌اند جاوا اسکرپیتی، چه جایگاه و کاربردهایی دارد. همان‌طور که اشاره شد، React یک زبان برنامه‌نویسی جداگانه نیست و در واقع، کتابخانه‌ای نام‌آشنا برای زبان جاوا اسکریپت محسوب می‌شود که بسیاری از افراد و شرکت‌ها، آن را برای ساخت رابط کاربری محصولات خود به‌کار گرفته‌اند. همچنین خوب است بدانید که عملکرد آن تنها به توسعه UI محدود نشده و با افزونه‌ها و ابزارهایی نظیر نکست جی‌اس، React Native ،Flux و غیره در ساخت دیگر قسمت‌های توسعه اپلیکیشن و همچنین توسعه اپ موبایل نیز استفاده می‌شوند.

فیلم مجموعه آموزش ری اکت React – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در دنیای توسعه وب کنونی، استفاده از فریمورک‌ها و کتابخانه‌های وب اهمیت زیادی پیدا کرده‌اند. به‌خصوص مواردی که برای توسعه فرانت‌اند وب‌سایت‌ها به‌کار می‌روند. ری‌اکت یکی از همین کتابخانه‌ها برای ساخت UI تعاملی است که شهرت و محبوبیت زیادی پیدا کرده و به کمک آن می‌توانید وب‌اپلیکیشن‌های پیچیده را به‌سادگی توسعه دهید. این کتابخانه جاوا اسکریپتی، روی استفاده از کامپوننت‌ها تمرکز ویژه‌ای دارد و مؤلفه‌هایی را شکل می‌دهد که قابل استفاده مجدد هستند و در ترکیب با هم می‌توانند UI اپلیکیشن شما را ایجاد کنند. React سهم زیادی از بازار حوزه تخصصی خود را در اختیار دارد. این مورد باعث شده تا تقاضا نیز برای متخصصان این مهارت بیشتر باشد.