ری اکت چیست؟ دلیل استفاده از آن و روش کار

ری اکت (React) معروف ترین و محبوب ترین کتابخانه جاوا اسکریپت برای ایجاد رابط کاربری (UI) است که با استفاده از روش جدیدی برای ارائه وب سایت ها، پاسخ بسیار خوبی به ورودی کاربر می دهد.

اجزای این ابزار توسط تیم توسعه دهنده فیس بوک ساخته شده اند. ری اکت در سال ۲۰۱۳ به عنوان ابزار متن باز جاوا اسکریپت راه اندازی شد و در حال حاضر از رقبای اصلی خود یعنی Angular و Bootstrap که هر دو کتابخانه های پر فروش جاوا در زمان خودشان بوده اند، پیشی گرفته است.

جاوا اسکریپت چیست؟ (کاربردها و تفاوت با جاوا)

در این مطلب ما قصد داریم به طور کامل توضیح بدهیم که ری اکت چیست و چطور به شما به عنوان یک توسعه دهنده کمک می کند؟

چرا از ری اکت استفاده کنیم؟

ری اکت توسط صدها صدها شرکت بزرگ در سراسر جهان از جمله ایر بی ان بی (Airbnb)، نتفلیکس (Netflix)، ای بی (eBay)، واتساپ (WhatsApp)، فیس بوک (Facebook)، امریکن اکسپرس (American Express) و اینستاگرام (Instagram) مورد استفاده قرار گرفته است. همین مساله ثابت می کند ری اکت نسبت به رقبایش مزایایی دارد که آن را به یک کتابخانه بی رقیب تبدیل کرده است.

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

۱- سهولت در استفاده

ری اکت یک کتابخانه GUI متن باز جاوا اسکریپت است که روی یک هدف خاص یعنی تکمیل وظایف رابط کاربری (UI) به طور کارآمد تمرکز دارد. ری اکت را می توان در الگوی طراحی MVC ( مخفف Model-View-Controller) در دسته View طبقه بندی کرد.

درک و فهم اصول ری اکت برای شما به عنوان یک توسعه دهنده کار آسانیست. حتی در عرض چند روز می توانید با استفاده از ری اکت توسعه برنامه های مبتنی بر وب را شروع کنید. برای اینکه بیشتر با ری اکت آشنا شوید می توانید از آموزش های مربوط به آن نیز استفاده کنید.

۲- پشتیبانی از قابلیت استفاده مجدد از کامپوننت ها

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

۳- قابلیت نوشتن راحت تر کامپوننت

نوشتن کامپوننت یا اجزای ری اکت نسبت به رقبایش آسان تر است چون از پسوند اختیاری JSX برای جاوا اسکریپت استفاده می کند که به شما امکان می دهد HTML را با جاوا اسکریپت ترکیب کنید.

JSX ترکیبی عالی از جاوا اسکریپت و HTML است و کل روند نوشتن ساختار وب سایت را واضح می کند. علاوه بر این، این پسوند ارائه چندین عملکرد دیگر را هم بسیار آسانتر می کند. با اینکه ممکن است JSX محبوب ترین پسوند نباشد؛ اما ثابت شده در توسعه اجزای خاص یا برنامه های با حجم بالا کارآمد است.

۴- عملکرد بهتر با Virtual DOM

React روند DOM (نشان دهنده رابط کاربری وب سایت) را به طور کارآمدی به روز می کند. همانطور که می دانید این روند ممکن است باعث توقف خیلی از اپلیکیشن های تحت وب شود. خوشبختانه ری اکت از Virtual DOM استفاده می کند و بنابراین جلوی چنین مشکلی را می گیرد.

این ابزار به شما امکان می دهد Virtual DOM بسازید و از آنها در حافظه میزبانی می کند. در نتیجه هر بار که تغییری در DOM واقعی ایجاد می شود، Virtual DOM نیز بلافاصله تغییر می کند. این سیستم به طور مداوم مانع از بروزرسانی دائمی DOM می شود؛ در نتیجه سرعت برنامه شما قطع نمی شود.

۵- ارتباط خوب با سئو (SEO)

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

علاوه بر این، از آنجایی که ری اکت روند برنامه شما را تسریع می کند می تواند نتایج سئو را هم به نفع شما تغییر بدهد. از این گذشته، سرعت وب شما نقش بسزایی در بهینه سازی سئو دارد.

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

ری اکت چگونه کار می کند؟

شاید تعجب کنید اگر بفهمید که می توانید کدهای HTML را در جاوا اسکریپت بنویسید؛ اما ری اکت دقیقا به همین شکل عمل می کند. ری اکت با ایجاد تابع المنت ، یک گره DOM ایجاد می کند. به مثال زیر توجه کنید:

1. React.createElement(“div”, { className: “red” }, “Children Text”);
2. React.createElement(MyCounter, { count: 3 + 5 });

همانطور که احتمالا می‌دانید، سینتکس جاوا در کد HTML بالا بسیار شبیه به اجزای XML است؛ اما ری اکت بجای استفاده از کلاس سنتی DOM، از نام‌کلاس استفاده می‌کند.

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

بعلاوه، مقادیر و اصطلاحات عددی باید در داخل آکولاد نوشته شود.

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

در اینجا با استفاده از JSX مثال دیگری از ری اکت نوشته ‌شده است:

1. 

   طراحی رابط کاربری UI UX رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با طراحی جذاب اپلیکیشن، نرم افزار وبسایت... دانلود:

   <div className=”red”>Children Text</div>;

2. <MyCounter count={3 + 5} />;

3. var GameScores = {player1: 2,player2: 5};

4. <DashboardUnit data-index=”2″>

5. <h1>Scores</h1><Scoreboard className=”results” scores={GameScores} />

6. </DashboardUnit>;

برای تجزیه و شکستن آن، در اینجا چند نکته در مورد برچسب HTML بالا آورده شده است:

*<MyCounter>  نمایانگر تناقضی به نام «شمارش» است که عبارت عددی را به عنوان مقدار آن نشان می‌دهد.

* GameScores یک موضوع تحت‌اللفظی است که دارای دو جفت ارزش-خاصیتی است.

*<DashboardUnit> بلوک و توده‌ای از XML است که در صفحه ارائه می‌شود.

* scores={GameScores}: ویژگی امتیازها از موضوع GameScores مقداری ارزش دریافت می‌کند که قبلاً تعریف شده بود.

به جای جاوا اسکریپت استاندارد (JS)، بیشتر قسمت های ری اکت با استفاده از JSX (JavaScript XML) نوشته شده است. با این حال، باید توجه داشته باشید که تنها هدف از این کار ایجاد سهولت در ساخت اجزای ری اکت است.

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

علاوه بر این، ایده استفاده از JSX در ری اکت این بود که فیس‌بوک (به عنوان توسعه‌دهنده اولیه) بتواند یک نوع خاص از افزونه سینتکس را با پیکربندی روشن و بدون ابهام برای توسعه ‌دهندگان فراهم کند.

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

جمع بندی

امیدواریم که مطلب امروز ما توانسته باشد درک درستی از ری اکت و نحوه کار آن به شما بدهد. برای جمع بندی موارد گفته شده چند نکته مهم را دوباره خاطر نشان می کنیم:

۱- ری اکت در ابتدا توسط فیس بوک معرفی شد.

۲- بسیاری از برندها و شرکت های بزرگ در سراسر جهان از ری اکت استفاده می کنند.

۳- ری اکت به عنوان یک کتابخانه متن باز جاوا اسکریپت عمل می کند؛ اما می توان آن را یک فریم ورک یا چارچوب هم در نظر گرفت.

۴- این چارچوب نمی تواند به تنهایی کار کند؛ بنابراین شما به عناصر اضافی هم برای اهداف مختلفی مانند مسیریابی، مدیریت و غیره نیاز خواهید داشت.

۵- ری اکت از DOM مجازی برای بهینه سازی بهتر صفحه شما استفاده می کند.

۶- استفاده از ری اکت آسان و متناسب با سئو است.

۷- ری اکت از قابلیت استفاده مجدد از کامپوننت پشتیبانی می کند.

۸- ری اکت از پسوند JSX استفاده می کند که اساساً ترکیبی عالی از HTML و جاوا اسکریپت است.

۹- ری اکت از JSX فقط برای سهولت در نوشتن استفاده می کند نه به این دلیل که عملکرد بهتری داشته باشد.

آموزش صفر تا صد برنامه نویسی جاوا اسکریپت (فیلم فارسی+ جزوه pdf)