10 مفهوم اصلی React


برنامه نویسی فرانت اند یکی از جالب ترین شاخه های برنامه نویسی و طراحی وب سایت است. کتابخانه های زیادی برای برنامه نویسی front-end وجود دارد، اما به جرات می توان گفت که کتابخانه React محبوب ترین کتابخانه برنامه نویسی React در جهان است.

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

این مقاله به 10 مفهوم اساسی React اشاره می کند که به شما کمک می کند تا توانایی های این کتابخانه قدرتمند را به خوبی درک کنید.

1. اجزاء

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

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


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


2. چرخه عمر قطعات

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

3. JSX (جاوا اسکریپت XML)

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

برای مثال، اگر بخواهید یک عنصر UI مانند یک دکمه در React با استفاده از JSX ایجاد کنید، کد آن به صورت زیر نوشته می‌شود:

const myButton = ;

در این خط کد دکمه ای با رنگ آبی و متنی مشخص تعریف شده است.

توجه داشته باشید که مرورگرها مستقیماً JSX را نمی‌فهمند یا اجرا نمی‌کنند. در نتیجه، برای اجرا باید به زبان جاوا اسکریپت ترجمه شوند.

4. شرط

State مانند حافظه است که اطلاعات مهمی را در مورد اجزا ذخیره می کند. هنگامی که یک ویژگی جزء تغییر می کند، صفحه دوباره بارگذاری می شود تا تغییرات را منعکس کند.

به عنوان مثال در یک دکمه تعداد کلیک های روی آن در یک حالت ذخیره می شود و با هر کلیک به روز می شود.

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

مدیریت موقعیت

در برنامه های پیچیده React، مدیریت حالت می تواند به یک چالش بزرگ برای توسعه دهندگان تبدیل شود. ابزار Redux و Context API برای مدیریت وضعیت در برنامه های پیچیده استفاده می شود.

Redux این یک ابزار معروف مدیریت حالت است که به برنامه نویس کمک می کند تا تمام حالت های برنامه را به صورت متمرکز در یک فروشگاه ذخیره کند. Redux توانایی پیش بینی و مدیریت وضعیت را به روشی ساختاریافته و یکپارچه فراهم می کند.

Context API یکی دیگر از ابزارهای داخلی React است که به توسعه دهنده اجازه می دهد تا حالت را بین چندین مؤلفه به اشتراک بگذارد.


بیشتر بخوانید: “مفهوم و استفاده از حالت در React JS برای مبتدیان


5. از DOM مجازی استفاده کنید

مفهوم DOM مخفف Document Object Model یکی دیگر از کاربردهای React است که برای مدیریت و کنترل بهتر کد استفاده می شود.

DOM یک ساختار درختی است که مرورگر بر اساس HTML صفحه وب ایجاد می کند و هر عنصر را در صفحه به عنوان یک شی در آن درخت نمایش می دهد.

به جای اعمال تغییرات مستقیم در DOM اصلی، توسعه‌دهنده React از یک نمایش مجازی (Virtual DOM) استفاده می‌کند. یعنی هر تغییری در وضعیت یا داده های کامپوننت در آن نمای مجازی اعمال می شود. در نهایت به جای به روز رسانی کل DOM اصلی با هر تغییر، با مقایسه DOM مجازی و واقعی، تنها تغییرات لازم بر روی DOM اصلی اعمال می شود.

این فرآیند به بهینه سازی عملکرد و افزایش سرعت در فرآیند رندر و به روز رسانی صفحه کمک می کند.

6. لوازم

در React هر کامپوننتی می تواند داده ها را از کامپوننت دیگری دریافت کند. این داده ها به عنوان “props” به کامپوننت ارسال می شود. Props می تواند هر نوع داده ای مانند متن، عدد، آرایه یا حتی یک تابع باشد.

حالا با یک مثال ساده توضیح می دهیم:

فرض کنید یک جزء دکمه داریم و می خواهیم متن دکمه را مشخص کنیم. در اینجا ما از لوازم جانبی استفاده می کنیم. به عبارت دیگر، متن دکمه را به عنوان یک ویژگی به مولفه دکمه منتقل می کنیم.

// یک کامپوننت ساده برای دکمه
function Button(props) {
  return ;
}

// استفاده از کامپوننت دکمه با ارسال ویژگی (props)
function App() {
  return 

در این کد، “text” یک ویژگی (prop) است که به کامپوننت “Button” منتقل می شود و در داخل آن استفاده می شود.

7. React Router

React Router یک ابزار مهم در React است که به توسعه دهندگان کمک می کند تا به راحتی بین صفحات مختلف یک وب سایت React حرکت کنند. به این ترتیب می توان قسمت های مختلف وب سایت را به صورت جداگانه مدیریت کرد.

فرض کنید یک وب سایت دارای دو صفحه است: صفحه مقاله و صفحه تماس با ما. توسعه دهنده با استفاده از React Router مشخص می کند که وقتی کاربر به «articles/» می رود، محتوای مقالات نمایش داده می شود و زمانی که به «contact/» می روند، محتوای مخاطب برای او نمایش داده می شود.

8. قلاب

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

رسیدگی به خطا .9

در React، مدیریت خطا بخش مهمی از ساخت برنامه های کاربردی قابل اعتماد و پایدار است. React امکانات رسیدگی به خطا را فراهم کرده است که به آنها “Error Boundaries” گفته می شود. مرزهای خطا مؤلفه هایی هستند که از بروز خطاهای جاوا اسکریپت در مؤلفه های فرزندشان جلوگیری می کنند. این ویژگی به برنامه نویس اجازه می دهد تا خطاها را به صورت کلی مدیریت کند و از خراب شدن کل برنامه جلوگیری کند.

رندر شرطی .10

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


بیشتر بخوانید: “مروری بر عملگرها و عبارات جاوا اسکریپت


آخرین کلمه

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


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