React Conditionals

20 دقیقه Article

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

در React برای نمایش شرطی عناصر از دستورات شرطی استاندارد جاوااسکریپت مثل if یا عملگر ترنری (? :) استفاده می‌کنیم.

عملگر منطقی &&

یک الگوی رایج برای نمایش شرطی بدون قسمت else استفاده از && است:

{code_block('{showMessage &&

Hello

}')}

اگر showMessage درست باشد، پاراگراف رندر می‌شود، وگرنه چیزی نمایش داده نمی‌شود.

در این بخش یاد گرفتید که چگونه منطق برنامه را کنترل کنید و ظاهر آن را تغییر دهید. ترکیب قدرت جاوااسکریپت با انعطاف‌پذیری CSS در React به شما اجازه می‌دهد تجربه‌های کاربری خلاقانه‌ای بسازید.

مدیریت وضعیت (State Management) 🧠

در React، داده‌ها همیشه از بالا به پایین (Top-Down) جریان دارند. اما وقتی برنامه‌ها پیچیده می‌شوند، مدیریت این جریان دشوار می‌شود. اینجاست که ابزارهایی مثل Context API و Redux وارد می‌شوند.

نکته امنیتی: هرگز اطلاعات حساس (مثل رمز عبور یا کلید API) را در کدهای کلاینت‌ساید ذخیره نکنید. کدهای React در مرورگر کاربر قابل مشاهده هستند.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

پیام خوش‌آمد Medium

سوال تمرین

تابعی بنویسید که اگر prop به نام isLoggedIn برابر true بود، متن 'Welcome' را برگرداند.

پاسخ تمرین

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome</h1>;
  }
  return null;
}

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo