معرفی JSX

تعریف متغیر زیر را در نظر بگیرید:

const element = <h1>Hello, world!</h1>;

این قاعده بامزه نه یک رشته متنی و نه HTML است.

به این JSX گفته می‌شود. یک قاعده توسعه یافته برای جاوااسکریپت می‌باشد. ما استفاده از آن با ری‌اکت را برای تعریف اینکه رابط کاربری باید چه شکلی باشد پیشنهاد می‌کنیم. ممکن است JSX برای شما یک زبان قالب (template language) به نظر برسد اما با تمام قدرت و امکانات جاوااسکریپت همراه می‌شود.

JSX المنت‌های ری‌اکت را تولید می‌کند. ما در بخش بعدی نحوه رنرد شدن آن‌ها در DOM را کاوش می‌کنیم. شما می‌توانید مفاهیم پایه‌ای مورد نیاز برای شروع با JSX را پایین‌تر پیدا کنید.

چرا JSX؟

ری‌اکت این حقیقت را که منطق رندر کردن ذاتا به منطق رابط کاربری مانند: چگونگی کنترل رویدادها، اینکه state در طول زمان چگونه تغییر می‌کند و اینکه داده چگونه برای نمایش آماده می‌شود متصل و وابسته است را پذیرفته‌است.

به جای جداسازی مصنوعی تکنولوژی‌ها با قراردادن نشانه‌گذاری و منطق در فایل‌های جداگانه، ری‌اکت با واحد‌هایی با وابستگی بسیار کم که “کامپوننت” نامیده می‌شوند و شامل هر دو هستند دغدغه‌ها را جدا کرده است. ما در بخش‌های آینده به کامپوننت‌ها برمی‌گردیم اما اگر شما با قرار دادن نشانه‌گذاری در JS راحت نیستید، ممکن است این گفتگو شما را قانع کند.

ری‌اکت به استفاده از JSX نیاز ندارد، اما بیشتر مردم آن را به عنوان یک کمک بصری در زمان کار کردن با رابط کاربری درون کدهای جاوااسکریپت مفید می‌دانند. همچنین به ری‌اکت اجازه می‌دهد تا خطاها و تذکرهای کاربردی‌تری را نمایش دهد.

با کامل شدن آن بیایید شروع کنیم!

قراردادن عبارات در JSX

در مثال زیر، ما یک متغیر به نام name تعریف می‌کنیم و سپس با قراردادن آن بین دو آکولاد، از آن در JSX استفاده می‌کنیم.

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;

شما می‌توانید هر عبارت جاوااسکریپت معتبری را بین آکولادها در JSX قرار دهید. برای مثال، 2 + 2، user.firstName یا formatName(user)، همه عبارات معتبر جاوااسکریپت هستند.

در مثال زیر، ما نتیجه صدازدن یک تابع جاوااسکریپت به نام formatName(user) را درون یک المنت <h1> قرار می‌دهیم.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

Try it on CodePen

ما JSX را در چند سطر برای خوانایی بالاتر تقسیم می‌کنیم. با اینکه ضروری نیست، اما ما پیشنهاد می‌کنیم هنگام انجام این کار، از پوشش در پرانتزها نیز برای جلوگیری از اشتباهات رایج درج خودکار نقطه‌ویرگول (semicolon) استفاده نمایید.

JSX نیز یک عبارت است

بعد از کامپایل شدن، عبارات JSX به فراخوانی‌های معمولی توابع جاوااسکریپت تبدیل می‌شوند و به عنوان آبجکت‌های جاوااسکریپتی سنجیده (evaluate) می‌شوند.

این به این معنی است که شما می‌توانید از JSX درون گزاره‌های if و حلقه‌های for استفاده کنید، به یک متغیر منصوبش کنید، به عنوان یک آگومان قبولش کنید و یا آن را به عنوان نتیجه یک تابع برگردانید:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

تعیین کردن صفات با JSX

شمامی‌توانید از نشان نقل قول برای تعیین رشته‌های متنی به عنوان صفات استفاده کنید.

const element = <a href="https://www.reactjs.org"> link </a>;

همچنین می‌توانید از آکولاد برای قراردادن عبارت جاوااسکریپت درون یک صفت استفاده کنید:

const element = <img src={user.avatarUrl}></img>;

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

هشدار:

از آنجایی که JSX به جاوااسکریپت بیشتر از HTML نزدیک است، DOM ری‌اکت به جای استفاده از نام‌های صفات HTML از نحوه نامگذاری camelCase استفاده می‌کند.

برای مثال، class در JSX به className تبدیل می‌شود و tabindex به tabIndex تبدیل می‌شود.

تعیین کردن فرزندان در JSX

مانند XML، اگر یک تگ خالی است، می‌توانید فورا با /> آن را ببندید.

const element = <img src={user.avatarUrl} />;

تگ‌های JSX می‌توانند شامل فرزند باشند:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX از حملات Injection جلوگیری می‌کند

قراردادن ورودی کاربر در JSX ایمن است:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

DOM ری‌اکت، هر مقداری که قبل از رندر شدن آن قرارداده شده‌باشد را به صورت پیش‌فرض رها می‌کند.. بنابراین مطمئن می‌شود که شما هرگز نمی‌توانید چیزی که به صورت صریح در اپلیکیشن شما نوشته‌ نشده‌باشد را تزریق کنید. همه‌چیز قبل از رندر شدن به یک رشته متنی تبدیل می‌شود. این به جلوگیری از حملات XSS (cross-site-scripting) کمک می‌کند.

JSX نمایانگر آبجکت‌ها است

Babel، JSX را به فراخوانی‌های React.createElement() کامپایل می‌کند.

این دو مثال زیر یکسان هستند:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() تعداد کمی ارزیابی را برای کمک به نوشتن کد‌های بدون باگ اجرا می‌کند اما اساسا یک آبجکت مانند این تولید می‌کند:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

این آبجکت‌ها “المنت‌های ری‌اکت” صدا زده می‌شوند. می‌توانید به آ‌ن‌ها به عنوان توضیح چیزی که می‌خواهید روی صفحه ببینید فکر کنید. ری‌اکت این آبجکت‌ها را می‌خواند و از آن‌ها برای ساخت DOM استفاده می‌کند و آن‌ها را به‌روز حفظ می‌کند.

ما در بخش بعدی رندر شدن المنت‌های ری‌اکت در DOM را بررسی می‌کنیم.

راهنمایی:

ما استفاده از تعریف زبان “Babel” را برای ویرایشگر مورد نظرتان پیشنهاد می‌کنیم که هم کدهای JSX و هم ES6 به درستی برجسته شوند.