Вопросы React Frontend Developer

Prop drilling — это процесс передачи данных от родительского компонента к дочерним через "пропсы", даже если промежуточные компоненты не используют эти данные. Это может усложнить код, особенно при глубокой вложенности компонентов. Проблему prop drilling можно решить, используя такие подходы, как Context API или библиотеки управления состоянием (например, Redux).

 Пример:

function App() {
	return <Parent data="Привет" />;
}
function Parent({ data }) {
	return <Child data={data} />;
}
function Child({ data }) {
	return <Grandchild data={data} />;
}
function Grandchild({ data }) {
	return <h1>{data}</h1>;
}

<canvas> — это HTML-тег, который используется для рисования 2D и 3D графики через JavaScript. Сам по себе <canvas> не содержит графики; для её создания используется JavaScript API. Этот элемент полезен для анимаций, игр и динамического рендеринга изображений, но он требует программирования для каждой детали.

CSS box model - это основной концепт в CSS, описывающий как элементы на веб-странице представлены в виде прямоугольных блоков, состоящих из контента, отступов, границ и внутренних полей.

Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:

• Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.

• ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).

• Универсальные селекторы (*) и каскадность имеют минимальный приоритет.

 Например:

#id { color: blue; } /* более специфично, чем */
.class { color: green; }

Блочные элементы занимают всю ширину доступного пространства, начиная с новой строки (например, <div>, <h1>, <p>), а строчные элементы занимают только необходимое место и располагаются на одной линии с другими элементами (например, <span>, <a>, <strong>). Блочные элементы могут содержать как другие блочные, так и строчные элементы, в то время как строчные обычно содержат только текст или другие строчные элементы.

Для создания таблицы в HTML используются теги <table>, <tr>, <td>, <th>, <thead>, <tbody> и <tfoot>. Тег <table> создает саму таблицу, <tr> — строку, <td> — ячейку, а <th> — заголовочную ячейку. Дополнительные теги, такие как <thead>, <tbody>, и <tfoot>, позволяют структурировать таблицу на разделы.

SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет отображать изображения, масштабируемые без потери качества. SVG используется для создания логотипов, иконок, диаграмм и других графических элементов, которые остаются четкими при любом разрешении. Элементы SVG можно анимировать и управлять ими через CSS и JavaScript.

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

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

Функции — это блоки кода, которые выполняют определённую задачу. Они помогают избежать дублирования кода, упрощают его обслуживание и делают программу более понятной. Функция может принимать данные (параметры) и возвращать результат. Например:

function greet(name) {
  return `Привет, ${name}!`;
}
console.log(greet("Иван")); // Выведет: Привет, Иван!