react چیست و چرا محبوب است؟ (ری اکت) – به زبان ساده
آنچه در این مقاله میخوانید
Toggleیکی از مهارتهای پر سر و صدا که در بازار کار بسیار هم خواهان دارد react یا همان reactjs است. اما react چیست؟ یک زبان برنامه نویسی است؟ یک نرم افزار است؟ یا …
اگر کمی درباره برنامه نویسی وب بدانید و یا جستجو کرده باشید حتما فکر درآمد زایی از طریق برنامهنویسی هستید.
ممکن است تا به حال درباره HTML، CSS و جاوااسکریپت شنیده و یا کاملا در تمامی این موارد مهارت کامل را کسب کرده باشید! اما هنوز شغلی مناسب در این حوزه پیدا نکرده اید.
React js چیست؟
React js یک کتابخانه جاوااسکریپت است که برای برنامه نویسی سمت کلاینت (فرانت اند) وب بکار گرفته میشود. اما اگر با کتابخانه جاوااسکریپت و یا خود جاوااسکریپت آشنا نیستید این تعریف چندان مفید به نظر نمیرسه!
پس ابتدا جاوااسکریپت رو برای درک React معرفی کنیم.
جاوااسکریپت چیست؟
- جاوااسکریپت (JavaScript یا به اختصار JS) یک زبان اسکریپتیه که برای ساخت و یا کنترل صفحات وب داینامیک استفاده میشه.
- صفحه داینامیک چیه؟ این صفحات شامل اسلایدرهای تصویر، فرم هایی که ورودی های شما رو به محض تایپ کردن بررسی میکنند و …
- هر وقت شما وارد وبسایتی شدید که المنتهایی در صفحه حرکت میکنن یا صفحه به صورت خودکار ریفرش میشن، از جاوااسکریپت استفاده شده.
کتابخانه جاوااسکریپت چیست؟
از توضیحات بالا احتمالا متوجه شدید که جاوااسکریپت نقش اساسی رو توی اکثر وبسایت های حال حاضر ایفا میکنه. اما خیلی وقتا برنامه نویسهای وب از یک قسمت خاصی از کدشون چند بار استفاده میکنن. مثلا برای ساخت اسلایدر شامل ۱۰ عکس، ۱۰ بار یک کد خاص رو اجرا میکنن. دوباره نوشتن این کدها مثل اینه که بخوایم چرخ رو دوباره اختراع کنیم!
کتابخونههای جاوااسکریپت برای همین کار استفاده میشن که از یک کد بتونیم چند بار استفاده کنیم. بدون اینکه نیاز باشه اون کد رو چندین بار بنویسیم. اینکار باعث میشه سرعت نوشتن کد و همچنین سرعت اجرای برنامهها هم بالا بره
بر گردیم به react. خب تعداد زیادی کتابخونه جاوااسکریپت وجود داره و ری اکت هم یکی از اون هاست. اما چی اون رو از بقیه اینقدر متفاوت میکنه؟ react js کی و کجا بکار میاد و چرا ما باید این کتابخونه رو یاد بگیریم؟ و در آخر اینکه آیا کتابخونه های javaScript بهتری وجود دارن؟
چرا برنامه نویسهای وب از React استفاده میکنن؟
کار اصلی react کمک به برنامه نویسها برای ساخت رابط کاربری (UI) وب سایت هاست. از نظر نرمافزارهای تحتوب و وبسایتها، UI همون دکمهها، فرمها، لینکها و متنهاییه که کاربر باهاشون ارتباط برقرار میکنه و اون ها رو میبینه.
قبل از React JS توسعهدهندهها برای طراحی UI مجبور بودن از velinna JavaScript یا کتابخونههایی که زیاد به رابط کاربری اهمیت نمیدادن استفاده کنند (مثل jQuery). این کار باعث میشد که کدنویسی زمان بیشتری از برنامهنویس بگیره و همینطور ارورها و باگهای بیشتری هم حاصل بشه.
در سال ۲۰۱۱ یکی از مهندسان فیسبوک جردن واک React JS به هدف بهبود رابط کاربری توسعه داد.
React به منظور کاهش ارور و همچنین افزایش سرعت کدنویسی و استفاده راحت با دو ویژگی اصلی برای برنامه نویسان معرفی شد:
- JSX
- Virtual DOM
برای اینکه حتی بهتر درک کنید که چرا باید از React استفاده کنیم بیاید این دو رو بررسی کنیم.
JSX
در عمق هر وبسایتی HTML وجود داره. مرورگرهای وب تگ های HTML رو میخونن و به شما نمایش میدن. در طول این پروسه مرورگرها یک مدل شی سند یا همون Document Object Model (DOM) میسازن. این یک درخت از صفحه سایته که چینش اون صفحه رو نشون میده. توسعه دهندهها بعد از اون میتونن صفحات داینامیک رو با استفاده از ویژگیهای DOM بسازن.
JSX (مخفف JavaScript eXtension) یک افزودنی برای React ئه که کار توسعه دهندهها رو برای ساخت کدهاشون راحت میکنه. که به ظاهر HTML شباهت بسیار زیادی داره. در واقع بجای یادگیری کدهای جدید حالا توسعهدهندهها میتونن تقریبا همون HTML رو متنها کمی متفاوت بنویسن.
مثلا در زبان جاوااسکریپت کلمه class از قبل رزرو شده و برای نوشتن کلاس در JSX نمیشه ازش استفاده کرد. پس باید از کلمه جایگزین استفاده کنن که className هست!
تمامی صحبتهایی که در مورد JSX دادیم به سرعت و کارایی سایت کمک میکنه. اما چطور؟ این برمیگرده به ویژگی دیگه React یعنی Virtual DOM
Virtual DOM
اگر شما از React یا JSX برای برنامهنویسی استفاده نمیکنید پس حتما باید از خود HTML و DOM استفاده کنید. این برای سایتهای ساده استاتیک خوبه اما برای سایتهایی که ارتباط زیادی با کاربر دارن و المنتهای سایت همش در حال تغییر و جابجا شدن هستن یه مشکل به حساب میاد. (از اونجایی که ویژگیهای خیلی خیلی زیادی از DOM نیازه که مدام تغییر کنه)
هرچند اگر توسعه دهنده از JSX برای تغییر DOM استفاده کنه، React چیز دیگهای میسازه به نام Virtual DOM.
همونطور که اسمش پیداست یک کپی مجازی از DOM های وبسایته که React از این کپی استفاده میکنه تا با نسخه اصلی مقایسه کنه و ببینه کدوم قسمت از DOM اصلی بعد از اتفاق افتادن عملی (مثل کلیک کاربر روی دکمهای) نیاز به تغییر داره.
یک مثال:
بیاید یک مثال بزنیم. فرض کنید کاربر میخواد یک نظر زیر یکی از پستهای وبسایت قراره بنویسه و دکمه ارسال نظر رو میزنه. بدون استفاده از React تمام DOM نیاز به ریفرش کردن داره تا این تغییر رو نمایش بده. (زمان و پردازش برای درخواست دوباره تمام صفحه از سمت سرور رو در نظر بگیرید!). اما از طرفی ریاکت Virtual DOM رو میبینه تا بعد از این عمل کاربر، فقط قسمت مربوطه رو تغییر بده. در این مورد یک نظر به پست اضافه شده که فقط نیازه قسمت کامنتهای صفحه تغییر کنه بدون اینکه نیاز باشه صفحه ریفرش بشه.
این اعمالی که تنها به تغییر یک قسمت از صفحه نیاز داره، پردازش خیلی کمتری نیاز داره و زمان کمتری هم از کاربر میگیره.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.