راهنمای کامل در مورد اینکه React چیست

بهترین راهنما برای دانستن این که React چیست!

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

React چیست؟

ری اکت یک لایبرری برنامه نویسی UI، مبتنی بر جاوا اسکریپت است که توسط فیس بوک و جامعه ای از برنامه نویسان open_source اداره میشود. اگرچه React یک کتابخانه است تا این که یک زبان باشد، اما به طور گسترده در توسعه وب استفاده می شود. این کتابخانه برای اولین بار در می 2013 ظاهر شد و اکنون یکی از رایج ترین کتابخانه های فرانت اند برای توسعه وب میباشد.
> ری اکت extension های مختلفی را برای پشتیبانی معماری کل برنامه‌ها، مانند Flux و React Native، فراتر از UI محض ارائه می‌دهد.

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

محبوبیت React امروزه از همه فریمورک های مخصوص دولپ front-end دیگر فراتر رفته است. در این قسمت دلایل آن ذکر شده است:

• ایجاد آسان برنامه های داینامیک: React ایجاد برنامه های کاربردی داینامیک وب را آسان تر می کند، زیرا به کدنویسی کمتری نیاز دارد و عملکرد بیشتری را ارائه می دهد،درست برخلاف جاوا اسکریپت، که در آن کدنویسی اغلب بسیار سریع پیچیده می شود.
• عملکرد بهبود یافته: React از Virtual DOM استفاده می‌کند و در نتیجه برنامه‌های وب را سریع‌تر ایجاد می‌کند. Virtual DOM استیت های قبلی مؤلفه‌ها را مقایسه می‌کند وفقط مواردی را در Real DOM که تغییر کرده‌اند به‌روزرسانی می‌کند به جای اینکه همه مؤلفه‌ها را دوباره به‌روزرسانی کند، همانطور که وب اپلیکیشن های معمولی انجام می‌دهند.
• کامپوننت های دارای قابلیت استفاده مجدد: کامپوننت ها بلوک های سازنده هر برنامه React هستند و یک برنامه واحد معمولاً از چندین کامپوننت تشکیل شده است. این کامپوننت ها منطق و کنترل‌های خود را دارند و می‌توان از آنها در سراسر برنامه استفاده مجدد کرد که به نوبه خود زمان توسعه برنامه را به‌طور چشمگیری کاهش می‌دهد.
• جریان داده های یک طرفه: React از یک جریان داده یک طرفه پیروی می کند. این بدان معنی است که هنگام طراحی یک برنامه React اغلب کامپوننت های فرزند را در کامپوننت های والد قرار می دهند. از آنجایی که داده ها در یک جهت جریان می یابند، دیباگ کردن خطاها و دانستن محل بروز مشکل در یک برنامه کاربردی در لحظه مورد نظر آسان تر می شود.
• می‌توان از آن برای توسعه برنامه‌های وب و موبایل استفاده کرد: ما از قبل می‌دانیم که React برای توسعه برنامه‌های کاربردی وب استفاده می‌شود، اما این تنها کاری نیست که می‌تواند انجام دهد. چارچوبی به نام React Native وجود دارد که از خود React گرفته شده است که بسیار محبوب می باشد و برای ایجاد اپلیکیشن های زیبای موبایل استفاده می شود. بنابراین، در واقعیت، React می تواند برای ساخت برنامه های تحت وب و موبایل استفاده شود
• ابزارهای اختصاصی برای دیباگ کردن آسان: فیس بوک اکستنشن کروم را منتشر کرده است که می توان از آن برای دیباگ کردن برنامه های React استفاده کرد. این باعث می شود که فرآیند دیباگ کردن برنامه های وب React سریعتر و آسان تر شود.

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

ویژگی های React

React برخی از ویژگی‌های فوق العاده ای را ارائه می‌کند که آن را به محبوب‌ترین کتابخانه برای دولپ برنامه‌های frontend تبدیل می‌کند. در اینجا لیستی از آن ویژگی های برجسته وجود دارد.

JSX

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

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

مدل شیء داکیومنت Virtual DOM

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

• مدل شیء داکیومنت Document Object Model (DOM) چیست؟


DOM (مدل شیء داکیومنت) یک داکیومنت XML یا HTML را به عنوان یک ساختار درختی در نظر می گیرد که در آن هر گره یک شی است که نمایانگر بخشی از داکیومنت است.

• Virtual DOM و React DOM چگونه با یکدیگر تعامل دارند؟

هنگامی که استیت یک شی در برنامه React تغییر می کند، VDOM به روز می شود. سپس وضعیت قبلی خود را مقایسه می کند و سپس به جای به روز رسانی تمام اشیاء، فقط آن اشیاء را در real DOM به روز می کند. این باعث می‌شود کارها سریع پیش بروند، به‌ویژه در مقایسه با سایر فناوری‌های فرانت‌اند که باید هر شی را به‌روزرسانی کنند، حتی اگر تنها یک شی در برنامه وب تغییر کند.

• معماری(Architecture)

در معماری React ، Model View Controller (MVC) یک «View» است که مسئول ظاهر طراحی گرافیکی برنامه است.
MVC یک الگوی معماری است که لایه برنامه را به Model، View و Controller تقسیم می کند. مدل به تمام لاجیک یا همان منطق مربوط به داده مرتبط است. view برای منطق UI اپلیکیشن استفاده می شود و کنترلر یک رابط بین Model و View می باشد.