We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Вступ до JSX

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React and include live examples:

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

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>;

ви можете помістити будь-який валідний 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>
);

Спробуйте на 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 = <a href="https://www.reactjs.org"> link </a>;

ви також можете використовувати фігурні дужки, щоб вставити вираз 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 правильно виділявся.