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>;
|
|||
|
|
```
|