برنامه‌نویسی فرانت اند یکی از شاخه‌های جذاب برنامه‌نویسی و طراحی وبسایت است. کتابخانه‌های بسیاری برای برنامه‌نویسی فرانت اند وجود دارد، اما به جرئت می‌توان گفت کتابخانه React محبوب‌ترین کتابخانه برنامه‌نویسی ری اکت در دنیاست.
شاید این سوال برای بسیاری از افراد ایجاد شود که چه عواملی باعث شده تا ری اکت، محبوب‌ترین کتابخانه برنامه‌نویسی Front-End باشد؟
در این مقاله به ۱۰ مفهوم اساسی و پایه‌ای ری اکت اشاره شده است که به شما کمک می‌کند شناخت خوبی از قابلیت‌های این کتابخانه قدرتمند پیدا کنید.
آنچه در این نوشته خواهیم داشت
۱. کامپوننت‌ها
کامپوننت‌های React مانند “قطعات سازنده” برنامه هستند. به عبارت دیگر هر برنامه‌ی React از قطعات کوچک‌تری به نام کامپوننت ساخته شده است. این قطعات می‌توانند هرچیزی باشند، از المان‌های ساده مانند دکمه گرفته یا چیزهای پیچیده‌تر مثل یک فرم یا سبد خرید و… .
استفاده از کامپوننت‌ها فرآیند طراحی رابط کاربری را به طور قابل توجهی ساده‌تر می‌کند. برنامه‌نویس، رابط کاربری (UI) را به قطعات جداگانه یا کامپوننت‌های کوچک‌تر تقسیم کرده و بر روی هر کدام به‌صورت مستقل کار می‌کند، سپس همه را در یک کامپوننت والد جمع می‌کند تا رابط کاربری نهایی ایجاد شود.
در مقاله “کامپوننت‌های ری اکت، قطعات سازنده صفحات وبسایت” به کامپوننت‌ها، انواع مختلف و مزایای آن در برنامه‌نویسی ری اکت پرداخته شده است.
۲. چرخه حیات کامپوننت‌ها
کامپوننت‌های ری اکت هر کدام دوره عمر مشخصی از جمله مرحله نصب (Mounting)، به‌روزرسانی (Updating)، و حذف (Unmounting) دارند. برنامه‌نویس می‌تواند بسته به مرحله‌ای که کامپوننت در آن قرار دارد، عملیات خاصی را انجام دهد. چرخه حیات (Lifecycle) کامپوننت‌های React به برنامه‌نویسان امکان کنترل دقیق و منطقی بر روی رفتار کامپوننت در هر مرحله از حیات آن را می‌دهد.
۳. JSX (JavaScript XML)
JSX در React یک نوع نحوهٔ نوشتن کد است که به برنامه‌نویس امکان می‌دهد تا کدها را با ساختار ساده‌تری مانند HTML، در کد جاوا اسکریپت استفاده کنید. بزرگ‌تین مزیت JSX در ری اکت این است که کدها خواناتر و قابل درک باشند.
برای مثال، اگر قرار باشد در React یک المان رابط کاربری مثل یک دکمه را با استفاده از JSX بسازید، کد آن به شکل زیر نوشته می‌شود:
const myButton = <button color="blue">Click Me</button>;
در این خط کد یک دکمه با رنگ آبی و متن مشخص تعریف شده است.
توجه کنید که مرورگرها مستقیماً JSX را درک نمی‌کنند و نمی‌توانند آن را اجرا کنند. در نتیجه برای اجرا نیاز است ابتدا به زبان جاوا اسکریپت ترجمه شوند.
۴. State (وضعیت)
State مثل یک حافظه است که اطلاعات مهم کامپوننت‌ها را نگه می‌دارد. زمانی‌که ویژگی یک کامپوننت تغییر کند، صفحه دوباره لود می‌شود تا تغییرات را نمایش دهد.
برای مثال در یک دکمه، تعداد کلیک‌های روی آن در State ذخیره و با هربار کلیک به‌روزرسانی می‌شود.
در نتیجه، استفاده از state در ری اکت، کمک می‌کند تا تا رابط کاربری به‌روز و پویا باشد.
مدیریت وضعیت‌ها
در برنامه‌های پیچیده ری اکت، مدیریت وضعیت (State) ممکن است به یک چالش بزرگ برای برنامه‌نویسان تبدیل شود. برای مدیریت State در برنامه‌های پیچیده از دو ابزار Redux و Context API استفاده می‌شود.
Redux یک ابزار معروف برای مدیریت وضعیت است که به برنامه‌نویس کمک می‌کند تمام Stateهای برنامه را به صورت مرکزی در یک مخزن (store) ذخیره کند. Redux امکان پیش‌بینی و مدیریت وضعیت را به صورت ساختارمند و یکپارچه فراهم می‌کند.
Context API یکی دیگر از ابزارهای داخلی ری اکت است که این امکان را به برنامه‌نویس می‌دهد تا یک State یا وضعیت را بین چندین کامپوننت به اشتراک بگذارد.
بیشتر بخوانید: “مفهوم و کاربرد state در React JS برای تازه کارها“
۵. استفاده از DOM مجازی
مفهوم DOM مخفف Document Object Model، یکی دیگر از کاربردهای ری اکت است که برای مدیریت و کنترل بهتر کدها استفاده می‌شود.
DOM یک ساختار درختی است که مرورگر بر اساس HTML صفحه وب، آن را ایجاد می‌کند و هر المان در صفحه را به شکل یک شیء در این درخت نمایش می‌دهد.
برنامه‌نویس ری اکت به جای اینکه تغییرات را مستقیماً در DOM اصلی اعمال کند، از یک نمایش مجازی (Virtual DOM) استفاده می‌کند. یعنی هر تغییر در وضعیت یا داده کامپوننت را در این نمایش مجازی اعمال می‌کند. در نهایت، به‌جای اینکه با هر تغییر کل DOM اصلی را به‌روز کند، با مقایسه DOM مجازی و واقعی، فقط تغییرات لازم روی DOM اصلی اعمال می‌شوند.
این روند به بهینه‌سازی عملکرد و افزایش سرعت در فرآیند رندر و به‌روزرسانی صفحه بسیار کمک می‌کند.
۶. Props
در React، هر کامپوننت می‌تواند داده‌هایی را از کامپوننت دیگر دریافت کند. این داده‌ها به عنوان “props” به کامپوننت ارسال می‌شوند. Props می‌توانند هر نوع اطلاعاتی باشند، مانند متن، عدد، آرایه، یا حتی تابع.
حالا بیایید با یک مثال ساده توضیح دهیم:
فرض کنید یک کامپوننت دکمه (Button) داریم و می‌خواهیم متن دکمه را مشخص کنیم. در اینجا از props استفاده می‌کنیم. به عبارت دیگر، متن دکمه را به عنوان یک ویژگی به کامپوننت دکمه ارسال می‌کنیم.
// یک کامپوننت ساده برای دکمه
function Button(props) {
return <button>{props.text}</button>;
}
// استفاده از کامپوننت دکمه با ارسال ویژگی (props)
function App() {
return <Button text="کلیک کنید!" />;
}
در این کد `text` یک ویژگی (prop) است که به کامپوننت `Button` ارسال شده و درون آن استفاده می‌شود.
۷. React Router
React Router یک ابزار مهم در React است که به برنامه‌نویسان کمک می‌کند تا به راحتی بین صفحات مختلف یک وبسایت React حرکت کنند. به این ترتیب، امکان مدیریت بخش‌های مختلف وبسایت به صورت جداگانه وجود دارد.
فرض کنید وبسایت دو صفحه دارد: صفحه مقالات و تماس با ما. با استفاده از React Router، برنامه‌نویس تعیین می‌کند کاربر زمانی که به مسیر “articles/” می‌رود، محتوای مقالات نمایش داده شود و زمانی که به “contact/” می‌رود، محتوای تماس برای او ظاهر شود.
۸. Hooks
Hooks به برنامه‌نویسان React این امکان را می‌دهند که در کامپوننت‌های فانکشنال (که مانند توابع معمولی نوشته می‌شوند) از ویژگی‌های پیشرفته React استفاده کنند. یعنی به جای اینکه از کامپوننت‌های کلاسی استفاده کنیم، که به کد بیشتری نیاز دارند و پیچیده‌تر هستند، با استفاده از Hooks می‌توانیم کدهای ساده‌تر و قابل فهم‌تری بنویسیم.
Error Handling .۹
در React، مدیریت خطا (Error Handling) یک بخش حیاتی برای ساخت برنامه‌های قوی و پایدار است. React امکاناتی برای مدیریت خطا فراهم کرده است که به آن “حاشیه خطا” (Error boundaries) می‌گویند. حاشیه‌های خطا کامپوننت‌هایی هستند که جلوی بروز خطاهای جاوا اسکریپتی را در کامپوننت‌های فرزندشان را می‌گیرند. این ویژگی به برنامه‌نویس این امکان را می‌دهد که به شیوه‌ای متداول خطاها را مدیریت کرده و از خراب شدن کل برنامه جلوگیری کنید.
Conditional Rendering .۱۰
گاهی اوقات برنامه‌نویس می‌خواهد اطلاعات را بر اساس یک شرط خاص به کاربر نشان دهد. اگر این شرط برقرار باشد، اطلاعات نمایش داده می‌شوند؛ در غیر این صورت، نمایش داده نشوند.
این مفهوم به نام “رندرینگ شرطی” معروف است و یک مفهوم مهم در برنامه‌نویسی React است. برنامه‌نویس می‌توانید از عملگرهای مقایسه، استفاده کند.
بیشتر بخوانید: “مروری بر عملگرها و عبارات در جاوا اسکریپت“
کلام آخر
ReactJS یک کتابخانه قدرتمند برای برنامه‌نویسی وبسایت است که به برنامه‌نویس این امکان را می‌دهد تا رابط کاربری پویا و واکنش‌پذیر بسازد. اگر به برنامه‌نویسی ری اکت علاقه دارید و یا می‌خواهید یادگیری React را شروع کنید، آشنایی با ده مفهوم اساسی که در این مقاله به آن پرداخته شد، به شما یک دید خوبی از برنامه‌نویسی فرانت اند وبسایت می‌دهد.
اگر به برنامه‌نویسی فرانت اند وبسایت و کار با کتابخانه React علاقه دارید، در دوره جامع آموزش ری اکت آکادمی آمانج شرکت کنید.