ری‌اکت (React) چیست؟

ری‌اکت یک کتابخانه (Library) برای ساخت اجزای قابل استفاده مجدد (Reusable Components) در رابط‌های کاربری است. این بدان معناست که شما می‌توانید بخش‌های کوچکی از صفحه وب خود را بسازید (مثلاً یک دکمه، یک فرم، یا یک کارت محصول) و سپس این بخش‌ها را در قسمت‌های مختلف برنامه خود استفاده کنید یا با هم ترکیب کنید تا صفحات پیچیده‌تری بسازید.

تفاوت کتابخانه با فریم‌ورک (Framework):

کتابخانه (Library): کدی که شما آن را فراخوانی می‌کنید و به شما کمک می‌کند کار خاصی را انجام دهید. شما کنترل جریان اصلی برنامه را در دست دارید. (مثال: React)
فریم‌ورک (Framework): قالبی آماده که شما کد خود را درون آن می‌نویسید و فریم‌ورک جریان اصلی برنامه را کنترل می‌کند و کد شما را فراخوانی می‌کند. (مثال: Angular)

ری‌اکت توسط فیسبوک (اکنون متا) توسعه داده شده و به طور گسترده در پروژه‌های بزرگ و کوچک مورد استفاده قرار می‌گیرد.

مزایای ری‌اکت (React)

کامپوننت‌محور (Component-Based):
- قابلیت استفاده مجدد: می‌توانید کامپوننت‌ها را یک بار بسازید و در هر جای برنامه استفاده کنید. این باعث صرفه‌جویی در زمان و کاهش تکرار کد می‌شود.
- قابلیت نگهداری آسان: چون کد به بخش‌های کوچک تقسیم شده، پیدا کردن و رفع خطاها (Debugging) و همچنین به‌روزرسانی کد آسان‌تر است.
قابلیت Virtual DOM:
- ری‌اکت از یک نمایش مجازی از DOM (Document Object Model) استفاده می‌کند. هر زمان که تغییری در داده‌ها ایجاد شود، ری‌اکت ابتدا تغییرات را در Virtual DOM اعمال کرده و سپس تنها بخش‌هایی از DOM واقعی را که نیاز به به‌روزرسانی دارند، تغییر می‌دهد. این باعث افزایش سرعت و کارایی برنامه، به خصوص در برنامه‌هایی با تغییرات زیاد در رابط کاربری می‌شود.
یادگیری نسبتاً آسان:
- با اینکه مفاهیم پیشرفته‌ای دارد، اما مفاهیم پایه‌ی ری‌اکت (مثل JSX، کامپوننت‌ها و state) نسبت به برخی فریم‌ورک‌های دیگر، سریع‌تر قابل یادگیری هستند.
جامعه بزرگ و فعال (Large Community):
- ری‌اکت جامعه‌ای بسیار بزرگ و فعالی دارد. این یعنی منابع آموزشی فراوان، کتابخانه‌های جانبی بسیار (مانند React Router برای مسیریابی، Redux یا Zustand برای مدیریت state پیچیده) و پشتیبانی قوی در صورت بروز مشکل.
قابلیت React Native:
- با استفاده از ری‌اکت نیتیو (React Native)، می‌توانید برنامه‌های موبایل نیتیو (Native) برای iOS و Android با استفاده از همان مفاهیم و تا حدی کدهای ری‌اکت بسازید. این یک مزیت بزرگ برای توسعه‌دهندگانی است که می‌خواهند هم برای وب و هم برای موبایل برنامه بسازند.
سئو SEO Friendly:
- ری‌اکت با استفاده از تکنیک‌هایی مانند Server-Side Rendering (SSR) یا Static Site Generation (SSG) که با فریم‌ورک‌هایی مانند Next.js یا Gatsby پیاده‌سازی می‌شوند، می‌تواند برای موتورهای جستجو (SEO) بسیار مفید باشد.

معایب ری‌اکت (React)

فقط یک کتابخانه UI:
- ری‌اکت فقط مسئولیت لایه نمایش (View Layer) را بر عهده دارد. برای ساخت یک برنامه کامل SPA (Single Page Application)، شما نیاز به استفاده از کتابخانه‌های جانبی دیگر برای مسیریابی (Routing)، مدیریت وضعیت (State Management) در مقیاس بزرگ، و یا ارتباط با API دارید. این ممکن است در ابتدا کمی پیچیده به نظر برسد.
منحنی یادگیری:
- با وجود اینکه مفاهیم پایه‌ی آن آسان است، اما تسلط کامل بر مفاهیم پیشرفته‌تر مانند Hooks، Context API، بهینه‌سازی عملکرد، و معماری برنامه‌های بزرگ ری‌اکتی، نیاز به زمان و تمرین دارد.
سرعت توسعه (در ابتدای کار):
- در مقایسه با ساخت صفحات HTML/CSS ساده، راه‌اندازی یک پروژه ری‌اکت و تنظیمات اولیه آن ممکن است کمی زمان‌برتر باشد، به خصوص برای تازه‌کاران. (البته ابزارهایی مانند Create React App یا Vite این فرآیند را بسیار ساده کرده‌اند).
انتخاب ابزارها:
- به دلیل اکوسیستم بزرگ ری‌اکت، انتخاب بهترین کتابخانه‌ها و ابزارها برای هر بخش (مانند مدیریت state، استایل‌دهی، و...) می‌تواند چالش‌برانگیز باشد و نیاز به تحقیق دارد.

به طور خلاصه، ری‌اکت ابزاری قدرتمند برای ساخت رابط‌های کاربری مدرن، واکنش‌گرا و قابل نگهداری است که با وجود چالش‌های اولیه، مزایای قابل توجهی را ارائه می‌دهد و به همین دلیل در صنعت توسعه وب بسیار محبوب است.

نصب و استفاده

دانلود و نصب Node.js از سایت رسمی

نحوه نصب React (روش قدیمی)

npx create-react-app App-Name #projet create
npm start #projet run

نحوه نصب React + Vite (روش جدید)

npm create vite@latest App-Name #projet create
npm run dev #projet run

نصب پکیج ها

npm install 
#or 
npm i

اکستنشن های VS Code مناست React

میانبر های ری اکت ES7+ React/Redux/React-Native snippets
تغییر آیکون فایل ها Material Icon Theme
کمک به کامل کردن مسیر ها Path Intellisense
مرتب کردن کد ها Prettier - Code formatter

فرمت JSX

فرمت JavaScript فرمت خاصی برای نوشتن کد در React است که ترکیبی از JavaScript و html را مستقیم درون فایل های JavaScript بنویسید که باعث میشود که کد React بیشتر خوانا و مشابه با نوشتن HTML باشد.

function App() {

  return (
    <>
      <div>
        <h2>text</h2>
      </div>
      <div>
        <p>text</p>
      </div>
    </>
  )
}

قابلیت Virtual DOM

قابلیت Virtual DOM یک نسخه مجازی از Document Object Model (DOM) واقعی وبسایت است. React برای از این نسخه مجازی برای مدیریت و بروزرسانی رابط کاربری استفاده میکند.

نحوه کار کردن Virtual DOM

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

سپس React آن را با نسخه قبلى Virtual DOM مقايسه مى كند. React بررسى میكند كه چه تغييراتی در Virtual DOM نسبت به نسخه قبلى رخ داده است.

تنها تغييرات شناسايى شده در Virtual DOM به DOM واقعى ارسال مى شود. اين بدان معناست كه React فقط قسمتهایی از صفحه را كه نياز به تغيير دارند به روز میكند، به جای اينكه كل صفحه را دوباره رندر کند. این کار باعث می شود که برنامه سریعتر وکارآمدتر عمل كند.

کامپوننت چیست؟

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

قابل استفاده مجدد
تفکیک مسئولیت که باعث راحتی در شناسایی مشکل میشود

در React دو نوع کامپوننت Functional و Class داریم که به دلیل ( ساده تر بودن • تست راحت • کارایی بهتر ) کامپوننت Functional بیشتر استفاده میشود.

ساخت کامپوننت

داخل پوشه src فایلی با پسوند .jsx مثل Sample.jsx بسازید :

export default function Sample() {

    return (
            <h1> Hii 👋 سامان </h1>
    )
}

کد export defaut باعث میشود که در تمام فایل ها با

import Sapmle from './Sample.jsx'

و بدون

import { Sapmle } from './Sample.jsx'

گزاشتن در بین { } قابل دستیابی باشد.

نکته: همیشه اولین کلمه کامپوننت باید بزرگ باشد. نکته: هر کامپوننت فقط یک تگ html باید داشته باشد، که میتوان از <>...</> تگ خالی استفاده کرد.

جاوااسکریپت در HTML با JSX

در JSX می‌توان با استفاده از { } هر عبارت جاوااسکریپتی (JavaScript Expression) را مستقیماً داخل HTML نوشت. این قابلیت باعث می‌شود رابط کاربری داینامیک و وابسته به داده‌ها باشد.

⚠️ توجه: داخل {} فقط expression مجاز است، نه statement
(مثلاً if یا for مستقیم مجاز نیست)

1. نمایش متغیرها

می‌توان مقدار متغیرهای جاوااسکریپتی را مستقیماً در JSX نمایش داد:

export default function Sample() {
  let name = "سامان"

  return (
    <h1>نام کاربر: {name}</h1>
  )
}

✅ هر بار مقدار name تغییر کند، UI هم به‌روزرسانی می‌شود.

2. اجرای عبارت‌های جاوااسکریپتی

هر نوع محاسبه یا expression داخل {} قابل استفاده است:

<h1>نتیجه محاسبه: {2 + 2}</h1>
<h1>طول نام: {name.length}</h1>

3. استفاده از فانکشن‌ها

می‌توان خروجی فانکشن‌ها را هم در JSX نمایش داد:

function sayHello(user) {
  return `سلام ${user}`
}

<h1>{sayHello(name)}</h1>

4. شرطی‌سازی در JSX

روش رایج: عملگر `&&`

{name && <h2>خوش آمدی {name}</h2>}

شرط با ternary

{age >= 18 ? <p>بزرگسال</p> : <p>کودک</p>}

5. قرار دادن JSX داخل متغیر

JSX خودش یک مقدار جاوااسکریپتی است و می‌تواند در متغیر ذخیره شود:

let html = <p>این یک متن JSX است</p>

<div>{html}</div>

6. استفاده از آرایه‌ها (loop در JSX)

به‌جای for از map استفاده می‌کنیم:

let users = ["سامان", "علی", "رضا"]

<ul>
  {users.map((user, index) => (
    <li key={index}>{user}</li>
  ))}
</ul>

7. مثال کامل‌تر

export default function Sample() {
  let name = "سامان"
  let score = 85

  function status(score) {
    return score >= 60 ? "قبول" : "مردود"
  }

  let message = <p>به پنل کاربری خوش آمدید</p>

  return (
    <>
      <h1>نام: {name}</h1>
      <h2>نمره: {score}</h2>
      <h3>وضعیت: {status(score)}</h3>
      <p>محاسبه: {10 * 5}</p>
      <div>{message}</div>
    </>
  )
}

استایل دهی در JSX

در JSX، روش‌های مختلفی برای استایل‌دهی وجود دارد که کمی با HTML معمولی تفاوت دارند.

استفاده از `className` به جای `class`

در HTML، برای اعمال کلاس CSS از صفت class استفاده می‌کنیم. اما در JSX، این صفت به className تغییر نام داده است. این کار به این دلیل است که class در زبان جاوااسکریپت یک کلمه کلیدی رزرو شده است.

مثال:

// HTML
// <div class="my-class">...</div>

// JSX
<div className="my-class">...</div>

استفاده از Template Literal در JSX

گاهی در JSX می‌خواهیم مقدار را به صورت داینامیک بنویسیم. ( مثلا در className) برای این کار از Template Literal استفاده می‌کنیم.

شکل کلی

className={`hi`}

این یعنی مقدار className داخل بک‌تیک ` نوشته شده است،
نه داخل کوتیشن معمولی " ".

چرا از Template Literal استفاده می‌کنیم؟

وقتی بخواهیم چند کلاس یا شرطی بنویسیم، Template Literal خیلی کاربردی می‌شود.

مثال:

<div className={`box ${isActive ? "active" : ""}`}>
  محتوا
</div>

اگر isActive برابر true باشد:

className="box active"

اگر false باشد:

className="box"

ترکیب متن و متغیر

const name = "Ali"

<h1 className={`title ${name}`}>
  سلام
</h1>

استایل‌دهی به روش Inline CSS

می‌توان استایل‌های CSS را مستقیماً در JSX با استفاده از ویژگی style اعمال کرد. مقدار style باید یک آبجکت جاوااسکریپت باشد.

نکات مهم:

نام ویژگی‌ها (CamelCase): تمام نام ویژگی‌های CSS باید به صورت CamelCase نوشته شوند. یعنی اگر نام ویژگی CSS دو بخشی است (مثلاً font-size یا background-color)، حرف اول بخش دوم و تمام حروف بعدی آن باید بزرگ باشند (مثلاً fontSize یا backgroundColor).
مقادیر: مقادیر ویژگی‌ها باید به صورت رشته (string) باشند، مگر اینکه مقدار عددی باشد و واحدی نداشته باشد (مانند zIndex). برای مقادیر عددی که واحد دارند (مانند fontSize: 30px)، واحد را نیز به صورت رشته بنویسید.

مثال:

// کد بالا به این صورت نوشته می‌شود:
<h1 style={{ fontSize: "30px", color: "red", zIndex: 2 }}>
  این تگ H1 استایل‌دهی شده است
</h1>

استفاده از متغیر برای استایل‌ها

برای خوانایی بهتر و مدیریت آسان‌تر استایل‌ها، می‌توانید آن‌ها را در یک آبجکت جاوااسکریپت ذخیره کرده و سپس آن آبجکت را به style پاس دهید:

function MyComponent() {
  const headingStyles = {
    fontSize: "30px",
    color: "red",
    fontWeight: "bold",
    borderBottom: "2px solid blue"
  };

  return (
    <h1 style={headingStyles}>
      این تگ H1 با استایل‌های ذخیره شده استایل‌دهی شده است
    </h1>
  );
}

شرطی کردن استایل‌ها

در React می‌توانیم استایل‌ها را به صورت داینامیک و شرطی تغییر دهیم.

function MyComponent() {
  const isActive = true

  return (
    <h1
      style={{
        color: isActive ? "green" : "gray",
        fontSize: "24px"
      }}
    >
      وضعیت کاربر
    </h1>
  )
}

✅ این ویژگی یکی از قدرت‌های اصلی JSX است.

استایل‌دهی به روش CSS File

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

import "./styles.css"

function App() {
  return <div className="container">محتوا</div>
}

روش های استایل دهی دیگر:

کامنت‌گذاری در JSX

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

کامنت تک خطی و چند خطی

برای کامنت‌گذاری در JSX، باید کامنت را داخل { } قرار دهید و از سینتکس کامنت جاوااسکریپت (// برای تک خطی و /* */ برای چند خطی) استفاده کنید.

مثال:

function MyComponent() {
// کامنت گذاری عادی
/*
کامنت گذاری چند خطی
*/
  return (
    <div>
      {/* داخل html فقط به این صورت */}
    </div>
  );
}

نکته: کامنت‌های HTML معمولی () در JSX کار نمی‌کنند و باید از سینتکس بالا استفاده کرد.

قابلیت Props در JSX/React

قابلیت Props (مخفف properties) راهی برای انتقال داده از یک کامپوننت والد (parent) به یک کامپوننت فرزند (child) در React هستند. Props به کامپوننت فرزند اجازه می‌دهند تا اطلاعات را دریافت کرده و بر اساس آن اطلاعات، محتوای خود را نمایش دهد یا رفتار خود را تنظیم کند.

ویژگی‌های کلیدی Props:

فقط خواندنی (Immutable): Props در کامپوننت فرزند فقط خواندنی هستند. کامپوننت فرزند نمی‌تواند مقدار Props دریافتی را مستقیماً تغییر دهد. اگر نیاز به تغییر مقدار دارید، باید از state در کامپوننت والد استفاده کنید.
شبیه به آرگومان فانکشن: Props را می‌توان به عنوان آرگومان‌هایی تشبیه کرد که به یک تابع (کامپوننت) ارسال می‌شوند.

1. ارسال Props از والد به فرزند

در کامپوننت والد، هنگام استفاده از کامپوننت فرزند، می‌توانید Props را مانند ویژگی‌های HTML ارسال کنید:

// کامپوننت والد
function App() {
  return (
    <Greeting name="علی" message="خوش آمدی!" />
  );
}

در اینجا، name و message دو Prop هستند که به کامپوننت Greeting ارسال می‌شوند.

2. دریافت Props در کامپوننت فرزند

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

روش اول: استفاده از آبجکت `props`

// کامپوننت فرزند
function Greeting(props) {
  // props در اینجا یک آبجکت است: { name: "علی", message: "خوش آمدی!" }
  return (
    <div>
      <h1>سلام {props.name}</h1>
      <p>{props.message}</p>
    </div>
  );
}

روش دوم: Destructuring Props (روش رایج‌تر و خواناتر)

ارسال مستقیم پراپرتی ها می‌توانید Props را مستقیماً در پارامتر تابع Destructure کنید:

// کامپوننت فرزند
function Greeting({ name, message }) {
  // name و message مستقیماً در دسترس هستند
  return (
    <div>
      <h1>سلام {name}</h1>
      <p>{message}</p>
    </div>
  );
}

3. ارسال انواع داده‌های مختلف به عنوان Prop

با Props می‌توانند هر نوع داده جاوااسکریپتی را منتقل کنند:

رشته (String): name="علی"
عدد (Number): age={30} (توجه: اعداد باید داخل { } باشند)
بولین (Boolean): isActive={true} یا isDisabled (اگر مقدار نباشد، به معنی true است)
آرایه (Array): items={['a', 'b', 'c']}
آبجکت (Object): user={{ id: 1, name: "رضا" }}
فانکشن (Function): onClick={handleClick} (برای ارتباط فرزند به والد)
چیلدرن (JSX/Renderable Elements): (در Prop ویژه‌ای به نام children وجود دارد که محتوای داخل تگ‌های کامپوننت فرزند را دریافت می‌کند). مثال: children={<h1>عنوان</h1>}

مثال با children:

// کامپوننت والد
function parent() {
  return (
    <Child>
	  <h1>این عنوان داخل Layout است</h1>
	  <p>این هم یک متن دیگر</p>
    </Child>
  );
}

// کامپوننت فرزند
function Child({ children }) {
  return (
    <div>
	  <p>این هم یک متن دیگر</p>
      {children}
    </div>
  );
}

جمع‌بندی

Props برای انتقال داده از والد به فرزند استفاده می‌شوند.
Props در فرزند فقط خواندنی هستند.
Props مانند ویژگی‌های HTML ارسال شده و به صورت یک آبجکت در فرزند دریافت می‌شوند.
می‌توانید انواع داده‌های مختلف را به عنوان Prop ارسال کنید.
Prop ویژه‌ای به نام children وجود دارد که محتوای بین تگ‌های کامپوننت فرزند را دریافت می‌کند.

رویدادها (Event) در JSX/React

رویدادها برای پاسخ دادن به تعاملات کاربر با صفحه استفاده می‌شوند؛ مثل کلیک، تایپ کردن، هاور، ارسال فرم و... .
در JSX، رویدادها با نام‌گذاری CamelCase نوشته می‌شوند و مقدار آن‌ها معمولاً یک تابع است.

1. ساختار کلی رویدادها

در JSX، به‌جای نام‌های HTML مثل onclick از onClick استفاده می‌کنیم:

<button onClick={handleClick}>کلیک کن</button>

2. تعریف تابع رویداد

تابعی که به رویداد وصل می‌شود می‌تواند بیرون یا داخل کامپوننت تعریف شود:

function handleClick() {
  alert("دکمه کلیک شد")
}

export default function Sample() {
  return <button onClick={handleClick}>کلیک کن</button>
}

3. گرفتن شیء رویداد

اگر بخواهید به اطلاعات رویداد دسترسی داشته باشید، می‌توانید event را دریافت کنید:

function handleClick(event) {
  console.log(event)
}

یا حتی:

function handleChange(event) {
  console.log(event.target.value)
}

4. رویدادهای پرکاربرد

از مهم‌ترین eventها در React می‌توان به موارد زیر اشاره کرد:

onClick
onChange
onSubmit
onInput
onMouseEnter
onMouseLeave
onKeyDown

5. نکته مهم

اگر تابع را این‌طور بنویسیم:

<button onClick={handleClick()}>

تابع همان لحظه اجرا می‌شود، نه هنگام کلیک.

درستش این است:

<button onClick={handleClick}>

6. ارسال آرگومان به تابع رویداد

برای ارسال مقدار به تابع، از arrow function استفاده می‌کنیم:

<button onClick={() => handleClick("سامان")}>کلیک کن</button>

7. مثال کامل

export default function Sample() {

  function handleSubmit(name) {
    event.preventDefault() // جلوگیری از رفرش
    console.log(name + " کلیک کرد")
  }

  function changeHandler(event) {
    console.log(event.target.value)
  }
/* بجای event میتوان از e استفاده کرد
  function changeHandler(e) {
    console.log(e.target.value)
  }
*/

  return (
    <form onSubmit={() => handleSubmit("سامان")} >
        <input type="text" onChange={changeHandler}/>
        <button type="submit">submit</button>
    </form>
  )
}

نکته: فرم ها در زمان ارسال شدن (Submit) صفحه رفرش میشود، برای جلوگیری از این مشکل باید از event.preventDefault() استفاده کرد. نکته: بجای event میتوان از e استفاده کرد.

جمع‌بندی

رویدادها برای تعامل کاربر با صفحه هستند.
در JSX از onClick و نام‌گذاری CamelCase استفاده می‌شود.
مقدار رویداد معمولاً یک تابع است.
برای ارسال آرگومان از arrow function استفاده می‌کنیم.
نباید تابع را با () مستقیم در JSX اجرا کنیم.

هوک useState در React

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

ساختار کلی

const [value, setValue] = useState(مقدار_اولیه)

value مقدار فعلی state است.
setValue برای تغییر مقدار state استفاده می‌شود.
useState مقدار اولیه state را دریافت می‌کند.

1. ساخت شمارنده با useState

در این مثال، با هر بار کلیک روی دکمه مقدار شمارنده یکی بیشتر می‌شود:

import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  )
}

2. ساخت سلکتور با useState

در این مثال، مقدار انتخاب‌شده از select داخل state ذخیره می‌شود و نمایش داده می‌شود:

import { useState } from "react"

export default function Selector() {
  const [city, setCity] = useState("تهران")
  
  function changeHandler(e){
	  setCity(e.target.value)
	}

  return (
    <div>
      <h1>شهر انتخاب شده: {city}</h1>

      <select onChange={changeHandler}>
        <option value="تهران">تهران</option>
        <option value="مشهد">مشهد</option>
        <option value="اصفهان">اصفهان</option>
      </select>
    </div>
  )
}

رندر شرطی در React

رندر شرطی یعنی اینکه بر اساس یک شرط، بخش‌های مختلفی از JSX را نمایش بدهیم یا مخفی کنیم.
در React برای شرط‌گذاری داخل JSX معمولاً از چند روش رایج استفاده می‌شود.

1. استفاده از `if`

چون داخل JSX نمی‌توان مستقیم if نوشت، معمولاً شرط را قبل از return بررسی می‌کنیم:

export default function Sample() {
  const isLogin = true

  if (isLogin) {
    return <h1>خوش آمدی</h1>
  }

  return <h1>لطفا وارد شوید</h1>
}

2. استفاده از `Ternary Operator`

اگر بخواهیم شرط را مستقیم داخل JSX بنویسیم، از ternary استفاده می‌کنیم:

export default function Sample() {
  const isLogin = false

  return (
    <div>
      {isLogin ? <h1>خوش آمدی</h1> : <h1>لطفا وارد شوید</h1>}
    </div>
  )
}

ساختار کلی:

شرط ? حالت_درست : حالت_غلط

3. استفاده از `&&` اند منطقی

وقتی فقط بخواهیم در صورت درست بودن شرط چیزی را نمایش دهیم، از && استفاده می‌کنیم:

export default function Sample() {
  const isAdmin = true

  return (
    <div>
      {isAdmin && <h1>پنل مدیریت</h1>}
    </div>
  )
}

اگر شرط true باشد، JSX نمایش داده می‌شود.
اگر شرط false باشد، چیزی نمایش داده نمی‌شود.

مثال کامل

export default function Sample() {
  const isLogin = true
  const isAdmin = true

  if (!isLogin) {
    return <h1>لطفا وارد شوید</h1>
  }

  return (
    <div>
      <h1>خوش آمدی</h1>
      {isAdmin ? <p>شما مدیر هستید</p> : <p>شما کاربر عادی هستید</p>}
      {isAdmin && <button>ورود به پنل مدیریت</button>}
    </div>
  )
}

نکته مهم

ا if برای شرط‌های بزرگ‌تر و خارج از JSX مناسب‌تر است.
ا ternary برای نمایش یکی از دو حالت داخل JSX کاربرد دارد.
&& برای نمایش یک بخش فقط در صورت درست بودن شرط مناسب است.

جمع‌بندی

برای رندر شرطی در React می‌توان از if، ternary و && استفاده کرد.
از if معمولاً قبل از return نوشته می‌شود.
از ternary برای دو حالت مختلف استفاده می‌شود.
&& برای نمایش شرطی یک بخش بدون حالت else استفاده می‌شود.

رندر لیست با استفاده از متد `map`

در React وقتی بخواهیم از روی یک آرایه، چندین عنصر JSX بسازیم، از متد map استفاده می‌کنیم.
این روش یکی از رایج‌ترین راه‌ها برای نمایش لیست‌ها در JSX است.

ساختار کلی

array.map((item) => {
  return <element>{item}</element>
})

یا به‌صورت کوتاه‌تر:

array.map((item) => <element>{item}</element>)

1. رندر لیست ساده

اگر یک آرایه از اسم‌ها داشته باشیم، می‌توانیم با map آن‌ها را نمایش دهیم:

export default function Sample() {
  const names = ["علی", "مریم", "رضا"]

  return (
    <div>
      {
	    names.map(
			(name) => <h2>{name}</h2>)
      }
    </div>
  )
}

2. استفاده از `key`

در React وقتی با map لیست می‌سازیم، باید برای هر آیتم یک key یکتا بدهیم:

export default function Sample() {
  const names = ["علی", "مریم", "رضا"]

  return (
    <div>
      {
	    names.map(
			(name, index) => <h2 key={index}>{name}</h2>)
      }
    </div>
  )
}

نکته مهم

کلید key به React کمک می‌کند آیتم‌ها را بهتر شناسایی کند.
بهتر است key مقدار یکتا و ثابت باشد.
استفاده از index فقط وقتی مناسب است که آیتم‌ها شناسه‌ی بهتر نداشته باشند.

3. رندر لیست آبجکت‌ها

معمولاً آرایه‌ها به شکل آبجکت هستند. در این حالت می‌توانیم ویژگی‌های هر آبجکت را نمایش دهیم:

export default function Sample() {
  const users = [
    { id: 1, name: "علی", age: 20 },
    { id: 2, name: "مریم", age: 22 },
    { id: 3, name: "رضا", age: 25 },
  ]

  return (
    <div>
      {
      users.map(
	    (user) => (
	        <div key={user.id}>
	          <h2>{user.name}</h2>
	          <p>سن: {user.age}</p>
	        </div>
	      )
	    )
      }
    </div>
  )
}

جمع‌بندی

برای رندر لیست‌ها در React از map استفاده می‌کنیم.
متد map هر آیتم آرایه را به یک عنصر JSX تبدیل می‌کند.
برای هر آیتم باید key یکتا مشخص شود.

ساخت Todo-List داینامیک (تمرین)

این کد یک کامپوننت ساده React برای ساخت و مدیریت یک لیست کارها یا همان Todo List است.

این کد چه کار می‌کند؟

با useState یک لیست خالی برای نگهداری todoها ساخته می‌شود.
با استفاده از map، آیتم‌های داخل لیست نمایش داده می‌شوند.
یک input برای وارد کردن متن todo و یک button برای اضافه کردن آن به لیست داریم.
وقتی روی دکمه "اضافه کنید" کلیک می‌شود، تابع clickHandler اجرا می‌شود.

داخل تابع `clickHandler` چه اتفاقی می‌افتد؟

ابتدا با document.getElementById("todoInput") input موردنظر پیدا می‌شود.

این روش در React معمولاً توصیه نمی‌شود، ولی برای تمرین استفاده شده است.
مقدار داخل input گرفته می‌شود و داخل متغیر newTodo قرار می‌گیرد.
بعد این مقدار به لیست فعلی todos اضافه می‌شود.
در آخر مقدار input خالی می‌شود تا کاربر بتواند todo بعدی را وارد کند.

نکته درباره اضافه کردن به لیست

در این کد از این روش استفاده شده:

setTodo(todos.concat(newTodo))

این روش یک راه برای اضافه کردن آیتم جدید به آرایه است.
همچنین می‌شود از این روش هم استفاده کرد:

setTodo([...todos, newTodo])

کد

import { useState } from "react"

export default function Sample() {
	let [todos, setTodo] = useState([])

	function clickHnadler() {
		let inputElement = document.getElementById("todoInput")
		let newTodo = inputElement.value
		setTodo(todos.concat(newTodo))
		inputElement.value = ""
	}

	return (
		<div>
			<h2>ليست كارهاى روزانه</h2>
			<input
				type="text"
				placeholder="تودوى خود را وارد كنيد"
				id="todoInput"
			/>
			<button onClick={clickHnadler}>اضافه كنيد</button>

			<ul>
				{todos.map((todo, index) => (
					<li key={index}>{todo}</li>
				))}
			</ul>
		</div>
	)
}

بعدی →

React lern documents 1.

ری‌اکت (React) چیست؟

مزایای ری‌اکت (React)

معایب ری‌اکت (React)

نصب و استفاده

دانلود و نصب Node.js از سایت رسمی

نحوه نصب React (روش قدیمی)

نحوه نصب React + Vite (روش جدید)

نصب پکیج ها

اکستنشن های VS Code مناست React

فرمت JSX

قابلیت Virtual DOM

نحوه کار کردن Virtual DOM

کامپوننت چیست؟

ساخت کامپوننت

جاوااسکریپت در HTML با JSX

1. نمایش متغیرها

2. اجرای عبارت‌های جاوااسکریپتی

3. استفاده از فانکشن‌ها

4. شرطی‌سازی در JSX

روش رایج: عملگر &&

شرط با ternary

5. قرار دادن JSX داخل متغیر

6. استفاده از آرایه‌ها (loop در JSX)

7. مثال کامل‌تر

استایل دهی در JSX

استفاده از className به جای class

استفاده از Template Literal در JSX

شکل کلی

چرا از Template Literal استفاده می‌کنیم؟

مثال:

ترکیب متن و متغیر

استایل‌دهی به روش Inline CSS

استفاده از متغیر برای استایل‌ها

شرطی کردن استایل‌ها

استایل‌دهی به روش CSS File

کامنت‌گذاری در JSX

کامنت تک خطی و چند خطی

قابلیت Props در JSX/React

1. ارسال Props از والد به فرزند

2. دریافت Props در کامپوننت فرزند

روش اول: استفاده از آبجکت props

روش دوم: Destructuring Props (روش رایج‌تر و خواناتر)

3. ارسال انواع داده‌های مختلف به عنوان Prop

جمع‌بندی

رویدادها (Event) در JSX/React

1. ساختار کلی رویدادها

2. تعریف تابع رویداد

3. گرفتن شیء رویداد

4. رویدادهای پرکاربرد

5. نکته مهم

6. ارسال آرگومان به تابع رویداد

7. مثال کامل

جمع‌بندی

هوک useState در React

ساختار کلی

1. ساخت شمارنده با useState

2. ساخت سلکتور با useState

رندر شرطی در React

1. استفاده از if

2. استفاده از Ternary Operator

3. استفاده از && اند منطقی

مثال کامل

نکته مهم

جمع‌بندی

رندر لیست با استفاده از متد map

ساختار کلی

1. رندر لیست ساده

2. استفاده از key

نکته مهم

3. رندر لیست آبجکت‌ها

جمع‌بندی

ساخت Todo-List داینامیک (تمرین)

این کد چه کار می‌کند؟

داخل تابع clickHandler چه اتفاقی می‌افتد؟

نکته درباره اضافه کردن به لیست

کد

Read more

React lern documents 2.

React lern documents 3.

روش رایج: عملگر `&&`

استفاده از `className` به جای `class`

روش اول: استفاده از آبجکت `props`

1. استفاده از `if`

2. استفاده از `Ternary Operator`

3. استفاده از `&&` اند منطقی

رندر لیست با استفاده از متد `map`

2. استفاده از `key`

داخل تابع `clickHandler` چه اتفاقی می‌افتد؟