تعریف متغیر زیر را در نظر بگیرید:
\nconst element = <h1>Hello, world!</h1>;این قاعده بامزه نه یک رشته متنی و نه HTML است.
\nبه این JSX گفته می‌شود. یک قاعده توسعه یافته برای جاوااسکریپت می‌باشد. ما استفاده از آن با ری‌اکت را برای تعریف اینکه رابط کاربری باید چه شکلی باشد پیشنهاد می‌کنیم. ممکن است JSX برای شما یک زبان قالب (template language) به نظر برسد اما با تمام قدرت و امکانات جاوااسکریپت همراه می‌شود.
\nJSX المنت‌های ری‌اکت را تولید می‌کند. ما در بخش بعدی نحوه رنرد شدن آنها در DOM را کاوش می‌کنیم. شما می‌توانید مفاهیم پایه‌ای مورد نیاز برای شروع با JSX را پایین‌تر پیدا کنید.
\nری‌اکت این حقیقت را که منطق رندر کردن ذاتا به منطق رابط کاربری مانند: چگونگی کنترل رویدادها، اینکه state در طول زمان چگونه تغییر می‌کند و اینکه داده چگونه برای نمایش آماده می‌شود متصل و وابسته است را پذیرفته‌است.
\nبه جای جداسازی مصنوعی تکنولوژی‌ها با قراردادن نشانه‌گذاری و منطق در فایل‌های جداگانه، ری‌اکت با واحد‌هایی با وابستگی بسیار کم که “کامپوننت” نامیده می‌شوند و شامل هر دو هستند دغدغه‌ها را جدا کرده است. ما در بخش‌های آینده به کامپوننت‌ها برمی‌گردیم اما اگر شما با قرار دادن نشانه‌گذاری در JS راحت نیستید، ممکن است این گفتگو شما را قانع کند.
\nری‌اکت به استفاده از JSX نیاز ندارد، اما بیشتر مردم آن را به عنوان یک کمک بصری در زمان کار کردن با رابط کاربری درون کدهای جاوااسکریپت مفید می‌دانند. همچنین به ری‌اکت اجازه می‌دهد تا خطاها و تذکرهای کاربردی‌تری را نمایش دهد.
\nبا کامل شدن آن بیایید شروع کنیم!
\nدر مثال زیر، ما یک متغیر به نام name تعریف می‌کنیم و سپس با قراردادن آن بین دو آکولاد، از آن در JSX استفاده می‌کنیم.
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;\nReactDOM.render(\n element,\n document.getElementById('root')\n);شما می‌توانید هر عبارت جاوااسکریپت معتبری را بین آکولادها در JSX قرار دهید.\nبرای مثال، 2 + 2، user.firstName یا formatName(user)، همه عبارات معتبر جاوااسکریپت هستند.
در مثال زیر، ما نتیجه صدازدن یک تابع جاوااسکریپت به نام formatName(user) را درون یک المنت <h1> قرار می‌دهیم.
function formatName(user) {\n return user.firstName + ' ' + user.lastName;\n}\n\nconst user = {\n firstName: 'Harper',\n lastName: 'Perez'\n};\n\nconst element = (\n <h1>\n Hello, {formatName(user)}! </h1>\n);\n\nReactDOM.render(\n element,\n document.getElementById('root')\n);ما JSX را در چند سطر برای خوانایی بالاتر تقسیم می‌کنیم. با اینکه ضروری نیست، اما ما پیشنهاد می‌کنیم هنگام انجام این کار، از پوشش در پرانتزها نیز برای جلوگیری از اشتباهات رایج درج خودکار نقطه‌ویرگول (semicolon) استفاده نمایید.
\nبعد از کامپایل شدن، عبارات JSX به فراخوانی‌های معمولی توابع جاوااسکریپت تبدیل می‌شوند و به عنوان آبجکت‌های جاوااسکریپتی سنجیده (evaluate) می‌شوند.
\nاین به این معنی است که شما می‌توانید از JSX درون گزاره‌های if و حلقه‌های for استفاده کنید، به یک متغیر منصوبش کنید، به عنوان یک آگومان قبولش کنید و یا آن را به عنوان نتیجه یک تابع برگردانید:
function getGreeting(user) {\n if (user) {\n return <h1>Hello, {formatName(user)}!</h1>; }\n return <h1>Hello, Stranger.</h1>;}شمامی‌توانید از نشان نقل قول برای تعیین رشته‌های متنی به عنوان صفات استفاده کنید.
\nconst element = <div tabIndex=\"0\"></div>;همچنین می‌توانید از آکولاد برای قراردادن عبارت جاوااسکریپت درون یک صفت استفاده کنید:
\nconst element = <img src={user.avatarUrl}></img>;زمانی که یک عبارت جاوااسکریپت را درون یک صفت قرار می‌دهید از نشان‌های نقل قول در دو طرف آکولادها استفاده نکنید. شما باید یا از نشان‌های نقل قول (برای مقادیر متنی) یا آکولادها (برای عبارات) استفاده کنید، اما نباید از هر دو برای یک صفت استفاده کنید.
\n\n\nهشدار:
\nاز آنجایی که JSX به جاوااسکریپت بیشتر از HTML نزدیک است، DOM ری‌اکت به جای استفاده از نام‌های صفات HTML از نحوه نامگذاری
\ncamelCaseاستفاده می‌کند.برای مثال،
\nclassدر JSX بهclassNameتبدیل می‌شود وtabindexبهtabIndexتبدیل می‌شود.
مانند XML، اگر یک تگ خالی است، می‌توانید فورا با /> آن را ببندید.
const element = <img src={user.avatarUrl} />;تگ‌های JSX می‌توانند شامل فرزند باشند:
\nconst element = (\n <div>\n <h1>Hello!</h1>\n <h2>Good to see you here.</h2>\n </div>\n);قراردادن ورودی کاربر در JSX ایمن است:
\nconst title = response.potentiallyMaliciousInput;\n// This is safe:\nconst element = <h1>{title}</h1>;DOM ری‌اکت، هر مقداری که قبل از رندر شدن آن قرارداده شده‌باشد را به صورت پیش‌فرض رها می‌کند.. بنابراین مطمئن می‌شود که شما هرگز نمی‌توانید چیزی که به صورت صریح در اپلیکیشن شما نوشته نشده‌باشد را تزریق کنید. همه‌چیز قبل از رندر شدن به یک رشته متنی تبدیل می‌شود. این به جلوگیری از حملات XSS (cross-site-scripting) کمک می‌کند.
\nBabel، JSX را به فراخوانی‌های React.createElement() کامپایل می‌کند.
این دو مثال زیر یکسان هستند:
\nconst element = (\n <h1 className=\"greeting\">\n Hello, world!\n </h1>\n);const element = React.createElement(\n 'h1',\n {className: 'greeting'},\n 'Hello, world!'\n);React.createElement() تعداد کمی ارزیابی را برای کمک به نوشتن کدهای بدون باگ اجرا می‌کند اما اساسا یک آبجکت مانند این تولید می‌کند:
// Note: this structure is simplified\nconst element = {\n type: 'h1',\n props: {\n className: 'greeting',\n children: 'Hello, world!'\n }\n};این آبجکت‌ها “المنت‌های ری‌اکت” صدا زده می‌شوند. می‌توانید به آنها به عنوان توضیح چیزی که می‌خواهید روی صفحه ببینید فکر کنید. ری‌اکت این آبجکت‌ها را می‌خواند و از آنها برای ساخت DOM استفاده می‌کند و آنها را به‌روز حفظ می‌کند.
\nما در بخش بعدی رندر شدن المنت‌های ری‌اکت در DOM را بررسی می‌کنیم.
\n\n","frontmatter":{"title":"معرفی JSX","next":"rendering-elements.html","prev":"hello-world.html"},"fields":{"path":"content/docs/introducing-jsx.md","slug":"docs/introducing-jsx.html"}}},"pageContext":{"slug":"docs/introducing-jsx.html"}},"staticQueryHashes":[]}راهنمایی:
\nما استفاده از تعریف زبان “Babel” را برای ویرایشگر مورد نظرتان پیشنهاد می‌کنیم که هم کدهای JSX و هم ES6 به درستی برجسته شوند.
\n