58 lines
3.3 KiB
Markdown
58 lines
3.3 KiB
Markdown
---
|
||
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>;
|
||
```
|