معرفی Introducing JSX | JSX

این variable را در نظر بگیرید:

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

این نوشتن تگ نه string نه HTML است.

به این JSX کفته می شود، ویک syntax در JavaScript است.توصیه می کنیم ازآن در ui برنامه React استفاده کنید. JSX ممکن است یک زبان الگو را به شما یادآوری کند، اما با قدرت کامل JavaScript همراه است.

JSX در React یک المنت (elements) تولید می کند. دربخش بعدی نحوه ارائه آنها به DOM را بررسی می کنیم. در زیر می توانید اصول اولیه JSX را برای شروع کار پیدا کنید.

چرا JSX ؟ | ?Why JSX

React منطق را در رندر قبول می کند و منطق ui همراه است: نحوه هندل ایونت ها، چگونه state با گذشت زمان تغییر می کند، و نحوه تغییر داده ها برای نمایش.

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

React نیازی به استفاده از JSX ندارد، اما بیشتر افراد هنگام کار با UI دردرون کد JavaScript آن را به عنوان یک کمک مفید می دانند. همچنین به React امکان نمایش خطاهای و پیام های هشدار دهنده را می دهد.

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

قرار دادن عبارت در Embedding Expressions in JSX | JSX

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

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

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

می توانید هر عبارت یا متغییر جاوا اسکریپتی را در داخل braces در JSX قرار دهید. به عنوان مثال : ۲+۲ ، (user.firstName ، formatName(user  که همه عبارات متعبر  JavaScript هستند.

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

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

ما برای خوانی JSX را در چندین خط تقسیم می کنیم. درحالی که لازم نیست، در هنگام انجام این کار، ما همچنین توصیه می کنیم آن را در داخل پرانتز بذارید تا از خطاهای درج تصادفی جلوگیری کنید.

JSX بیش تر از یک Expression است | JSX is an Expression Too

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

این بدان معنا است که می توانید JSX را در داخل عبارات  (statements) وبرای حلقه ها (loops) استفاده کنید، به متغییر ها (variables) اختصاص دهید، به عنوان آرگمان (arguments) بپذیرید، و return  کنید  از فانکشن ها (functions).

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

مشخص کردن اتریبیوت ها با  Specifying Attributes with JSX | JSX

شمامی توانید از عبارات ها به عنوان اتریبیوت رشته مشخص استفاده کنید:

const element = <div tabIndex=&quot0&quot></div>;

همچنین می توانید از braces برای قرار دادن یک عبارت JavaScript در یک اتریبیوت استفاده کنید.

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

هنگام قرار دادن یک عبارت جاوا اسکریپت دریک اتریبیوت پرانتز ها را مجدد قرار ندهید.شما باید از عبارات استفاده کنید (برای مقادیر رشته) یا از براکت (برای عبارات)، اما هر دو در یک  اتریبیوت نیستند.

هشدار:

از آنجا که JSX به JavaScript نزدیکتر از HTML است ،  React DOM از کنوانسیون نامگذاری ویژگی CamelCase به جای نام attribute  های HTML استفاده می کند.

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

مشخص کردن فرزند در  Specifying Children with JSX| 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 Prevents Injection Attacks

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

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

به طور پیش فرض، REACT DOM  از مقادیر قرار داده شده در JSX قبل از رندر آنها فرار می کند. بنابر این تضمین می کند شما هرگز نمی توانید چیزی را که به واضح نوشته نشده است را در اپلیکشن خود عمال کنید. قبل از اینکه رندر شود ، همه چیز به یک رشته تبدیل می شود. این کمک می کند تا از حملات (cross-site-scripting(XSS جلوگیری کنید.

JSX نمایش دهنده Objects است | JSX Represents Objects

بابل JSX را به ارتباط های ()React.createElement تبدیل می کند.

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

const element = (
  <h1 className=&quotgreeting&quot>
    Hello, world!
  </h1>
);

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

()React.createElement چند چک انجام می دهد که شما کد بون اشکال بنویسید اما در اصل یک object  مانند این ایجاد می کند:

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

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

ما در بخش بعدی رندر عناصر React را به DOM بررسی خواهیم کرد.

نکته:

توصیه می کنیم از ویرایشگر زبان “Babel “ برای ویرایشگر مورد نظر خود استفاده کنید تا کد ES6 و JSX به درستی برجسته شود.

منبع

ما در سایتمون ترجمعه مستندات React js به فارسی قرار میدیم خوشحال میشیم نظرت رو درمورد مقاله های ما بگی