معرفی JSX

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

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

این سینتکس تگ، نه یک رشته است، و نه HTML؛ بلکه JSX نام دارد، و در واقع یک افزونه سینتکس برای JavaScript است. ما پیشنهاد می‌کنیم که از آن به همراه React برای تعریف ظاهر رابط کاربری استفاده کنید. JSX ممکن است که یک زبان الگونویسی را به شما یادآوری کند، اما کل قدرت JavaScript را به همراه دارد.

JSX «عناصر» (elements) React را تولید می‌کند. در اینجا، می‌توانید اساس JSX برای شروع کار را ببینید.

چرا JSX؟

React این حقیقت را که منطق رندر کردن، ذاتا با دیگر منطق‌های رابط کاربری (نحوه مدیریت رویدادها، نحوه تغییر state به مرور زمان، و نحوه آماده‌سازی داده‌ها برای نمایش) همراه است را قبول می‌کند.

React به جای این که فناوری‌ها را به صورت مصنوعی و با قرار دادن markup در فایل‌های جداگانه جداسازی کند، با واحدهایی به نام کامپوننت که هر دو مورد را شامل می‌شوند، نگرانی‌ها را از بین می‌برد. React به JSX نیاز ندارد، اما اکثر مردم آن را به عنوان یک کمک کننده بصری پرکاربرد، هنگام کار با رابط‌های کاربری داخل کد JavaScript می‌بینند. JSX همچنین React‌ را قادر می‌سازد تا پیغام‌های هشدار و خطای پرکاربردتری را نمایش دهد.

حال بیایید کار خود را شروع کنیم.

تعبیه کردن عبارات در JSX

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

const name = 'Josh Perez';

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

ReactDOM.render(

  element,

  document.getElementById('root')

);

در JSX می‌توانید هر بیانیه JavaScript معتبری را داخل براکت قرار دهید. برای مثال 2 + 2، user.firstName یا formatName(user) همگی بیانیه‌های JavaScript معتبر هستند.

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

function formatName(user) {

  return user.firstName + ' ' + user.lastName;

}

const user = {

  firstName: 'Harper',

  lastName: 'Perez'

};

const element = (

  <h1>

    Hello, {formatName(user)}!

  </h1>

);

ReactDOM.render(

  element,

  document.getElementById('root')

);

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

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

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

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

function getGreeting(user) {

  if (user) {

    return <h1>Hello, {formatName(user)}!</h1>;

  }

  return <h1>Hello, Stranger.</h1>;

}

مشخص کردن صفات با استفاده از JSX

می‌توانید از quoteها (“”) برای مشخص کردن رشته‌ها به عنوان صفات استفاده کنید:

const element = <div tabIndex="0"></div>;

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

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

وقتی که یک عبارت JavaScript را در یک صفت جاسازی می‌کنید، از براکت استفاده نکنید. یا باید از «“”» استفاده کنید، (برای مقادیر رشته) یا از براکت؛ (برای عبارات) اما نمی‌توانید از هر دوی آن‌ها در یک صفت استفاده کنید.

هشدار: از آنجایی که JSX به JavaScript بیشتر نزدیک است تا HTML، React DOM از قائده نام‌گذاری ویژگی camelCase به جای نام‌های صفت HTML استفاده می‌کند. برای مثال، 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 از حملات تزریقی جلوگیری می‌کند

جاسازی ورودی کاربر در JSX، کاملا امن است:

const title = response.potentiallyMaliciousInput;

// This is safe:

const element = <h1>{title}</h1>;

به طور پیشفرض، React DOM هر مقداری که در JSX جاسازی شده است را قبل از رندر کردن آن escape‌ می‌کند. بدین ترتیب React‌ تضمین می‌کند که شما هیچ وقت هیچ چیزی که به صراحت در برنامه‌تان نوشته نشده است را تزریق نمی‌کنید. همه چیز قبل از رندر شدن تبدیل به یک رشته می‌شود. این کار، از بروز حملات 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() با انجام تعدادی عملیات بررسی برای کمک در نوشتن کدی خالی از باگ به شما کمک می‌کند، اما اساسا آبجکتی به مانند این مورد می‌سازد:

// نکته: این ساختار، ساده‌سازی شده است.

const element = {

  type: 'h1',

  props: {

    className: 'greeting',

    children: 'Hello, world!'

  }

};

این آبجکت‌ها، React Elements نام دارند. می‌توانید آن‌ها را به عنوان توضیحاتی از چیزی که می‌خواهید بر روی صفحه ببینید در نظر داشته باشید. React این آبجکت‌ها را می‌خواند و از آن‌ها برای ساخت DOM، و بروز نگه داشتن آن استفاده می‌کند.

منبع