freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-simple-jsx-element.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7dbc367417b2b2512bb1	Створення простого JSX елементу	6	301390	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.

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

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

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

--seed--

--after-user-code--

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

--seed-contents--

const JSX = <div></div>;

--solutions--

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