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

id, title, challengeType, isRequired, forumTopicId, localeTitle

id	title	challengeType	isRequired	forumTopicId	localeTitle
587d7dbc367417b2b2512bb1	Create a Simple JSX Element	6	false	301390	Создание простого элемента JSX

Description

Intro: React - это библиотека представлений с открытым исходным кодом, созданная и поддерживаемая Facebook. Это отличный инструмент для создания пользовательского интерфейса (UI) современных веб-приложений. React использует синтаксическое расширение JavaScript под названием JSX, которое позволяет вам писать HTML непосредственно в JavaScript. Это имеет несколько преимуществ. Он позволяет использовать полную программную мощность 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 DOM. Затем React использует моментальные снимки своей собственной DOM для оптимизации обновления только определенных частей фактического DOM.

Instructions

Инструкции: текущий код использует JSX для назначения элемента div постоянному JSX . Замените div элементом h1 и добавьте текст Hello JSX! внутри него.

Tests

tests:
  - text: The constant <code>JSX</code> should return an <code>h1</code> element.
    testString: assert(JSX.type === 'h1');
  - text: The <code>h1</code> tag should include the text <code>Hello JSX!</code>
    testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!'));

Challenge Seed

const JSX = <div></div>;

After Tests

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

Solution

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