معرفی ری اکت React JS و ویژگی های آن

React js محبوبترین کتابخانه front-end جاوا اسکریپت در زمینه توسعه وب است. این کتابخانه توسط شرکت های بزرگ مثل (Netflix, Airbnb, Instagram ) و حتی استارتاپ های تازه تاسیس مورد استفاده قرار می‌گیرد. استفاده از ری اکت مزایای زیادی را به همراه دارد و آن را به گزینه ای بهتر از سایر فریم ورک ها مانند Angular.js تبدیل می‌کند.

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

• React چیست؟
• چرا ری اکت را انتخاب کنیم؟
• ویژگی های ری اکت
• پیش نیاز های ری اکت

React چیست؟

یک کتابخانه جاوا اسکریپت متن باز (open-source) مبتنی بر component-based که توسط یک مهندس نرم افزار در فیس بوک به نام Jordan Walke برای ایجاد رابط کاربری بصورت سریع و تعاملی برای برنامه های وب و تلفن همراه ایجاد شده است. ری اکت اولین بار در سال 2011 در فیس بوک و در سال 2012 در اینستاگرام مورد استفاده قرار گرفت و نهایتا در سال 2013 به صورت عمومی انتشار پیدا کرد.

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

حالا که فهمیدیم React چیست بیاید ببینیم چرا React محبوبترین کتابخانه front-end برای توسعه برنامه های وب است.

چرا ری اکت را انتخاب کنیم؟

دلایلی که React توانسته است محبوبیت سایر فریم ورک های توسعه front-end را کمرنگ کند عبارتند از:

• ایجاد آسان برنامه های پویا: React ایجاد برنامه های تحت وب پویا را آسان می‌کند زیرا دقیقا برعکس JavaScript که کدگذاری در آن اغلب خیلی زود پیچیده می‌شود، اما React به کدگذاری کمتری نیاز دارد و عملکرد بیشتری را ارائه می‌دهد.
• عملکرد بهتر: ری اکت از Virtual DOM استفاده می‌کند، بنابراین برنامه های وب را سریعتر ایجاد می‌کند. Virtual DOM وضعیت های قبلی مولفه ها را مقایسه می‌کند و فقط مواردی را که در DOM واقعی تغییر کرده اند به جای تغییر مجدد همه مولفه ها، بروزرسانی می کند.
• اجزای قابل استفاده مجدد: کامپوننت ها عناصر سازنده هر برنامه React هستند و یک برنامه معمولاً از چندین کامپوننت تشکیل شده است. این کامپوننت ها منطق و کنترل های خود را دارند و می‌توانیم از آنها در طول برنامه چندین بار استفاده کنیم، که به نوبه خود زمان توسعه برنامه را به طرز چشمگیری کاهش می‌دهد.
• منحنی کوچک یادگیری: یادگیری ری اکت آسان است، زیرا بیشتر مفاهیم پایه HTML و JavaScript را با برخی اضافات مفید ترکیب می‌کند. ولی مانند سایر ابزارها و چارچوب ها، باید کمی وقت بگذارید تا درک درستی از کتابخانه React داشته باشید.
• می‌تواند برای توسعه هر دو پلتفرم وب و تلفن همراه مورد استفاده قرار گیرد: ما از قبل می‌دانیم که React برای توسعه برنامه های وب استفاده می‌شود، اما این تمام کاری نیست که می‌تواند انجام دهد. چارچوبی به نام React Native برگرفته از خود React وجود دارد که بسیار محبوب است و برای ایجاد برنامه های کاربردی تلفن همراه به صورت Cross-platform کاربرد دارد. بنابراین از React می‌توان برای ساخت برنامه های تحت وب و موبایل استفاده کرد.
• ابزارهای اختصاصی برای اشکال زدایی آسان: افزونه هایی برای مرورگرهای پر استفاده مانند Chrome و firefox منتشر شده است که می‌تواند برای اشکال زدایی برنامه های React استفاده شود. این باعث می‌شود روند اشکال زدایی برنامه های وب React سریعتر و راحت تر انجام شود.

ویژگی های ری اکت

JSX – JavaScript Syntax Extension

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

const name = 'PishroSystem';
const greet = <h1>Hello, {name}</h1>;

کد بالا نحوه کدنویسی JSX در React را نشان می‌دهد. این کد نه یک String است و نه HTML ، بلکه جاسازی کدهای HTML در کد JavaScript است.

Virtual DOM

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

در حال حاضر ممکن است توضیح بالا کمی گنگ و نامفهوم به نظر برسد، بنابراین بیایید ابتدا بفهمیم DOM چیست و سپس نحوه تعامل VDOM و DOM اصلی را بررسی کنیم.

DOM (Document Object Model) یک سند XML و یا HTML را به عنوان یک ساختار درختی در نظر می‌گیرد که در آن هر گره یک شی (object)، نمایانگر بخشی از سند است.

حال سوال اینجاست که Virtual DOM و React DOM چگونه به یکدیگر مرتبط هستند؟ وقتی وضعیت یک شی در یک برنامه React تغییر می‌کند، VDOM به روز می‌شود. سپس حالت قبلی خود را مقایسه می‌کند و سپس به جای به روزرسانی همه اشیا، فقط آن اشیا موجود در DOM واقعی را به روز می‌کند. این باعث می‌شود همه چیز سریع پیش برود، به خصوص وقتی با سایر فناوری های front-end مقایسه می‌شود که مجبور هستند همه اشیا را بروز کنند حتی اگر فقط یک object در برنامه وب تغییر کند.

Performance

ریکت از VDOM استفاده می‌کند، که باعث می‌شود برنامه های وب بسیار سریعتر از برنامه های توسعه یافته با فریم ورک های front-end متناوب اجرا شوند. React یک رابط کاربری پیچیده را به اجزای جداگانه تقسیم می‌کند و به چندین کاربر اجازه می‌دهد تا همزمان روی هر مولفه کار کنند که در نتیجه آن سرعت توسعه را افزایش می‌دهند.

Extensions

ری اکت فراتر از طراحی رابط کاربر ساده است و افزونه های بسیاری دارد که پشتیبانی کاملی از معماری برنامه را ارائه می‌دهند. به عنوان مثال امکان server-side rendering را ارائه دهند که یک برنامه تحت وب client-side در سمت سرور رندر می شود و سپس یک صفحه کامل به مرورگر کاربر ارسال کنند که برای مسائل مربوط به سئو می تواند مفید باشد یا استفاده از Flux و Redux به طور گسترده در توسعه برنامه های وب و سرانجام، React Native که یک چارچوب محبوب مشتق شده از ری اکت است که برای ایجاد برنامه های تلفن همراه Cross-platform استفاده می‌شود.

One-way Data Binding

اتصال داده یک طرفه ری اکت همه چیز را modular و سریع نگه می‌دارد. جریان داده یک طرفه به این معنی است که داده ها به یک جهت حرکت میکنند که این نشان دهنده Model to View است. اگر Model بروزرسانی شود View نیز بروزرسانی می شود و به دلیل استفاده ری اکت از DOM مجازی این عمل باعث خواهد شد فرآیند طراحی مجدد view بسیار کارآمد باشد.

Debugging

تست و خطایابی برنامه های ری اکت به دلیل وجود یک جامعه بزرگ توسعه دهنده بسیار آسان است. همچنین فیس بوک یک افزونه کوچک مرورگر ارائه داده است که اشکال زدایی React را سریعتر و آسان تر می‌کند. به عنوان مثال، این افزونه برگه های Profiler و Components را در گزینه developer tools در مرورگر وب Chrome اضافه می‌کند که بررسی مستقیم اجزای استفاده شده در صفحه را آسان خواهد کرد.

پیش نیاز های ری اکت

برخی از مفاهیمی که برای یادگیری و شروع کار با ری اکت نیاز است تا آشنا باشید عبارتند از:

1. مفاهیم برنامه نویسی مانند توابع ، اشیا ، آرایه ها و کلاس ها
2. دانش پایه ای JavaScript
3. آشنایی با HTML

امروزه ری اکت جایگاه ویژه ای در توسعه برنامه های front-end پیدا کرده است که نشان دهنده استفاده مداوم آن در بین توسعه دهندگان است. با توجه به ارائه سریع برنامه های ری اکت، شرکت های بیشتری این ابزار توسعه را جایگزین روش های قدیمی کرده اند که متعاقباً این امر منجر به تقاضای بیشتر توسعه دهندگان React در سراسر جهان شده است.

فیسبوک بطور مدام ویژگی هایی را به React اضافه می‌کند و با گذشت زمان قدرت آن بیشتر شده است. همانطور که در نمودار روند Google مشاهده می کنید، همچنان توانسته است جایگاه اول خود را در سال 2021 حفظ کند.