React Frontend Developer

Question 1

Что такое JSX?

Accepted Answer

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.

Пример:

const element = <h1>Привет, мир!</h1>;

Под капотом JSX преобразуется в вызовы функций, например:

React.createElement('h1', null, 'Привет, мир!');

Привет, мир!

;Под капотом JSX преобразуется в вызовы функций, например:React.createElement('h1', null, 'Привет, мир!');

Question 2

Как браузер читает JSX?

Accepted Answer

Браузеры не могут напрямую читать JSX, так как это не валидный JavaScript. Для того чтобы браузер мог его исполнить, JSX необходимо транспилировать (преобразовать) в обычный JavaScript. Это обычно делается с помощью инструментов, таких как Babel, которые преобразуют JSX в вызовы функций, понятные браузеру.

Question 3

Во что компилируется JSX?

Accepted Answer

JSX компилируется в обычный JavaScript.Чаще всего он превращается в вызовы React.createElement.Браузер не понимает JSX напрямую.JSX — это лишь синтаксический сахар.

Question 4

Как передавать JSX внутрь компонента?

Accepted Answer

В React JSX можно передать внутрь компонента двумя основными способами. Первый — через специальный проп `children`, поместив JSX между открывающим и закрывающим тегами компонента. Второй — через любой другой проп, передав JSX как его значение. Проп `children` — это стандартный и наиболее интуитивный способ для передачи разметки, который делает компонент обёрткой. Передача через именованный проп даёт больше контроля, например, для рендеринга контента в разных местах компонента.

Question 5

Зачем нужны key в списках в JSX?

Accepted Answer

Атрибут key помогает React идентифицировать каждый элемент списка при обновлении. Без него React будет перерисовывать весь список, что снижает производительность. Key должен быть уникальным и стабильным, например, ID элемента. Использование индекса массива в качестве key может привести к ошибкам при изменении порядка элементов.

Вопросы React Frontend Developer