React چیست؟ آشنایی با React

React چیست؟

React (ری اکت) یک لایبرری جاوا اسکریپته که برای طراحی و ساخت رابط های کاربری تعاملی و سبک استفاده می شه. React در سال 2012 در شرکت فیسبوک طراحی شد و در حال حاضر پرطرفدارترین لایبرری جاوا اسکریپت برای ساخت رابط های کاربریه.

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

تو این تصویر می بینید که React پرطرفدارترین، بین لایبرری ها و فریم ورک های موجود برای ساخت رابط های کاربری یا UI است. دو انتخاب پرطرفدار دیگه در این بین angular (انگولار) و Vue (ویوو) هستن.

چرا باید React رو یاد بگیریم؟

پس اگر می خواهید فرصتهای شغلی بیشتری در آینده به عنوان یک متخصص front-end (فرانت اند) داشته باشید، حتما باید با React آشنا باشید. هر اپلیکیشنی که با React نوشته شده از مجموعه ای از (Component) کامپوننتها تشکیل شده. هر کامپوننت تکه ای از رابط کاربریه. به این ترتیب وقتی یک رابط کاربری رو با React طراحی می کنیم، در واقع یک مجموعه از کامپوننتها را کنار هم می چینیم. ویژگی مهم این کامپوننتها اینه که کاملا از هم مستقل و ایزوله هستند و مهمتر اینکه میتونین از یک کامپوننت بارها و در اپلیکیشنهای مختلف استفاده کنید. در هر اپلیکیشنی که با React نوشته شده، حداقل یک کامپوننت وجود داره که به عنوان کامپوننت ریشه شناخته میشه. کامپوننت ریشه در واقع کلیت اپلیکیشن رو شامل میشه و از کامپوننتهای کوچکتر تشکیل شده.

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

معماری اپلیکیشن های React

میشه گفت که ساختار اپلیکیشنهای ساخته شده با React بصورت یک درخته. کسانی که با انگولار 2 یا بالاتر کار کرده باشن با مفهوم درخت آشنا هستن.
اجازه بدین یک مثال بزنیم. فرض کنید میخواهیم یک اپلیکیشن شبیه به پینترست (Pinterest) بسازیم. یک صفحه پینترست رو میشه به چند کامپوننت کوچکتر تقسیم کنیم. از جمله نوار بالای صفحه، لیست پیشنهاداتی که به کاربر نشون داده میشه و ایده هایی که پین شدن. بصورت یک درخت، میشه صفحه پینترست رو اینطور نمایش بدیم. در بالا، اپلیکیشن پینترست قرار داره و در لایه پایین تر، نوار بالای صفحه، لیست پیشنهادات و ایده های پین شده. همچنین هر ایده پین شده خودش از کامپوننتهای مختلفی تشکیل شده مثل تصویر اصلی، کلید ذخیره سازی و غیره.

هر کامپوننت یک تکه مستقل از UI هست. با استفاده از React این کامپوننتها بصورت جدا از هم ساخته میشن و در کنار هم قرار میگیرن تا یک UI کامل رو تشکیل بدهند. در مورد پیاده سازی این کامپوننتها میشه گفت که هر کدام از آنها معمولا به صورت یک کلاس جاوا اسکریپت اجرا می شن که شامل یک سری استیت (state) و یک متد رندر هستند. استیت شامل یک سری داده است که قصد داریم پس از رندر کردن کامپوننت نمایش بدیم. متد رندر مشخص می کنه که UI ما قراره چه ظاهری داشته باشد.

خروجی متد رندر یک المان React رو تشکیل میده که یک آبجکت ساده جاوا است که عناصر DOM رو مشخص می کند. البته اینها عناصر واقعی DOM نیستند بلکه آبجکت های ساده جاوااسکریپکت هستند که یک المان DOM رو در حافظه مشخص می کنه. پس در واقع ما یک DOM مجازی داریم که ساختن اون نیاز زیادی به حافظه و قدرت پردازش نداره. در عمل React یک نسخه سبک از DOM واقعی یا همون DOM مرورگر و ایجاد می کنه. وقتی که ما استیت یک کامپوننت رو تغییر میدیم در واقع یک المان DOM جدید ایجاد می کنیم. بعد React المان جدید و بچه های اون رو با المان قبلی مقایسه می کنه تا تغییرات رخ داده رو مشخص کنه و در ادامه بخشی از DOM واقعی رو تغییر میده. به این ترتیب DOM واقعی همیشه مشابه DOM مجازی باقی می مونه. در واقع برعکس جاوا اسکریپت وانیلا(Vanilla Javascript) یا جی کوئری (jQuery)، نیازی نیست با api مرورگر کاری داشته باشیم. به عبارت دیگه، نیازی به کدنویسی برای دستکاری DOM یا اضافه کردن ایونت هندلر(event handler) به DOM نداریم. تنها کافیه که استیت کامپوننتها رو تغییر بدیم و React بصورت خودکار DOM رو به روز رسانی میکنه تا با استیت جدید هماهنگ بشه. به همین خاطره که اسم این لایبرری رو گذاشتن React، چون وقتی یک استیت تغییر می کنه، React به اون تغییر واکنش نشون می ده و DOM را به روزرسانی میکنه.

React بهتره یا Angular

برای خیلی این پرسش مطرح میشه که React بهتره یا انگولار؟ میشه گفت که هر دوی اینها از نظر معماری مبتنی بر کامپوننتها مشابه هستند ؛ با این حال، انگولار یک فریم ورک کامله در حالی که React تنها یک لایبرریه و تنها کارش رندر کردن UI و تغییر اون بر اساس تغییر استیت هست. این تمام کاریه که React انجام میده. به همین دلیل که React، api بسیار کوچکی داره به راحتی میشه اون رو آموخت. وقتی از React برای ساخت یک اپلیکیشن استفاده می کنید نیاز داریم از لایبرری های دیگه هم استفاده کنیم. البته این یک نکته منفی نیست چون شما آزادی انتخاب لایبرری های مورد نیاز تون رو دارید و مجبور نیستند خودتون رو تنها به فریمورک انگولار محدود کنید که از یک ورژن به ورژن دیگر متغیره.

پرسشهای متداول

01

React چیست؟

React (ری اکت) یک لایبرری جاوا اسکریپت که برای طراحی و ساخت رابط های کاربری تعاملی و سبک استفاده می شه. React در سال 2012 در شرکت فیسبوک طراحی شد و در حال حاضر پرطرفدارترین لایبرری جاوا اسکریپت برای ساختن رابط های کاربری.

02

آیا به React نیاز دارم؟

از جمله شرکتهای مطرحی که از React استفاده می کنن میشه به فیسبوک، شبکه اجتماعی ایکس یا همون توییتر سابق، بی بی سی، نیویورک تایمز، نتفلیکس، ایر بی اند بی، پینترست، واتس اپ و اینستاگرام اشاره کرد. پس اگر می خواهید فرصتهای شغلی بیشتری در آینده به عنوان یک متخصص front-end (فرانت اند) داشته باشید، حتما باید با React آشنا باشید.

03

React بهتره یا Angular?

میشه گفت که هر دوی اینها از نظر معماری مبتنی بر کامپوننتها مشابه هستند ؛ با این حال، انگولار یک فریم ورک کامله در حالی که React تنها یک لایبرریه و تنها کارش رندر کردن UI و تغییر اون بر اساس تغییر استیت هست. این تمام کاریه که React انجام میده. به همین دلیل که React، api بسیار کوچکی داره به راحتی میشه اون رو آموخت. وقتی از React برای ساخت یک اپلیکیشن استفاده می کنید نیاز داریم از لایبرری های دیگه هم استفاده کنیم. البته این یک نکته منفی نیست چون شما آزادی انتخاب لایبرری های مورد نیاز تون رو دارید و مجبور نیستند خودتون رو تنها به فریمورک انگولار محدود کنید که از یک ورژن به ورژن دیگر متغیره.