freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5f	Візуалізація елементів HTML в DOM	6	301406	render-html-elements-to-the-dom

--description--

Отже, ви вже дізналися, що JSX є зручним інструментом, щоб писати читабельний HTML всередині JavaScript. За допомогою React, ми можемо візуалізувати JSX прямо до HTML DOM, використовуючи React's rendering API, відомий як ReactDOM.

ReactDOM пропонує простий метод, щоб візуалізувати React елементи в DOM, який виглядає так: ReactDOM.render(componentToRender, targetNode), де першим аргументом є React елемент або компонент, який ви хочете візуалізувати, а другий аргумент - це DOM вузол, який ви хочете перетворити компонент.

Як ви і очікуєте, ReactDOM.render() має бути названий після оголошення елементів JSX, так само, як ви повинні створювати змінні перед тим, як їх використанням.

--instructions--

Редактор коду має простий компонент JSX. Використовуйте метод ReactDOM.render(), для того щоб візуалізувати цей компонент на сторінку. Ви можете передавати визначені JSX елементи безпосередньо як перший аргумент і використовувати document.getElementById() для того, щоб вибрати DOM вузол для їх відображення. Також є div with id='challenge-node' який доступний вам для використання. Переконайтеся, що ви не змінили сталу JSX.

--hints--

Стала JSX має повертати елемент div.

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

div має містити тег h1 як перший елемент.

assert(JSX.props.children[0].type === 'h1');

div має містити тег p як другий елемент.

assert(JSX.props.children[1].type === 'p');

Наданий елемент JSX має відображатися в DOM вузла за допомогою id challenge-node.

assert(
  document.getElementById('challenge-node').childNodes[0].innerHTML ===
    '<h1>Hello World</h1><p>Lets render this to the DOM</p>'
);

--seed--

--seed-contents--

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// Change code below this line

--solutions--

const JSX = (
<div>
  <h1>Hello World</h1>
  <p>Lets render this to the DOM</p>
</div>
);
// Change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));