JSX یک افزونه سینتکس برای javascript است. ما توصیه می‌کنیم از آن همراه با React (یکی از کتابخانه‌های جاوا اسکریپت) برای تعریف اینکه ظاهر UI (رابط کاربری) باید به چه شکل باشد استفاده کنید.JSX ممکن است که یک زبان الگونویسی را به شما یادآوری کند، اما تمام قدرت JavaScript را دارد بنابراین در این مقاله بطور کامل JSX را معرفی خواهیم کرد.

نحوه تعریف این متغیر را ببینید.

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

این سینتکس تگ، نه یک رشته است و نه html ، بلکه کد JSX نام دارد و یک افزونه سینتکس برای javascript است. ما توصیه می‌کنیم از آن همراه با React (یکی از کتابخانه‌های جاوا اسکریپت) برای تعریف اینکه ظاهر UI (رابط کاربری) باید به چه شکل باشد استفاده کنید.
JSX ممکن است که یک زبان الگونویسی را به شما یادآوری کند، اما تمام قدرت JavaScript را دارد.

JSX عناصر"elements" React را تولید میکند. در بخش بعدی رندر کردن آنها به DOM را آموزش می‌دهیم. در پایین، شما می‌توانید اصول اولیه JSX برای شروع کار را ببینید.

چرا JSX؟

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

React به جای این که فناوری‌‌ها را به صورت مصنوعی و با قرار دادن markup در فایل‌های جداگانه جداسازی کند، با واحدهایی که " components " نام دارند و هر دو مورد را شامل می‌شوند، نگرانی‌ها را از بین می‌برد. در بخش بعدی به components می‌پردازیم و اگر هنوز با markup (نشان گذاری) در JS راحت نیستید این بخش می‌تواند شما را متقاعد کند.
React  نیاز به استفاده از JSX ندارد، اما بیشتر افراد در هنگام کار با UI در داخل کد جاوا اسکریپت آن را به عنوان یک ابزار کمک کننده بصری می‌بینند. همچنین به React اجازه نمایش خطاهای مفید و پیام‌های هشدار دهنده را می‌دهد.

بیایید شروع کنیم

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

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

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

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

در مثال زیر، نتیجه ی فراخوانی یک تابع جاوا اسکریپت، formatName  (کاربر) را به یک عنصر <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')
);

در CodePen امتحان کنید

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

JSX هم یک عبارت است

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

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

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

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

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

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

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

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

هشدار:

از آنجا که JSX به جاوا اسکریپت نزدیکتراست تا به HTML ، React DOM به جای نامهای صفت HTML از قرارداد نام گذاری ویژگی camelCase استفاده می‌کند.
به عنوان مثال class  در  JSX به className و  tabindex به tabIndex تبدیل می‌شود.

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

اگر یک تگ "tag" خالی بود می‌توانید با یک /> آن را ببندید مثل 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 را از بین می‌برد. بنابراین تضمین می‌کند که هرگز چیزی را که به طور صریح در درخواست شما نوشته نشده است، را نتوانید وارد کنید (تزریق کنید). همه چیز قبل از اینکه رندر شود، به یک رشته تبدیل می‌شود. این کار از حملات XSS (تزریق اسکریپت از طریق وبگاه)جلوگیری می‌کند.

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!'
  }
};

این ابجکت‌ها "React elements"  نامیده می‌شوند. شما می‌توانید از آنها به عنوان توصیف آنچه که می‌خواهید بر روی صفحه نمایش ببینیداستفاده کنید. React این ابجکت‌ها را می‌خواند و از آنها برای ساختن DOM و آپدیت نگه داشتن آن استفاده می‌کند.