در حال بارگذاری...

مرجع JSX

JSX (JavaScript XML) در ری‌اکت (React) یکی از بنیادی‌ترین مفاهیم برای تعریف رابط‌های کاربری به‌صورت اعلانی است. JSX ترکیبی از قدرت JavaScript و سادگی HTML است که به توسعه‌دهندگان اجازه می‌دهد ساختار کامپوننت‌ها را به‌شکل خوانا و منسجم بنویسند. این سینتکس ویژه، به ری‌اکت (React) کمک می‌کند عناصر رابط کاربری را به صورت «virtual DOM» ترجمه کرده و عملکرد رندر را بهینه کند. استفاده از JSX باعث می‌شود توسعه‌دهنده بتواند منطق کامپوننت، وضعیت (state)، چرخه‌عمر (lifecycle) و جریان داده (data flow) را درون یک قالب واحد مدیریت کند.
در توسعه برنامه‌های تک‌صفحه‌ای (SPA) و وب‌اپلیکیشن‌های مدرن، JSX به‌عنوان استانداردی غیررسمی برای نوشتن رابط کاربری عمل می‌کند، چراکه ضمن خوانایی بالا، قابلیت ادغام با ابزارهای ساخت (مانند Babel و Webpack) را نیز دارد. یادگیری JSX برای هر توسعه‌دهنده حرفه‌ای ری‌اکت ضروری است، زیرا درک دقیق آن به ساخت کامپوننت‌های قابل‌استفاده مجدد، بهینه‌سازی عملکرد، و مدیریت صحیح وضعیت کمک می‌کند. در این بخش، شما با ساختار JSX، قوانین نگارش، الگوهای رایج، و نحوه استفاده پیشرفته از آن در ری‌اکت آشنا خواهید شد.

مثال پایه

jsx

JSX Code

import React, { useState } from 'react';

function Greeting() {
const [name, setName] = useState("کاربر");

const handleChange = (e) => {
setName(e.target.value);
};

return (
<div style={{ padding: "20px", backgroundColor: "#f1f1f1", borderRadius: "10px" }}> <h2>سلام، {name}!</h2>
<input
type="text"
value={name}
onChange={handleChange}
placeholder="نام خود را وارد کنید..."
style={{ padding: "8px", borderRadius: "5px", border: "1px solid #ccc" }}
/> </div>
);
}

export default Greeting;

در این مثال JSX به‌صورت مستقیم برای توصیف ساختار رابط کاربری استفاده شده است. تابع Greeting یک کامپوننت تابعی در ری‌اکت است که از هوک useState برای مدیریت وضعیت (state) استفاده می‌کند. مقدار اولیه state برابر "کاربر" است و هر زمان که کاربر ورودی (input) را تغییر دهد، تابع handleChange مقدار جدید را ذخیره کرده و باعث باز-render شدن کامپوننت می‌شود.
در JSX، تگ‌ها باید بسته شوند و تنها یک عنصر والد در خروجی وجود داشته باشد. ویژگی‌ها (props) مانند style به صورت شیء JavaScript تعریف می‌شوند. در این مثال از ویژگی‌های inline-style استفاده شده تا ترکیب قدرت JSX و JS به خوبی نمایش داده شود. ری‌اکت با تبدیل JSX به فراخوانی‌های React.createElement، ساختار مجازی DOM را می‌سازد. این ساختار باعث می‌شود تنها بخش‌هایی از DOM که تغییر کرده‌اند به‌روزرسانی شوند.
این مثال نمایانگر تفکر کامپوننت‌محور در ری‌اکت است؛ هر بخش از رابط کاربری در قالب یک کامپوننت مستقل تعریف می‌شود که می‌تواند دارای وضعیت و رفتار خاص خود باشد. این اصل پایه‌ای در توسعه پروژه‌های بزرگ و سازمانی با ری‌اکت است، زیرا قابلیت نگهداری و تست‌پذیری کد را به‌شدت افزایش می‌دهد.

مثال کاربردی

jsx

JSX Code

import React, { useState, useEffect } from 'react';

function Clock() {
const [time, setTime] = useState(new Date());

useEffect(() => {
const timer = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);

return (
<div style={{ textAlign: "center", marginTop: "50px" }}> <h1>ساعت فعلی:</h1>
<p style={{ fontSize: "24px" }}>{time.toLocaleTimeString()}</p> </div>
);
}

export default Clock;

Advanced ری‌اکت (React) Implementation

jsx

JSX Code

import React, { useState, useMemo } from 'react';

function FilteredList({ items }) {
const [query, setQuery] = useState("");

const filtered = useMemo(() => {
return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
}, [items, query]);

return (
<div style={{ width: "300px", margin: "auto" }}>
<input
type="text"
placeholder="جستجو..."
value={query}
onChange={(e) => setQuery(e.target.value)}
style={{ width: "100%", padding: "8px", marginBottom: "10px" }}
/> <ul>
{filtered.map((item, index) => <li key={index}>{item}</li>)} </ul> </div>
);
}

export default FilteredList;

در مثال پیشرفته، از JSX برای نمایش داده‌ها به صورت پویا و براساس ورودی کاربر استفاده شده است. هوک useMemo برای بهینه‌سازی عملکرد به‌کار رفته تا از محاسبات غیرضروری هنگام تغییر وضعیت جلوگیری کند. این الگو در پروژه‌های بزرگ و داده‌محور ری‌اکت بسیار رایج است.
به‌کارگیری JSX در این سطح نیازمند شناخت دقیق از چرخه‌عمر کامپوننت‌ها و بهینه‌سازی رندر است. با نگهداری وضعیت و داده‌ها در سطح محلی هر کامپوننت و اجتناب از prop drilling، کد پایدارتر و عملکرد سریع‌تری حاصل می‌شود. در کاربردهای واقعی مانند داشبوردها یا سیستم‌های جستجو، JSX پایه‌ای برای ساخت رابط‌های پویا و مقیاس‌پذیر است.

بهترین روش‌ها و خطاهای رایج در ری‌اکت (React):
در استفاده از JSX، بهترین روش‌ها شامل تعریف کامپوننت‌های کوچک و قابل‌استفاده مجدد، مدیریت وضعیت محلی به‌جای جهانی مگر در ضرورت، و استفاده از هوک‌هایی مانند useMemo و useCallback برای جلوگیری از رندرهای غیرضروری است. از تغییر مستقیم state باید اجتناب شود، زیرا ری‌اکت این تغییرات را شناسایی نکرده و باعث بروز باگ‌های منطقی می‌شود.
در طراحی JSX، همیشه عناصر باید دارای کلید منحصربه‌فرد (key) در لیست‌ها باشند. از درون‌سازی داده‌های ناامن در JSX باید پرهیز کرد تا از حملات XSS جلوگیری شود. اشکال‌زدایی JSX اغلب با استفاده از React DevTools انجام می‌شود که ساختار virtual DOM را نمایش می‌دهد. برای بهبود عملکرد، اطمینان حاصل کنید که از رندر غیرضروری کامپوننت‌ها با ابزارهایی مانند React.memo جلوگیری شده و داده‌ها به‌صورت بهینه جریان پیدا می‌کنند.

📊 مرجع کامل

ری‌اکت (React) Element/Method	Description	Syntax	Example	Notes
React.createElement	ایجاد عنصر مجازی	React.createElement(type, props, children)	React.createElement('div', null, 'سلام')	پایه JSX
Fragment	گروه‌بندی بدون عنصر اضافی	<></>	<><h1>Header</h1></>	جایگزین div
useState	مدیریت state محلی	const [x, setX] = useState(val)	useState(0)	برای وضعیت محلی
useEffect	اجرای side effects	useEffect(()=>{},[])	useEffect(()=>{console.log('run')},[])	چرخه عمر
useMemo	حافظه‌سازی محاسبات	useMemo(fn,[deps])	useMemo(()=>calc(x),[x])	بهینه‌سازی
useCallback	حافظه‌سازی توابع	useCallback(fn,[deps])	useCallback(()=>handle(),[dep])	کاهش بازتعریف
React.memo	جلوگیری از رندر مجدد	React.memo(Component)	export default React.memo(MyComp)	بهینه‌سازی
props.children	دسترسی به عناصر فرزند	{props.children}	<Wrapper>Child</Wrapper>	ترکیب کامپوننت
conditional rendering	نمایش شرطی	{condition && <Comp/>}	{isLogged && <Profile/>}	نمایش پویا
list rendering	نمایش داده‌های لیستی	array.map(x=>... )	users.map(u=><li key={u.id}>{u.name}</li>)	نیاز به key
style prop	اعمال استایل داخلی	style={{color:"red"}}	<div style={{color:"blue"}}>	شیء JS
className	استفاده از کلاس CSS	className="title"	<h1 className="main">	به‌جای class
event handling	مدیریت رویداد	onClick={fn}	<button onClick={handle}>کلیک</button>	رویداد JS
dangerouslySetInnerHTML	قرار دادن HTML خام	dangerouslySetInnerHTML={{__html:html}}	<div dangerouslySetInnerHTML={{__html:"<p>text</p>"}}/>	احتیاط امنیتی
defaultProps	مقدار پیش‌فرض prop	MyComp.defaultProps={title:"N/A"}	Static property	JSX option
propTypes	تایپ بررسی props	MyComp.propTypes={title:PropTypes.string}	کنترل نوع	مفید در توسعه
key prop	کلید یکتا در لیست	key={id}	<li key={id}>	برای diff DOM
ref	ارجاع مستقیم به DOM	useRef()	<input ref={inputRef}/>	برای کنترل مستقیم
forwardRef	ارسال ref به فرزند	React.forwardRef((props,ref)=>... )	در کتابخانه‌ها رایج
Suspense	بارگذاری تنبل	<Suspense fallback={<Loader/>}>	برای lazy loading	کار با lazy
lazy	بارگذاری تنبل کامپوننت	React.lazy(()=>import('./Comp'))	برای Split Code
Portal	رندر خارج از سلسله‌مراتب	ReactDOM.createPortal(child,domNode)	نمایش مودال
Prop Drilling	ارسال props زیاد	اجتناب شود	Context استفاده شود	بهبود ساختار
Context	اشتراک داده در عمق	createContext(), useContext()	مدیریت داده مشترک	مهم برای state

📊 Complete ری‌اکت (React) Properties Reference

Property	Values	Default	Description	ری‌اکت (React) Support
className	string	null	تعیین کلاس CSS	v16+
style	object	{}	اعمال استایل داخلی	v16+
key	string/number	null	شناسه منحصربه‌فرد برای عناصر لیستی	v16+
ref	object/function	null	ارجاع به عنصر DOM	v16+
dangerouslySetInnerHTML	object	null	درج مستقیم HTML خام	v16+
suppressHydrationWarning	boolean	false	جلوگیری از هشدار hydration	v17+
tabIndex	number	string	null	کنترل فوکوس
aria-*	string	depends	ویژگی‌های دسترس‌پذیری	v16+
onClick,function	null	مدیریت کلیک	v16+
onChange,function	null	مدیریت ورودی‌ها	v16+
id	string	null	شناسه عنصر	v16+
data-*	any	null	ذخیره داده سفارشی	v16+

خلاصه و گام‌های بعدی در ری‌اکت (React):
در این مرجع JSX یاد گرفتید که JSX چگونه ساختار رابط کاربری را در ری‌اکت تعریف می‌کند و چگونه می‌توان از آن برای ترکیب منطق و نمایش در یک قالب منسجم استفاده کرد. درک JSX برای تسلط بر کامپوننت‌ها، مدیریت وضعیت، و بهینه‌سازی رندر ضروری است.
گام بعدی می‌تواند یادگیری الگوهای پیشرفته ترکیب کامپوننت، مدیریت state با Context یا Redux، و بهینه‌سازی عملکرد با Suspense و memoization باشد. پیشنهاد می‌شود پروژه‌های واقعی با JSX بسازید و به‌صورت تدریجی از ساده به پیچیده حرکت کنید.
منابع پیشنهادی: مستندات رسمی React، React DevTools، دوره‌های پیشرفته JSX و الگوهای معماری کامپوننت.

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

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

زبان

مرجع JSX

اشتراک این آموزش

مثال پایه

مثال کاربردی

Advanced ری‌اکت (React) Implementation

📊 مرجع کامل

📊 Complete ری‌اکت (React) Properties Reference

کلیدواژه‌های مرتبط

🧠 دانش خود را بیازمایید

دانش خود را بیازمایید

📝 دستورالعمل‌ها

🚧 دوره به زودی

Course Name

هنگام در دسترس بودن اطلاع دهید

اکنون در دسترس

Coming Soon

Course Name