Вступ до JSX

Розглянемо оголошення змінної:

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

Цей кумедний синтаксис тегів не є ні рядком, ні HTML.

Він має назву JSX, і це розширення синтаксису для JavaScript. Ми рекомендуємо використовувати його в React, щоб описати, як повинен виглядати інтерфейс користувача. JSX може нагадувати мову шаблонів, але з усіма перевагами JavaScript.

JSX створює “React-елементи”. Ми розглянемо їх рендеринг в DOM в наступному розділі. Нижче ви можете знайти основи JSX, необхідні для початку роботи.

Чому JSX?

React використовує той факт, що логіка виводу пов’язана з іншою логікою інтерфейсу користувача: як обробляються події, як змінюється стан з часом і як дані готуються для рендерингу.

Замість того, щоб штучно відокремити технології, розмістивши розмітку і логіку в окремих файлах, React розділяє відповідальність між вільно зв’язаними одиницями, що містять обидві технології і називаються “компонентами”. Ми повернемося до компонентів у наступному розділі, але якщо вам ще досі не комфортно розміщувати розмітку в JS, ця доповідь може переконати вас в протилежному.

React не вимагає використання JSX, але більшість людей цінують його за візуальну допомогу при роботі з інтерфейсом користувача в коді JavaScript. Він також дозволяє React показати зрозуміліші повідомлення про помилки та попередження.

З цим розібрались, давайте почнемо!

Вставка виразів у JSX

У прикладі нижче ми оголошуємо змінну name, а потім використовуємо її в JSX, обертаючи її у фігурні дужки:

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

ви можете помістити будь-який валідний JavaScript вираз всередину фігурних дужок у JSX. Наприклад, 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')
);

Спробуйте на CodePen

Ми розбиваємо JSX на декілька рядків для покращення читабельності. Хоча це не потрібно, ми також рекомендуємо охоплювати його дужками, щоб уникнути проблем, пов’язаних з автоматичною вставкою крапки з комою.

JSX також є виразом

Після компіляції вирази JSX стають звичайними викликами функцій JavaScript, що повертають об’єкти JavaScript.

Це означає, що ви можете використовувати 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>;

ви також можете використовувати фігурні дужки, щоб вставити вираз 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 запобігає вставці зловмисного коду (Injection Attack)

Можна безпечно вставляти дані, введенні користувачем, в JSX:

const title = response.potentiallyMaliciousInput;
// Це безпечно:
const element = <h1>{title}</h1>;

За замовчуванням, React DOM екранує будь-які значення, що включені в JSX, перед їх рендерингом. Таким чином, це гарантує, що ви ніколи не включите в код те, що явно не написано у вашому додатку. Перед виводом все перетворюється на рядок. Це допомагає запобігти атакам 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-елементами”. ви можете вважати їх описами того, що хочете бачити на екрані. React читає ці об’єкти і використовує їх для побудови DOM і підтримки його в актуальному стані.

Ми розглянемо рендеринг React-елементів в DOM у наступному розділі).

Порада:

Ми рекомендуємо використовувати “Babel” language definition для вашого редактора, щоб код ES6 та JSX правильно виділявся.