آموزش حرفه‌ای React JSX: از اصول تا الگوهای پیشرفته

JSX یک سینتکس شبیه HTML است که داخل جاوااسکریپت استفاده می‌شود و به‌صورت Declarative رابط کاربری را توصیف می‌کند. این آموزش از مبانی تا تکنیک‌های حرفه‌ای (شرطی‌سازی، لیست‌ها و کلیدها، مدیریت state، هوک‌ها، پرفورمنس و الگوهای پیشرفته) را پوشش می‌دهد.

---

۱) JSX چیست و چرا؟

• خوانایی بالا و نزدیکی به ساختار UI
• اسکوپ و منطق جاوااسکریپت در کنار View
• بهینه‌سازی هوشمند توسط React و ابزارهای ساخت

قواعد JSX

• کامپوننت‌ها باید یک ریشه داشته باشند (از <div> یا <React.Fragment> استفاده کنید).
• به‌جای class از className استفاده کنید.
• استایل inline به‌صورت آبجکت جاوااسکریپت است (camelCase).
• عبارت‌های JS را داخل {} قرار دهید.

// یک کامپوننت ساده
function Hello() {
const name = "Piero";
return (
<div className="box">
<h2>سلام، {name}!</h2>
</div>
);
}

۲) درج متغیرها و عبارات در JSX
هر عبارت جاوااسکریپت را می‌توانید با آکولاد در JSX بنویسید.
const price = 129_000;
const user = { firstName: "Sara", lastName: "Karimi" };

export default function Card() {
return (
<section>

مبلغ: {price.toLocaleString("fa-IR")}

نام: {${user.firstName} ${user.lastName}}
{price > 100000 ? <strong>پیشنهاد ویژه!</strong> : null}
</section>
);
}

۳) شرطی‌سازی در JSX
از عملگر سه‌تایی، AND منطقی یا جداسازی منطق قبل از return استفاده کنید.
// 1) سه‌تایی
{isLoading ? <Spinner /> : <DataList />}

// 2) AND منطقی (برای نمایش شرطی کوتاه)
{error && 
خطا: {error.message}
}

// 3) جداسازی منطق
let content;
if (isLoading) content = <Spinner />;
else if (error) content = <ErrorView />;
else content = <DataList />;
return <div>{content}</div>;

۴) رندر لیست‌ها و کلیدها (keys)
برای عملکرد و جلوگیری از باگ در Diff، به هر آیتم یک key یکتا بدهید (از id پایدار استفاده کنید).
const items = [
{ id: "a1", title: "React" },
{ id: "b2", title: "JSX" },
{ id: "c3", title: "Hooks" },
];

function List() {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}

۵) پراپس‌ها، State و رویدادها
پراپس‌ها
function Button({ children, onClick, type = "button" }) { return <button type={type} onClick={onClick}>{children}</button>; }

// استفاده
<Button onClick={() => alert("clicked!")}>کلیک</Button>
State و رویدادها با Hooks
import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);
return (
<div>

شمارنده: {count}
<button onClick={() => setCount((c) => c + 1)}>افزایش</button>
</div>
);
}
کنترل فرم (Controlled Components)
import { useState } from "react";

function LoginForm() {
const [email, setEmail] = useState("");

const submit = (e) => {
e.preventDefault();
console.log({ email });
};

return (
<form onSubmit={submit}>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="ایمیل"
/>
<button>ارسال</button>
</form>
);
}

۶) Fragment، Portal و Context
Fragment
return ( <> <Header /> <Main /> </> );
Portal (رندر خارج از سلسله‌مراتب معمول)
import { createPortal } from "react-dom";

function Modal({ children }) {
return createPortal(
<div className="backdrop">{children}</div>,
document.getElementById("modal-root")
);
}
Context (مدیریت وضعیت سراسری سبک)
import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
const theme = useContext(ThemeContext);
return <div data-theme={theme}>Toolbar</div>;
}

۷) الگوهای حرفه‌ای با Hooks
بهینه‌سازی پرفورمنس: memo, useMemo, useCallback
import React, { useMemo, useCallback } from "react";

const Expensive = React.memo(function Expensive({ value }) {
console.log("render");
return <div>محاسبه: {value}</div>;
});

function Dashboard({ items }) {
const total = useMemo(() => items.reduce((s, x) => s + x, 0), [items]);
const handleClick = useCallback(() => console.log("clicked"), []);
return (
<div>

جمع: {total}
<button onClick={handleClick}>لاگ</button>
<Expensive value={total} />
</div>
);
}
کداسپلیتینگ با lazy و Suspense
import React from "react";

const Chart = React.lazy(() => import("./Chart"));

function Reports() {
return (
<React.Suspense fallback={<div>در حال بارگذاری...</div>}>
<Chart />
</React.Suspense>
);
}
Error Boundary
import React from "react";

class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
componentDidCatch(err, info) { console.error(err, info); }
render() {
return this.state.hasError ? <h3>خطایی رخ داد</h3> : this.props.children;
}
}

export default ErrorBoundary;

۸) الگوی «بالابردن State» و ترکیب‌پذیری
import { useState } from "react";

function Parent() {
const [value, setValue] = useState("");
return (
<>
<Input value={value} onChange={setValue} />
<Preview value={value} />
</>
);
}

function Input({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

function Preview({ value }) {
return 
پیش‌نمایش: {value}
;
}

۹) استایل‌دهی در JSX
گزینه‌ها: CSS Module، Styled Components، Tailwind، یا استایل inline.
// استایل inline

<div style={{ padding: 12, borderRadius: 8 }} />

// CSS Module
import styles from "./box.module.css";

<div className={styles.box}>Box</div>

۱۰) دسترسی‌پذیری (a11y) و SEO فرانت‌اند

استفاده از تگ‌های معنایی (<main>, <nav>, <header>)
مشخص‌کردن alt برای تصاویر
مدیریت فوکوس و نسبت کنتراست مناسب


۱۱) تست کامپوننت‌ها
// React Testing Library import { render, screen } from "@testing-library/react"; import Button from "./Button";

test("renders label", () =&amp;gt; {
render(&amp;lt;Button&amp;gt;سلام&amp;lt;/Button&amp;gt;);
expect(screen.getByText("سلام")).toBeInTheDocument();
});

۱۲) نمونهٔ اپ کوچک: فهرست کارها (Todo)
import { useState } from "react";

export default function TodoApp() {
const [items, setItems] = useState([]);
const [text, setText] = useState("");

const add = () =&amp;gt; {
if (!text.trim()) return;
setItems((prev) =&amp;gt; [...prev, { id: crypto.randomUUID(), text }]);
setText("");
};

const remove = (id) =&amp;gt; setItems((prev) =&amp;gt; prev.filter(i =&amp;gt; i.id !== id));

return (
&amp;lt;div className="todo"&amp;gt;
&amp;lt;h2&amp;gt;کارها&amp;lt;/h2&amp;gt;
&amp;lt;input value={text} onChange={(e) =&amp;gt; setText(e.target.value)} /&amp;gt;
&amp;lt;button onClick={add}&amp;gt;افزودن&amp;lt;/button&amp;gt;
&amp;lt;ul&amp;gt;
{items.map(i =&amp;gt; (
&amp;lt;li key={i.id}&amp;gt;
{i.text}
&amp;lt;button onClick={() =&amp;gt; remove(i.id)}&amp;gt;حذف&amp;lt;/button&amp;gt;
&amp;lt;/li&amp;gt;
))}
&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;
);
}

۱۳) نکات حرفه‌ای برای پروژه‌های واقعی

ساختار پوشه‌ها بر اساس دامنه (Feature-Sliced) به‌جای تفکیک فایل‌محور.
TypeScript برای خودمستندسازی و ایمنی تایپی.
ESLint + Prettier برای یکپارچگی کد.
استفاده از React Query / SWR برای مدیریت سرور استیت.
Next.js برای SSR/SSG، بهبود SEO و رندر سمت سرور.


پرسش‌های متداول (FAQ)
تفاوت JSX و HTML؟ JSX یک سینتکس داخل جاوااسکریپت است؛ برخی ویژگی‌ها متفاوت‌اند (مثل className، onClick).

آیا بدون Babel می‌توان JSX نوشت؟ نه، JSX باید به جاوااسکریپت کامپایل شود (Vite/Next.js/CRA قدیمی).

راه بهینه‌سازی سرعت رندر چیست؟ کلیدهای پایدار، memo/useMemo/useCallback، تقسیم کد با lazy/Suspense و جلوگیری از رندرهای غیرضروری.