Вопросы React Frontend Developer

Для вставки аудио в HTML используется тег <audio>. Как и в случае с видео, можно указывать несколько форматов аудиофайлов через тег <source>, а атрибуты controls, autoplay, и loop управляют воспроизведением аудио.

Тег <iframe> используется для встраивания на страницу содержимого с другого веб-ресурса, например, другого сайта, видео с YouTube или карты. Он создает окно внутри текущей страницы, где загружается внешний ресурс. <iframe> полезен для интеграции стороннего контента, сохраняя при этом основную структуру страницы.

Делегирование событий — это подход, при котором событие обрабатывается на родительском элементе, а не на каждом дочернем элементе, к которому оно относится. Это работает благодаря всплытию событий: событие, вызванное на дочернем элементе, поднимается вверх по дереву DOM до родителя. Этот метод позволяет сократить количество обработчиков событий и упростить их управление.

Пример:

document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

Прототип — это объект, от которого другой объект может наследовать свойства и методы. В JavaScript каждый объект имеет скрытое свойство [[Prototype]], которое указывает на его прототип. Это позволяет организовать наследование, чтобы не дублировать код и переиспользовать общие методы. Например, если метод не найден в объекте, JavaScript ищет его в прототипе.

Пример:

const animal = { eats: true };
const dog = Object.create(animal);
console.log(dog.eats); // true

this в JavaScript — это ключевое слово, которое ссылается на текущий контекст выполнения. Контекст зависит от того, где и как используется this:

• В методе объекта this указывает на этот объект.

• В функции this по умолчанию указывает на глобальный объект (в строгом режиме — undefined).

• В стрелочных функциях this наследуется из внешнего контекста.

Пример:

const obj = {
	name: "Иван",
	greet() {
		console.log(`Привет, ${this.name}!`);
	},
};
obj.greet(); // Привет, Иван!

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

Пример:

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

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

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