مفاهیم پایه‌ای در React

مفاهیم پایه‌ای در React

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

کامپوننت‌ها: Function vs Class

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

کامپوننت تابعی (Function Component)

function Welcome(props) {
 return 
کامپوننت کلاسی (Class Component)

class Welcome extends React.Component {
 render() {
 return 

امروزه با معرفی Hooks، استفاده از کامپوننت‌های تابعی بسیار رایج‌تر شده است.

Props و State

Props (خصوصیات):

داده‌هایی هستند که از کامپوننت والد به فرزند ارسال می‌شوند. props فقط قابل خواندن (read-only) هستند و نمی‌توان آن‌ها را در کامپوننت فرزند تغییر داد.

function Hello(props) {
 return 
سلام {props.name}
;

State (وضعیت):

state برای مدیریت داده‌های متغیر درون خود کامپوننت استفاده می‌شود. با استفاده از useState می‌توان به‌سادگی state را در کامپوننت تابعی مدیریت کرد.

const [count, setCount] = useState(0);

رویدادها (Events) در React

مدیریت رویدادها مثل کلیک یا تغییر ورودی‌ها در React بسیار ساده است و شباهت زیادی به HTML دارد، ولی با سینتکس جاوااسکریپت:

 alert('کلیک شد')}>کلیک کن

تابع رویداد را می‌توان جداگانه نیز تعریف کرد:

function handleClick() {
 console.log('کلیک شد');
}

رندر شرطی (Conditional Rendering)

برای نمایش شرطی عناصر در React، می‌توان از ساختارهای شرطی مثل if, && یا ? : استفاده کرد:

{isLoggedIn ? 
}

{user && 
{user.name}
}

لیست‌ها و متد map

زمانی که می‌خواهید یک آرایه از داده‌ها را به عناصر JSX تبدیل کنید، متد map بسیار کاربردی است:

const todos = ['خرید نان', 'مطالعه', 'تمرین'];
return (
 
 {todos.map((item, index) => (
 
{item}
 ))}
 
);

Keys و اهمیت آن‌ها

در هنگام رندر کردن لیست‌ها، React برای شناسایی بهتر عناصر، به هر عنصر یک Key منحصربه‌فرد نیاز دارد. استفاده صحیح از key به React کمک می‌کند تا تغییرات را بهینه‌تر اعمال کند و از رندرهای اضافی جلوگیری شود.

{items.map(item => (
 
{item.name}
))}

استفاده از ایندکس به‌عنوان key فقط زمانی مناسب است که ترتیب عناصر تغییری نکند.

 جمع‌بندی

در این بخش مفاهیم بنیادین React مثل انواع کامپوننت‌ها، مدیریت داده با props و state، رویدادها، رندر شرطی و کار با لیست‌ها را یاد گرفتیم. این دانش، پایه‌ای قوی برای ادامه مسیر شما در دنیای React فراهم می‌کند.