React js چیست و چه کاربردی دارد؟

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

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

جاوا اسکریپت (یا JS) یک زبان برنامه نویسی است که برای ایجاد و کنترل محتوای وب پویا استفاده می شود. محتوای وب پویا شامل موشن گرافیک ها، نمایش اسلاید عکس و فرم های تعاملی است. هر زمان که از وب سایتی دیدن می کنید و می بینید که صفحه به هر نحوی بدون بارگذاری مجدد صفحه وب در حال حرکت، تازگی یا تغییر است، JS زبانی است که باعث این اتفاق می شود. جاوا اسکریپت روی مرورگر کار می کند، نه روی سرور، مانند پایتون و C# یا PHP نیست که در سمت سرور اجزا شوند بلکه سمت مرورگر کاربر نهایی به اجرا در می آید. جاوا اسکریپت به طور گسترده ای در برنامه های وب استفاده می شود و نقش مهمی در توسعه وب دارد. مقاله JavaScript چیست اطلاعات بیشتری در اختیار شما خواهد گذاشت.

کتابخانه های جاوا اسکریپت چیست؟

گاهی اوقات برای انجام توابع تکراری نیاز به جاوا اسکریپت (JavaScript) دارید، مواردی مانند جلوه های متحرک سازی تصویر یا تکمیل خودکار متن در نوار جستجو. بازنویسی کد برای همه این توابع بارها و بارها به “اختراع مجدد چرخ” تبدیل می شود. اینجاست که کتابخانه ها در برنامه نویسی وارد می شوند. کتابخانه های جاوا اسکریپت مجموعه ای از کدهای جاوا اسکریپت از پیش نوشته شده هستند که می توانند برای انجام کارهای مشترک JS مورد استفاده قرار گیرند و به شما این امکان را می دهند که فرایند وقت گیر نوشتن کد دستی را دور بزنید. در مقاله دیگری که قبلا منتشر شده است می توانید با برخی از فریم ورک ها و کتابخانه های جاوا اسکریپت آشنا شوید.

ری اکت (React) چیست؟

برگردیم به React، کتابخانه های مختلف JS مختلف وجود دارد و React JS یکی از آنهاست، React بصورت “ری اکت” خوانده می شود و برخی اینگونه آن را می نویسند، اما چه چیزی ری اکت را بسیار خاص می کند؟ React JS چه کاربردهایی دارد و چرا باید React JS را بیاموزید؟ آیا از کتابخانه های JavaScript بهتر است؟

چرا توسعه دهندگان جاوا اسکریپت از React JS استفاده می کنند؟

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

قبل از React JS، توسعه دهندگان از JavaScript به صورت دستی و بدون کتابخانه برای ایجاد رابط کاربری یا با کتابخانه ها قبل از ایجاد React مانند jQuery استفاده می کردند. این به معنی زمان توسعه طولانی تر و فرصت بیشتر برای خطاها است. بنابراین، در سال 2011، مهندس فیس بوک، جردن والک، کتابخانه React JS را برای بهبود فرایند توسعه رابط کاربر ایجاد کرد.

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

• JSX
• DOM مجازی

برای درک بهتر React JS و اینکه چرا باید از آن استفاده کنید، بیایید نگاهی به هر دو بیندازیم.

JSX

اسناد HTML در قلب هر وب سایت اصلی قرار دارند. این مرورگرها اسناد را در کامپیوتر، تبلت یا تلفن هوشمند به عنوان صفحات وب یا وب سایت قابل مشاهده توسط کاربر می خوانند و نمایش می دهند. در طی این فرآیند، مرورگرها چیزی به نام Document Object Model (DOM) ایجاد می کنند که نمایانگر چگونگی چیدمان هرصفحه وب سایت است. سپس توسعه دهندگان می توانند محتوای پویا را با تغییر و دستکاری DOM در زبان هایی مانند جاوا اسکریپت به پروژه های خود اضافه کنند.

JSX (مخفف JavaScript XML) یک پسوند React است که باعث می شود توسعه دهندگان وب بتوانند DOM خود را با استفاده از کد ساده به سبک HTML تغییر دهند. و از آنجا که پشتیبانی مرورگر React JS به همه مرورگرهای وب مدرن گسترش می یابد، JSX با هر پلتفرم مرورگری که ممکن است با آن کار کنید سازگار است.

DOM مجازی

اگر از React JS (و JSX) استفاده نمی کنید، وب سایت شما از HTML برای به روز رسانی DOM خود استفاده می کند (فرآیندی که باعث می شود همه چیز روی صفحه بدون تغییر کاربر به صورت دستی تغییر کند). این برای وب سایت های ثابت بسیار خوب عمل می کند، اما برای وب سایت های پویا با تعامل کاربر زیاد به عنوان مثال فیس بوک می تواند مشکل ساز شود (از آنجا که هر بار که کاربر روی ویژگی ای که صفحه را به روز می کند کلیک می کند، کل DOM باید بارگیری شود).

با این حال، اگر توسعه دهنده از JSX برای پردازش و به روز رسانی DOM خود استفاده می کند، React JS چیزی به نام Virtual DOM ایجاد می کند که کپی DOM واقعی سایت است و React JS از این کپی برای اطلاع از قطعات DOM واقعی استفاده می کند. برای تغییر در یک رویداد خاص، مانند اینکه کاربر روی دکمه کلیک می کند.

فرض کنید یک کاربر در وبلاگ نظری وارد کرده و دکمه “ارسال نظر” را فشار می دهد. بدون استفاده از React JS، کل DOM باید به روز شود تا این تغییر را منعکس کند (که از زمان و منابع بیشتری برای پردازش این به روز رسانی استفاده می کند). از طرف دیگر، React DOM مجازی را اسکن می کند تا ببیند پس از اقدام کاربر چه تغییری کرده است (در این مورد، افزودن نظر) و فقط این بخش از DOM را بدون نیاز به بازسازی کل DOM به روز می کند.

این روش زمان و منابع مورد نیاز برای پردازش به روزرسانی DOM را کاهش می دهد و همانطور که در سایتهای کوچک با تعامل کمی با رابط کاربری اشاره کردیم، این روش مفید نیست زیرا تأثیر به روز رسانی DOM کم است، اما در برنامه هایی که دارای تعامل زیاد با رابط کاربری، مسئله استفاده از DOM مجازی اهمیت بیشتری پیدا می کند.

آیا باید React JS را یاد بگیرم؟

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

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