{"componentChunkName":"component---src-templates-docs-js","path":"/docs/introducing-jsx.html","result":{"data":{"markdownRemark":{"html":"

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

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

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

\n

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

\n

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

\n

Чому JSX?

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

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

ви можете помістити будь-який валідний JavaScript вираз всередину фігурних дужок у JSX. Наприклад, 2 + 2, user.firstName, або formatName(user) є валідними виразами JavaScript.

\n

У наведеному нижче прикладі ми вставляємо результат виклику функції JavaScript, formatName(user) в елемент <h1>.

\n
function formatName(user) {\n  return user.firstName + ' ' + user.lastName;\n}\n\nconst user = {\n  firstName: 'Harper',\n  lastName: 'Perez'\n};\n\nconst element = (\n  <h1>\n    Hello, {formatName(user)}!  </h1>\n);\n\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);
\n

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

\n

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

\n

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

\n

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

\n

Це означає, що ви можете використовувати JSX всередині if виразів і циклів for, присвоювати його змінним, приймати його як аргументи і повертати його з функцій:

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

Визначення атрибутів за допомогою JSX

\n

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

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

ви також можете використовувати фігурні дужки, щоб вставити вираз JavaScript у атрибут:

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

Не вставляйте лапки навколо фігурних дужок, коли вкладаєте вираз JavaScript в атрибут. ви повинні використовувати лапки (для рядків) або фігурні дужки (для виразів), але не обидва в одному атрибуті.

\n
\n

Увага:

\n

Оскільки JSX схожий більше на JavaScript, ніж на HTML, React DOM використовує правило іменування властивостей camelCase замість імен атрибутів HTML.

\n

Наприклад, class в JSX стає className, tabindex - tabIndex.

\n
\n

Визначення дочірніх елементів JSX

\n

Якщо тег порожній, ви можете одразу закрити його за допомогою />, як XML:

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

Теги JSX можуть мати дочірні елементи:

\n
const element = (\n  <div>\n    <h1>Hello!</h1>\n    <h2>Good to see you here.</h2>\n  </div>\n);
\n

JSX запобігає вставці зловмисного коду (Injection Attack)

\n

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

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

За замовчуванням, React DOM екранує будь-які значення, що включені в JSX, перед їх рендерингом. Таким чином, це гарантує, що ви ніколи не включите в код те, що явно не написано у вашому додатку. Перед виводом все перетворюється на рядок. Це допомагає запобігти атакам XSS (cross-site-scripting).

\n

JSX - це об’єкти по суті

\n

Babel компілює JSX до викликів React.createElement().

\n

Ці два приклади ідентичні між собою:

\n
const element = (\n  <h1 className=\"greeting\">\n    Hello, world!\n  </h1>\n);
\n
const element = React.createElement(\n  'h1',\n  {className: 'greeting'},\n  'Hello, world!'\n);
\n

React.createElement() виконує кілька перевірок, які допоможуть вам написати код, що не містить помилок, але, по суті, він створює об’єкт, наведений нижче:

\n
// Примітка: ця структура спрощена\nconst element = {\n  type: 'h1',\n  props: {\n    className: 'greeting',\n    children: 'Hello, world!'\n  }\n};
\n

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

\n

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

\n
\n

Порада:

\n

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

\n
","frontmatter":{"title":"Вступ до JSX","next":"rendering-elements.html","prev":"hello-world.html"},"fields":{"path":"content/docs/introducing-jsx.md","slug":"docs/introducing-jsx.html"}}},"pageContext":{"slug":"docs/introducing-jsx.html"}},"staticQueryHashes":[]}