کتابخانه ری‌اکت (React) چیست؟ تجربیات یک دولوپر!

اگر به سایت‌های کاریابی نگاهی انداخته باشید، احتمالاً دیده‌اید که برنامه‌نویس ری‌اکت یکی از پرتقاضاترین شغل‌های برنامه‌نویسی است. 

حالا این ری اکت چیست که همه عالم دیوانه اوست؟!

ری‌اکت یکی از محبوب‌ترین کتابخانه‌های جاوا‌اسکریپت است که در ساخت وب‌اپلیکیشن‌های مدرن و رابط‌های کاربری (UI) کاربرد دارد. این کتابخانه توسط تیم فیسبوک به‌صورت متن‌باز (Open Source) توسعه پیدا کرد و به‌سرعت توانست جایگزین روش‌های قدیمی و سنتی برنامه‌نویسی سمت کاربر (Front-end) شود.

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

این مقاله را با یک تعریف ساده و شسته‌رفته از react شروع می‌کنم.

ری اکت چیست؟

ری‌اکت (ReactJS یا React.js) یک کتابخانهٔ جاوااسکریپت است که برای ساخت رابط‌های کاربری از آن استفاده می‌شود. این تعریف خیلی کلی و دانشگاهی است! پس اجازه دهید با تعریف مفاهیم کلیدی این تعریف، کمی ساده‌ترش کنم.

اول بیایید ببینیم منظور از کتابخانه چیست.

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

پس وقتی می‌گویم ری‌اکت یک کتابخانه است (نه فریم‌ورک!)، منظورم این است که ری‌اکت یک سری توابع مفید و آماده برای ساخت رابط کاربری فراهم کرده است که آن‌ها را به برنامه‌نویس واگذار می‌کند تا از این توابع در هر کجای وب‌اپلیکیشن که می‌خواهد استفاده کند.

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

منظور از رابط کاربری هم، عناصری‌ است که کاربران در صفحات وب‌ و اپلیکیشن‌ها می‌بینند و با آن‌ها تعامل دارند؛ مثل تمام آیکون‌ها، منوها، دکمه‌ها، متن‌ها، تصاویر و…

حالا جاوااسکریپت چیست؟

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

شما می‌توانید با استفاده از HTML و CSS (هر دو نوعی زبان‌ کدنویسی هستند) هم یک وب‌سایت یا فروشگاه اینترنتی با شکل دلخواه‌تان بسازید؛ منتهی دیگر تعاملی و پویا نیست!

به این مثال‌ها توجه کنید.

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

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

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

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

برنامه‌نویس‌ها کجاها از React استفاده می‌کنند؟

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

۱) ساخت وب‌سایت‌های تک‌صفحه‌ای (SPA)

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

ری اکت با مدیریت مؤثر حالت (state) و رندر مجدد مؤلفه‌ها، تجربه کاربری روان و سریعی را در SPAها فراهم می‌کند و این قابلیت به کاربر حس کار با اپلیکیشن می‌دهد و سرعت آن نیز بسیار بیشتر است.

۲) پکیج‌های ری‌اکت برای استفادهٔ دیگران

با استفاده از ری‌اکت می‌توانید پکیج‌هایی مثل تقویم، فرم، دکمه، نمودار و … بسازید و کد آن‌ها را در سایت‌هایی مثل سایت npm قرار دهید تا برنامه‌نویس‌های دیگر بتوانند آن‌ها را دانلود و در سایت‌های خود استفاده کنند و دعاگوی شما باشند!

خرید انواع هاست 🍋

بهترین سرویس‌های میزبانی وب را از لیموهاست بخواهید

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

شروع قیمت از
سالیانه ۵۹۰ هزار تومان

خرید هاست

۳) سیستم مدیریت محتوا

ری‌اکت گزینهٔ مناسبی برای ساخت سیستم‌های مدیریت محتوا (CMS) است. اگر احیاناً نمی‌دانید CMS چیست، مقاله‌ای که قبلاً روی وبلاگ لیمو منتشر شده را مطالعه کنید. 

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

۴) اپلیکیشن‌ موبایل

یکی دیگر از کاربردهای کتابخانه‌ ری‌اکت، ری‌اکت نیتیو (React Native) است که تا حدودی با React.js متفاوت است. از React.js برای محیط وب استفاده می‌شود؛ درحالی‌که از ری‌اکت نیتیو می‌توان برای پیاده‌سازی اپلیکیشن‌های موبایل که قابلیت استفاده در سیستم‌عامل‌های اندروید و IOS را دارد، استفاده کرد.

به این اپلیکیشن‌ها که در هر دو سیستم‌عامل قابل‌ استفاده هستند، اپلیکیشن‌های هایبرید (Hybrid) گفته می‌شود.

مزایای کتابخانهٔ ری‌اکت از نظر یک دولوپر!

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

۱. کامپوننت‌محور بودن ری‌اکت

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

برای مثال فرض کنید شما یک فروشگاه اینترنتی دارید و در یک صفحه، محصولات خود را به نمایش گذاشته‌اید. هر کدام از این محصول‌ها، شبیه به یک کارت است و طبیعتاً هر کدام از کارت‌ها شامل عکس، نام محصول و قیمت می‌شود. به این نمونه توجه کنید:

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

حالا این کامپوننت‌محور بودن ری اکت چه فایده‌ای برای ما دارد؟

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

۲. سازگاری با افزونه JSX

JSX یک افزونه سینتکس خاص در جاوااسکریپت است که ساختاری شبیه به HTML‌ دارد و برای تعریف رابط کاربری در ری‌اکت به کار می‌رود.

به زبان ساده‌تر، JSX به شما اجازه می‌دهد تا کدهای HTML را مستقیماً داخل کدهای جاوااسکریپت خود بنویسید. این کار باعث می‌شود که ساخت و خوانایی کامپوننت‌های رابط کاربری را بهتر و ساده‌تر می‌کند.

۳. مفهوم Virtual DOM

یکی از برگ برنده‌‌های کتابخانه‌های جاوااسکریپت از جمله ری اکت، DOM مجازی است. حالا DOM مجازی در ری اکت چیست و چه مزیتی دارد؟

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

DOM مخفف Document Object Model است و به ساختار درختی‌شکل یک صفحه وب اشاره دارد که مرورگر برای نمایش محتواها از آن استفاده می‌کند. هر تغییر کوچکی که در صفحه وب اتفاق بیفتد، این ساختار را هم تغییر می‌دهد.

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

در واقع به‌جای رفرش شدن کل صفحه و تغییر در DOM اصلی (Actual DOM)، فقط همان قسمتی که تغییر کرده، به‌روز می‌شود. 

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

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

۴. کامیونیتی قوی

سینتکس (نحو نگارش) ری اکت به خودی خود ساده و قابل‌فهم است و یادگیری آن نسبت‌به سایر کتابخانه‌ها و فریم‌ورک‌ها ساده‌تر است؛ اما اگر حتی در حین توسعهٔ وب‌اپلیکیشن‌های ری‌اکتی، با خطایی مواجه شدید که نتوانستید آن‌را حل کنید، می‌توانید سوال خود را در فروم‌های برنامه‌نویسی مطرح کنید و تقریباً مطمئن باشید که سوال‌تان بی جواب نخواهد ماند!

همین جامعه و کامیونیتی گسترده‌ ری‌اکت را می‌توانیم یکی از نقاط قوت بزرگ این کتابخانه حساب کنیم.

و سوال پایانی:

آیا در react با محدودیتی هم مواجه هستیم؟

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

تا اینکه یک شرکت به‌ نام Vercel فریمورکی به نام NextJs منتشر کرد و توانست این مشکل بزرگ را حل کند. 

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

جمع‌بندی و حرف‌های پایانی

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

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

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