---
id: 587d7dbc367417b2b2512bb1
title: Створення простого JSX елементу
challengeType: 6
forumTopicId: 301390
dashedName: create-a-simple-jsx-element
---

# --description--

React - це бібліотека з відкритим вихідним кодом, яка підтримується Facebook. Це гарний інструмент для візуалізації інтерфейсу користувача (UI) у сучасних вебпрограмах.

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

Наприклад, оскільки JSX є синтаксичним розширенням для JavaScript, ви можете писати JavaScript безпосередньо в JSX. Для цього, просто напишіть код у фігурних дужках, якщо він має сприйматися як JavaScript: `{ 'this is treated as JavaScript code' }`. Це знадобиться вам у майбутніх завданнях.

Однак, оскільки JSX не справжній JavaScript, JSX код потрібно спочатку скомпілювати у JavaScript. Для цього часто використовують компілятор Babel (компілятор типу "вихідний код у вихідний код"). Щоб вам було зручніше, ми вже додали його перед початком завдань. Якщо у вас буде неправильний синтаксис JSX, ви побачите, що перший тест у завданні видасть помилку.

Варто зазначити, що завдання непомітно звертається до `ReactDOM.render(JSX, document.getElementById('root'))`. Цей виклик функції розміщує JSX у просте вираження DOM, що створює React. Далі React використовує статистику власних DOM, щоб оптимізувати оновлення конкретних частин у конкретному DOM.

# --instructions--

Поточний код використовує JSX, щоб призначити елемент `div` константі `JSX`. Замініть `div` на елемент `h1` та додайте текст `Hello JSX!` у нього.

# --hints--

Константа `JSX` має повернути елемент `h1`.

```js
assert(JSX.type === 'h1');
```

Тег `h1` має містити текст `Hello JSX!`

```js
assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
```

# --seed--

## --after-user-code--

```jsx
ReactDOM.render(JSX, document.getElementById('root'))
```

## --seed-contents--

```jsx
const JSX = <div></div>;
```

# --solutions--

```jsx
const JSX = <h1>Hello JSX!</h1>;
```