76 lines
3.0 KiB
Markdown
76 lines
3.0 KiB
Markdown
---
|
||
id: 5a24bbe0dba28a8d3cbd4c5f
|
||
title: Візуалізація елементів HTML в DOM
|
||
challengeType: 6
|
||
forumTopicId: 301406
|
||
dashedName: 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`.
|
||
|
||
```js
|
||
assert(JSX.type === 'div');
|
||
```
|
||
|
||
`div` має містити тег `h1` як перший елемент.
|
||
|
||
```js
|
||
assert(JSX.props.children[0].type === 'h1');
|
||
```
|
||
|
||
`div` має містити тег `p` як другий елемент.
|
||
|
||
```js
|
||
assert(JSX.props.children[1].type === 'p');
|
||
```
|
||
|
||
Наданий елемент JSX має відображатися в DOM вузла за допомогою id `challenge-node`.
|
||
|
||
```js
|
||
assert(
|
||
document.getElementById('challenge-node').childNodes[0].innerHTML ===
|
||
'<h1>Hello World</h1><p>Lets render this to the DOM</p>'
|
||
);
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```jsx
|
||
const JSX = (
|
||
<div>
|
||
<h1>Hello World</h1>
|
||
<p>Lets render this to the DOM</p>
|
||
</div>
|
||
);
|
||
// Change code below this line
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```jsx
|
||
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'));
|
||
```
|