در این مقاله درباره کتابخانه React صحبت می کنیم.react چیست؟ از مزایای react می گوییم . از نحوه کار react می گوییم پس با ما همراه باشید.

React JS چیست؟

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

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

می توانید همه چیز درباره JavaScript را به طور کامل در اینجا مطالعه کنید

اما خلاصه آن می شود:

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


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

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

اصلا بگذارید با یک جمله این زبان را توصیف کنیم: جاوا اسکریپت یک زبان برنامه نویسی فوق العاده مهم است که برای افزودن ویژگی های متحرک و تعاملی به وب سایت ها یا برنامه های وب استفاده می شود (فراموش نکنید اسکلت اصلی HTML و CSS است)

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

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

کتابخانه های جاوا اسکریپت مجموعه ای از کدهای جاوا اسکریپت از قبل نوشته شده اند که می توانند برای کارهای معمول JS استفاده شوند . به شما این امکان را می دهد که فرآیند کدنویسی دستی (غیرضروری) را به راحتی بدون نوشتن کل کد پشت سر بگذارید. اگر یک تابع جاوا اسکریپت وجود داشته باشد که شما مرتباً به کدنویسی کردن آن احتیاج دارید (و سایر توسعه دهندگان قبل از شما برای انجام پروژه های خودشان به آن نیاز داشتند) . احتمالاً یک کتابخانه JS برای انجام آن کار وجود دارد. واضح گفتم؟

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

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

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

نکته: افراد زیادی را دیده ام که می پرسند React مربوط به front-end است یا back-end?
پاسخ : front-end. با یادآوری جنبه “روی صفحه” بودن هر رابط کاربری ، می توانید این مسئله را راحتتر به خاطر بسپارید. React به طور انحصاری برای ساخت برنامه های “client side”” (ساخت چیزهایی که کاربر در صفحه مرورگر خود مشاهده می کند.) استفاده می شود ، که باعث می شود React JS یک کتابخانه front-end باشد.

قبل از React چه بود؟

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

بنابراین،در سال 2011 ، مهندس فیس بوک ، جوردن والک ، React JS را ساخت که تمرکز ویژه آن بر روی بهبود رابط کاربری بود.

علاوه بر ارائه کد کتابخانه قابل استفاده مجدد React (صرفه جویی در زمان توسعه و کاهش احتمال خطاهای کدنویسی) . React دارای دو ویژگی اساسی است که جذابیت آن را برای توسعه دهندگان JavaScript بیشتر می کند:

JSX
Virtual DOM

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

JSX

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

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

استفاده از JSX برای تغییرات در DOM منجر به بهبود قابل توجه عملکرد سایت و کارایی توسعه می شود. چطور؟ این مربوط می شود به ویژگی بعدی React یعنی همان Virtual DOM.

Virtual DOM

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

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

مثالی از Virtual DOM

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

این نوع به روزرسانی انتخابی به قدرت محاسباتی کمتر و زمان بارگیری کمتری نیاز دارد. که شاید هنگام مثال درباره فرستادن یک نظر در وبلاگ چندان مهم به نظر نرسد .اما هنگامی که سایت های بزرگ به یک عالمه تغییرات ریز با تعاملات کاربر را در نظر بگیرید متوجه اهمیت موضوع می شوید.

کد React JS چه شکلی است؟

اگر همه اینها برایتان جا افتاده اما هنوز دارید فکر می کنید ، “کد React چیست و چگونه به نظر می رسد؟” می توانید از اینجا آن را مستقیما ببینید.
هر یک از پروژه های لیست شده در اینجا ایده ای از آنچه با React JS امکان پذیر است و نگاهی به کد منبع مورد استفاده برای ساخت آن را به شما نشان می دهد.

در همین حال ، اگر هنوز دارید فکر می کنید “با React JS چه کاری می توان انجام داد؟” و به نمونه هایی از React JS برای مبتدیان علاقه مند هستید ، این پروژه های ساده که توسط وب سایت رسمی React تنظیم شده است به شما قالب هایی با امکاناتی که ری اکت ارایه می دهد را نشان می دهد.

و در آخر ، اگر به دنبال یک آموزش کامل برای React JS هستید تا در آن با مثالهای React JS برای مبتدیان همراه باشید ، می توانید مستقیماً از این آموزش یودمی ایران استفاده کنید که شما را بدون هیج دانش قبلی در زمینه React به یک استاد تبدیل می کند.

اکوسیستم React JS

حال این سوال پیش می آید که React با این تفاسیر یک کتابخانه برای جاوا اسکریپت است یا یک Framework برای جاوا؟ یا اصلا هر دو؟

من React JS را به عنوان یک کتابخانه JavaScript و نه یک framework تعریف می کنم. این یک تفاوت مهم است.

تفاوت بین کتابخانه های جاوا اسکریپت (مانند React) و frameworkهای جاوا اسکریپت (مانندAngular )در این واقعیت نهفته است که – در مورد کتابخانه – توسعه دهنده کد کتابخانه را در موارد جداگانه ای که آن را درخواست می کنند ، اعمال می کند. اما زمانی که نوبت به فریم ورک می رسد ، این فریم ورک یک داربست ایجاد می کند که وب سایت یا برنامه شما را شکل دهی می کند و زمینه های اختصاصی برای اتصال کد فریم ورک را فراهم می کند.

برای فهم تفاوت بین کتابخانه ای مانند ری اکت و فریم ورکی مانند Angular ، می توانید به کدی از کتابخانه Javascript در جایگاه مبلمان و دکوراسیون خانه ای که قبلاً ساخته اید فکر کنید . در حالی که فریم ورک یک الگو از یک مدل خانه است که شما برای ساختن خانه از آن استفاده می کنید.

ویژگی های React

React JS گاهی اوقات با یک فریم ورک کامل اشتباه گرفته می شود . زیرا اکوسیستم قوی و توسعه پذیری آن را به کتابخانه ای همه کاره در JavaScript تبدیل کرده است. به یاد داشته باشید ، هنگامی که از React JS برای ساختن رابط کاربر وب سایت و برنامه وب استفاده می کنید ، به موارد زیر دسترسی دارید:

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

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

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

اگر می خواهید به عنوان یک توسعه دهنده front-end کار کنید (که به معنای ساخت UI است.) ، پاسخ قطعا بله است!

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

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