ری‌‌‌‌‌‌اکت چیست؟ معرفی کامل کتابخانه ری‌اکت

React یک کتابخانه جاوااسکریپت برای ایجاد رابط های کاربری تعاملی با استفاده از کامپوننت های مختلف می باشد که در سال 2011 توسط فیسبوک ایجاد شد تا برای اخبار فیسبوک و اینستاگرام، استفاده شود. در سال 2013، اولین نسخه React به صورت یک نرم افزار متن باز برای عموم منتشر گردید. امروزه از React در بسیاری از وب سایت های بزرگ و اپلیکیشن های موبایل استفاده می شود که شامل فیسبوک، اینستاگرام، نتفلیکس، Reddit، دراپ باکس، Airbnb و هزاران مورد دیگر می باشد.

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

• دلیل انتخاب نام React چیست
• یک DOM مجازی چه می کند
• تفاوت بین کامپوننت های ترکیبی و وراثتی در چیست
• تفاوت بین برنامه نویسی اعلانی و دستوری چیست
• React در "اصطلاح" به چه معناست

همچنین برای یادگیری ری اکت می توانید آموزش React  را شروع کنید.

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

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

در گذشته، شیوه ای را که این اپلیکیشن ها در ارتباط با این تغییرات انتخاب می کردند، رفرش کردن مکرر اپلیکیشن بود، تا بررسی کنند که آیا داده ای وارد شده است یا خیر. فیسبوک می خواست راهی ایجاد کند تا به شیوه بسیار ساده تر اپلیکیشن هایی را بسازد که به داده جدید پاسخ داده یا واکنش (React) دهند و این کار به سادگی تنها با رفرش کردن صفحات، حال چه داده ای تغییر کرده باشد و چه تغییر نکرده باشد، انجام نشود. شما می توانید تفاوت این روش ها را به صورت pull (یک راه قدیمی برای آپدیت کردن وب سایت ها) در برابر push  (یک راه تعاملی برای ایجاد وب سایت ها)، فرض کنید.

این روش بروزرسانی رابط کاربری در پاسخ به تغییر داده را برنامه نویسی واکنشی (reactive) می نامند.

لایه UI

اپلیکیشن های وب معمولا با استفاده از الگوی Model-View-Controller(MVC)، ساخته و طراحی می شوند. Model در MVC لایه داده، Controller امکانات ارتباطی با لایه داده، و View چیزی است که کاربر می بیند و با آن تعامل دارد. در یک اپلیکیشن MVC، View ورودی را به Controller ارسال کرده، و Controller داده را بین View و لایه داده، دست به دست می کند. React تنها با بخش V در کلمه MVC در ارتباط است، که داده را به عنوان ورودی می گیرد و آن را به یک شکلی برای کاربر به نمایش می گذارد.

شکل زیر نشان دهنده یک تصویر از الگوی MVC است.

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

کتابخانه ای که وظیفه مدیریت کامپوننت های تفسیر شده توسط React را در مرورگر وب دارد ReactDOM نامیده می شود. اگر می خواهید المان های React را برای اپلیکیشن هایی که اساسا برای موبایل هستند تفسیر کنید باید از React Native استفاده نمایید. اگر می خواهید کامپوننت های React را برای HTML استاتیک تفسیر کنید می توانید از ReactDOMServer استفاده کنید.

ReactDOM تعدادی تابع برای ایجاد ارتباط بین React و مرورگرهای وب دارد، اما یکی از آنها که هر اپلیکیشن React از آن استفاده می کند ReactDOM.render است.

شکل زیر رابطه بین React، ReactDOM و مرورگر وب را نشان می دهد.

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

DOM مجازی

Document Object Model یا DOM، یک نمای داخلی مرورگر وب از صفحه وب است که می تواند HTML، استایل ها و محتوا را به گره هایی تبدیل کند که با استفاده از جاوااسکریپت قابل اجرا باشد.

اگر تا به حال از تابع getElementById استفاده کرده باشید یا innerHTML یک المان را تنظیم کرده باشید پس با استفاده از جاوااسکریپت با DOM کار کرده اید. تغییر در DOM باعث تغییر در آنچه که در مرورگر وب می بینید می شود و بروزرسانی های ایجاد شده در مرورگر وب باعث تغییر در DOM می شود ( مانند زمانی که داده ای را وارد یک فرم می کنید).

در مقایسه با دیگر کدهای جاوا اسکریپت، تغییر در DOM نیز آهسته و ناکارآمد است. این مساله به این دلیل است که وقتی DOM تغییر می کند، مرورگر باید بررسی کند که آیا نیازی به بازنشانی (refresh) صفحه هست یا نه و پس از آن بازنشانی انجام می شود.

یکی دیگر از دشواری های تغییر DOM این است که استفاده از توابع DOM همیشه ساده نیست و بعضی از آنها اسم بسیار طولانی دارند مثل Document.getElementsByClassName. بنابر همین دو دلیل، تعداد متنوعی از کتابخانه های مربوط به تغییر DOM در جاوااسکریپت، ایجاد شده است. یکی از کتابخانه های تغییر DOM که بسیار معروف است و استفاده گسترده ای نیز دارد، jQuery است. این کتابخانه یک راه ساده برای بروزرسانی DOM را به توسعه دهندگان وب می دهد، و این کار باعث تغییر روش ما برای ایجاد رابط کاربری در وب می شود.

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

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

در اینجا توضیح می دهیم که چطور این لایه کار می کند:

1. یک برنامه نویس کد React را برای ایجاد یک رابط کاربری می نویسد، که باعث بازگشت یک عنصر React می شود.
2. روش تبدیل ReactDOM باعث ایجاد نمایش ساده و کم حجم المان React در حافظه می گردد ( که این همان DOM مجازی است).
3. ReactDOM به رویدادهایی که نیاز به تغییر در صفحه وب را ایجاد می کنند، گوش می دهد.
4. متد render یک نمایش درون حافظه ای از صفحه وب ایجاد می کند.
5. کتابخانه ReactDOM نمایش DOM مجازی جدید صفحه وب را با نمایش DOM مجازی قبلی مقایسه کرده و تفاوت بین این دو را ارزیابی می کند. این فرآیند اصلاح (reconciliation) نامیده می شود.
6. ReactDOM به شکلی موثر حداقل تغییرات ممکن را به مرورگر DOM اعمال کرده و از بهینه ترین دسته بندی و زمانبندی تغییرات، استفاده میکند.

با خارج کردن برنامه نویس از فرآیند بروزرسانی مرورگر DOM، ReactDOM می تواند در مورد زمانبندی و روش بهینه ایجاد بروزرسانی های مورد نیاز، تصمیم گیری کند. اینکار به شدت باعث بهبود راندمان بروزرسانی نمای مرورگر، می شود.

شکل زیر تصویری از چگونگی عملکرد DOM مجازی را نشان می دهد.

فلسفه React

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

تفکر در کامپوننت ها

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

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

ایده اصل تک مسئولیتی در برنامه نویسی به این معناست که هر بخشی باید تنها مسئول یک بخش از عملکرد برنامه باشد. رابرت.سی مارتین که به نام "عمو باب" نیز شناخته می شود یکی از مهم ترین متفکران و نویسندگان در حوزه طراحی نرم افزار است. وی اصل تک مسئولیتی را به این شکل توصیف می کند:

تک مسئولیتی به این معناست که یک کلاس(یا آنچه که ما در React به آن کامپوننت) می گوییم، تنها باید یک دلیل برای تغییر داشته باشد.

ترکیب در مقابل وراثت

در برنامه نویسی شی گرا (OOP) ایجاد کلاس های متنوع که ویژگی هایی را از کلاس والد به ارث می برند، رایج است. برای مثال، یک برنامه ممکن است یک کلاس با نام Button داشته باشد، و این کلاس ممکن است فرزندی با نام SubmitButton داشته باشد. SubmitButton تمام ویژگی های Button را به ارث می برد و سپس برخی از آنها را حذف کرده یا توسعه می دهد تا ظاهر و عملکرد منحصربفرد خود را ایجاد کند.

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

برای مثال در مورد دکمه ارسال، ممکن است به سادگی یک پارامتری به نام label و پارامتر دیگری به نام handleClick که شامل عملکردی است که باید توسط Button انجام شود، را به کامپوننت Button بدهید. 

این دکمه در حالت کلی با توجه به مقادیر label و handleClick که به آن داده شده است، می تواند برای چندین هدف مختلف استفاده شود. لیست زیر نشان دهنده حالت های احتمالی این کامپوننت است.

function Button(props){
    return(
        <button onClick={props.handleClick}>{props.label}</button>
    );
}

زمانی که شما یک کامپوننت قابل پیکربندی را ایجاد می کنید، می توانید کامپوننت های خاص تر را با ترکیب موارد کلی تر با هم، ایجاد نمایید. این تکنیک ترکیب نامیده می شود. لیست زیر نشان می دهد که می توانید یک کامپوننت WelcomeDialog را با استفاده از ترکیب کامپوننت کلی Dialog ایجاد کنید.

function Dialog(props){
    return(
        <div className="dialogStyle">{props.message}</div>
    )
}

function WelcomeDialog(props){
    return(
       <Dialog message="Welcome to our app!" />
    )
}

React اعلانی است

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

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

1. برداشتن دو تکه نان
2. پیدا کردن چاقو
3. برداشتن کره بادام زمینی
4. استفاده از چاقو برای پخش کردن کره بادام زمینی
5. سرهم کردن ساندویچ

اما این مراحل برای عملکرد یک ربات بسیار سطح بالا هستند، بنابراین باید هر کدام را به مراحل کوچکتر بشکنید:

1. برداشتن دو تکه نان
   • استفاده از سنسورهای بینایی برای مکان یابی نان

• اگر نان را پیدا کرد به سمت آن برود
• اگر نان پیدا نشد، به مرحله 1 برگردد
  • از بازو برای تلاش برای باز کردن بسته نان استفاده کند

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

برای مثال، برای تغییر یک پاراگراف متن در مرورگر با استفاده از jQuery، باید کار زیر را انجام دهید:

$('#para1').html('<p>This is the new paragraph.</p>');

این کد به دنبال یک پاراگراف با id معادل با para1 می گردد و مقدار HTML آن را به مقدار جدیدی که داخل پرانتز آمده است، تغییر می دهد.

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

در برنامه نویسی اعلانی، ربات ساندوچ ساز ما باید مراحل مربوط به درست کردن ساندویچ را بداند، و برنامه نویسی آن شبیه این است که برنامه نویس بگوید "برای من ساندویچی شبیه این بساز".

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

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

React اصطلاحی است

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

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

چرا React بیاموزیم؟

اگر تا به اینجا مقاله رسیده اید، به احتمال زیاد در حال حاضر دلایل خودتان را برای یادگیری React دارید.  حتما می دانستید که تابحال در یک مجموعه خوب قرار گرفته اید- شهرت React از روز اول انتشارش، در حال افزایش است. نظرسنجی از توسعه دهندگان به طور متناوب نشان می دهد که این برنامه یا اولین و یا جز اولین کتابخانه های ترجیح داده شده توسط آنهاست و لیست شرکت هایی که تا به حال به سمت استفاده از React مهاجرت کرده اند یا در روند حرکت به سمت React هستند، قابل توجه است.

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

React در برابر ....

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

یک راه خوب برای یادگیری زبان جدید این است که آن را با آنچه که در حال حاضر می دانید مقایسه کنید، و این سوال که "چطور React با (x) مقایسه می شود" یکی از رایج ترین سوالاتی است که پرسیده می شود. در بخش های بعد، نگاهی خواهیم داشت به اینکه چگونه React در مقابل دو تا از نزدیک ترین رقیبانش می ایستد: Angular و Vue. در حالی که دوست ندارم از مورد خاصی حمایت کنم اما در مورد هر کدام به قدر کافی اطلاع دارم تا بتوانم برخی حقایق و برداشت هایم را بیان کنم.

React در برابر Angular

 Angular (angular.io) توسط گوگل ایجاد شد، و نسبت به React مدت زمان بیشتری از حضور آن می گذرد. پس با شباهت ها شروع میکنیم:

1. هدف. هم Angular و هم React می توانند رابط های کاربری پویا و مقیاس پذیری را ایجاد نمایند.
2. پایداری. هم Angular و هم React توسط یکی از بزرگترین شرکت های اینترنتی ایجاد شده اند و هر دو تعداد زیادی توسعه دهنده و هوادار دارند.
3. استحکام. یکی از مهمترین نگرانی ها در مورد هر کتابخانه جاوااسکریپتی این است که چقدر این کتابخانه ایمن، مطمئن و در حالت کلی قابل پذیرش برای توسعه شرکتی است. Angular  و React هر دو مشهور هستند و به طور گسترده در توسعه نرم افزارهای شرکتی بزرگ، استفاده می شوند.
4. تائیدیه. هر دو فریم ورک از تائیدیه MIT استفاده می کنند، و مادامی که قوانین کپی رایت اصلی و نکات تائیدیه در هر کپی از کد مرجع استفاده شود، امکان استفاده نامحدود و مجدد از آنها به صورت رایگان وجود دارد.

از زمانی که React به وجود آمده Angular  دست خوش تغییرات زیادی شده است. پیش از آنچه که ما در حال حاضر به آن “Angular”  می گوییم AngularJS وجود داشته که در سال 2016 با نسخه Angula 2.0 منتشر شد. Angular 2.0 یک نسخه کاملا تغییر یافته بود و با AngularJS سازگاری نداشت. معرفی این نسخه باعث شد تعداد زیادی از توسعه دهندگان تصمیم بگیرند به جای نسخه جدید نوشته شده Angular، React را بیاموزند.

Angular به عنوان یک "فریم ورک" در نظر گرفته می شود در حالی که React خود را یک "کتابخانه" می نامد. تفاوت یک کتابخانه و فریم ورک این است که یک فریم ورک معمولا یک روش فراگیر برای انجام دادن یک کار است، در حالی که اصولا یک کتابخانه به عنوان ابزاری برای هدف مشخص تر، شناخته می شود.

کتابخانه React یک ابزار برای ایجاد رابط های کاربری توسط کامپوننت های مختلف است. از طرف دیگر Angular یک سیستم کامل برای ایجاد Front-end وب اپلیکیشن ها می باشد. React با کنار هم قرار دادن کامپوننت ها و کتابخانه های مختلف می تواند هر کاری را که Angular قادر به انجام آن است، انجام دهد. اما در صورتی که نیاز به انجام یک کار کوچک تر داشته باشید، مانند ایجاد برخی صفحات HTML، React این کار را نیز می تواند انجام دهد.

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

برخلاف React که روی DOM مجازی کار می کند، Angular روی DOM واقعی کار کرده و تغییرات DOM را با استفاده از روشی که کشف تغییر (Change Detection) نامیده میشود، بهینه می نماید. وقتی که یک رویدادی باعث تغییر داده در Angular می شود، فریم ورک کامپوننت های مرتبط را بررسی کرده و در صورت نیاز آن را آپدیت می کند. ممکن است این روش را به عنوان روش ضروری تر (در مقایسه با روش اعلانی React) برای تغییر DOM ببینید.

Angular   و React در مورد نحوه جابجایی داده در اپلیکیشن نیز متفاوت هستند. همان طور که می بینید React از یک روش انتقال داده استفاده می کند. به این معنا که هر تغییری که در مرورگر رخ دهد باعث آغاز یک تغییر در مدل داده می شود. این شیوه متفاوت از Angular و Vue است، هر دو اینها دارای اتصال داده دو طرفه هستند، که در این روش تغییرات در مرورگر می تواند به طور مستقیم بر مدل داده ها تاثیر گذارد و تغییر در مدل داده ها نیز بر نحوه نمایش تاثیرگذار خواهد بود.

React در مقابل Vue

Vue.js (vuejs.org)  تقریبا یک عضو جدید در دنیای فریم ورک های جاوااسکریپت می باشد، اما شهرت آن در حال افزایش است و در حال حاضر به عنوان یکی از سه عضو برتر، در کنار React و Angular قرار دارد.

مانند React و Angular، Vue نیز متن باز است. اما برخلاف React و Angular، Vue توسط یک شرکت بزرگ کنترل نمی شود. در عوض، Vue کار بسیاری از برنامه نویسان و شرکت هایی است که مهارت های خود را وقف حفظ و پشتیبانی از آن کرده اند. بسته به نظر شما در مورد شرکت های بزرگ اینترنتی این مورد می تواند یک نقطه مثبت یا منفی باشد.

Vue نقطه میانه بین روش حداقلی React و روش متنوع Angular است. مانند Angular ، Vue نیز براساس عملکرد مبتنی بر مدیریت حالت، مسیریابی و مدیریت CSS، ساخته شده است. اما مانند React یک کتابخانه کوچک است (حتی از نظر حجم کیلوبایتی که باید در مرورگر دانلود شود از React نیز کوچکتر است) و نحوه استفاده از آن به شدت قابل تنظیم است.

بین این سه کتابخانه، احتمالا Vue آسان ترین گزینه برای یادگیری است.

React چه چیزی نیست؟

علاوه بر اینکه بدانید React چه هست، بسیار مهم است که بدانید React چه چیزی نیست. ورای بحث مکرر (و بیشتر مفهومی) در مورد اینکه React یک کتابخانه است یا یک فریم ورک، تمایزات مهم تری بین کتابخانه های front-end، Back-end و محیط توسعه وجود دارد.

React که بیشتر اوقات استفاده می شود، یک کتابخانه Front-end است. به این معنا که هر کاری که React انجام می دهد در مرورگر وب ظهور پیدا می کند. React نمی تواند به طور مستقیم پایگاه داده را کنترل کند یا از راه دور به آن دسترسی داشته باشد (به جز از طریق وب) و به صفحات وب سرویس نمی دهد.

شکل زیر یک نمای کلی از Front-End  و Back-End ر ا نشان می دهد.

می دانید که React یک کتابخانه جاوااسکریپت Front-End است. همان طور که در شکل قبلی دیدید، قسمت های دیگر زیادی در اکوسیستم وب وجود دارد. در اینجا تعدادی از مواردی که React نیست را بیان می کنیم.

React یک وب سرور نیست

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

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

React یک زبان برنامه نویسی نیست

React یک کتابخانه جاوااسکریپت است به این معنا که تنها مجموعه ای از توابع جاوااسکریپت است که برنامه نویسان میتوانند از آن استفاد کنند. ایده استفاده از کتابخانه این است که کارهای رایجی که برنامه نویسان به صورت متناوب انجام می دهند، آسان تر شود تا بتوانند صرفا روی کدی تمرکز کنند که باعث منحصر بفرد شدن برنامه می شود.

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

React یک سرور پایگاه داده نیست

React هیچ توانایی برای ذخیره داده به شکلی ایمن یا به روش دائمی، ندارد. در عوض رابط های کاربری  React (مانند هر وب یا رابط کاربری وب موبایل) از طریق اینترنت با پایگاه داده سمت سرور، ارتباط برقرار می کنند تا داده هایی مانند اطلاعات ورودی، داده های نقل و انتقالات مالی، بخش های خبری و غیره را ذخیره و دریافت کنند.

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

React یک محیط توسعه نیست

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

React بهترین راه حل برای هر مشکلی نیست

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

خلاصه

ازآنجایی که React یک راه متفاوت برای نوشتن رابط های کاربری برای وب است، مفاهیم و ایده های پایه ای پشت آن وجود دارد که فهم آنها پیش از اینکه به طور موثر با آن کار کنید، اهمیت دارد. در انتها، باید گفت نوشتن رابط های کاربری با React ساده است:

1. کامپوننت هایی را می نویسید که نشان می دهد رابط کاربری چطور به نظر میرسد و عمل می کند
2. React کامپوننت های شما را تفسیر کرده تا یک درختی از گره ها ایجاد نماید
3. مفسر React تفاوت بین درخت کامپوننت هایی که جدیدا ارائه شده است و مورد قبلی را تشخیص داده و رابط کاربری را براساس آن بروز رسانی می کند.

در این مقاله یادگرفتید که :

• چرا React، React نامیده می شود، و معنای عبارت "برنامه نویسی واکنشی" چیست
• هدف کتابخانه React و کتابخانه ReactDOM چیست
• ترکیب چیست
• در مورد برنامه نویسی اعلانی و تفاوت آن با برنامه نویسی دستوری را آموختید
• چرا باید React را بیاموزید
• React چطور با Angular , و js مقایسه می شود
• نقش React در وب اپلیکیشن چیست و React چه نقش هایی را در اکوسیستم وب اپلیکیشن، ایفا نمی کند.