React использует виртуальный DOM для эффективного обновления интерфейса, минимизируя прямые операции с реальным DOM. Компонентный подход позволяет создавать переиспользуемые UI-элементы с изолированной логикой.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Односторонний поток данных упрощает отладку, а богатая экосистема (React Router, Redux) расширяет возможности. Поддержка SSR (Next.js) улучшает SEO и производительность.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для добавления аудио используется тег <audio> с атрибутом src или вложенными тегами <source> для поддержки разных форматов.

<audio controls>
  <source src="track.mp3" type="audio/mpeg">
  <source src="track.ogg" type="audio/ogg">
  Ваш браузер не поддерживает аудио.
</audio>

- controls добавляет стандартный интерфейс управления
- autoplay включает автоматическое воспроизведение (ограничено в браузерах)
- loop зацикливает воспроизведение

Для кастомного плеера используется JavaScript API (play(), pause()).

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Модификатор public позволяет обращаться к свойствам и методам из любого места, private ограничивает доступ только текущим классом, а protected разрешает доступ самому классу и его подклассам. Эти модификаторы помогают контролировать инкапсуляцию и предотвращают случайное изменение внутреннего состояния.

✈️ Frontend собеседования

Прототипное наследование — это механизм, при котором объекты могут наследовать свойства и методы друг от друга через ссылку __proto__. Каждый объект имеет скрытую ссылку на свой прототип (другой объект), что позволяет делегировать доступ к отсутствующим свойствам.

const animal = { eats: true };
const rabbit = { jumps: true };
rabbit.__proto__ = animal; // Наследование

console.log(rabbit.eats); // true (свойство взято из прототипа)

Функции-конструкторы используют prototype для задания прототипа создаваемым объектам. Современный синтаксис заменяет __proto__ на Object.create() и class.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Псевдокласс :nth-child() позволяет выбирать элементы на основе их позиции среди соседних элементов внутри родительского контейнера. Принимает аргументы:

li:nth-child(2n) { /* Четные элементы */ }
li:nth-child(odd) { /* Нечетные элементы */ }
li:nth-child(3) { /* Третий элемент */ }

- Ключевые слова: odd (нечетные), even (четные)
- Формулы вида An+B (например, 3n+1 выбирает каждый 3-й, начиная с 1-го)
- Нумерация начинается с 1

Работает только с элементами того же уровня в DOM. Для фильтрации по типу элемента используйте :nth-of-type().

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Тег <i> визуально выделяет текст курсивом без семантического акцента, тогда как <em> указывает на смысловое выделение (важность, ударение), что влияет на восприятие контента скринридерами и поисковыми системами. Оба тега отображаются курсивом по умолчанию, но <em> имеет логическую нагрузку.

✈️ Frontend собеседования

Для предотвращения действий браузера по умолчанию (например, отправки формы или перехода по ссылке) используется метод preventDefault() объекта события. В React события передаются как синтетические обертки над нативными.

function handleSubmit(e) {
  e.preventDefault();
  // Логика обработки
}

Метод вызывается внутри обработчика события. Для остановки всплытия события вверх по DOM-дереву дополнительно применяется stopPropagation().

function handleClick(e) {
  e.stopPropagation();
  // Действие
}

Эти методы работают со всеми синтетическими событиями React (onClick, onSubmit и др.).

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Альтернативный текст (атрибут alt) описывает содержание изображения для случаев, когда оно не загрузилось или недоступно. Также он используется скринридерами для озвучивания содержимого, что важно для доступности.

<img src="logo.png" alt="Логотип компании">

Если изображение декоративное, атрибут alt можно оставить пустым, чтобы скринридеры его игнорировали.

<img src="divider.png" alt="">

Корректный alt улучшает SEO, так как поисковые системы учитывают его при анализе контента.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Приведение типов — это преобразование значения одного типа в другой, явное или неявное. В TypeScript оно часто выполняется с помощью синтаксиса as или угловых скобок для совместимости типов.

✈️ Frontend собеседования

Оператор break прерывает выполнение текущего цикла for, while, do...while или блока switch, передавая управление коду, следующему после него.

for (let i = 0; i < 5; i++) {
  if (i === 3) break; // Выход из цикла при i = 3
  console.log(i);
}

В switch break предотвращает выполнение последующих case после совпадения. Без него выполнение продолжится до следующего break или конца блока.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

will-change — это CSS-свойство, которое указывает браузеру, какие свойства элемента могут измениться в будущем, позволяя заранее оптимизировать рендеринг.

.element {
  will-change: transform, opacity;
}

Использовать его стоит только для элементов, анимация или изменение которых вызывает заметные лаги. Чрезмерное применение will-change увеличивает потребление памяти, поэтому его следует включать непосредственно перед анимацией и отключать после.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Server-Side Rendering (SSR) — это процесс рендеринга React-приложения на сервере с отправкой готового HTML клиенту. Основные преимущества: улучшенная SEO-индексация, быстрая первоначальная загрузка страницы и лучшая производительность на слабых устройствах.

✈️ Frontend собеседования

В Git хэш (SHA-1, а теперь SHA-256) — это уникальный 40-символьный идентификатор, вычисляемый на основе содержимого коммита, дерева файлов или самого объекта.

git log --pretty=format:'%H' -n 1
# Выводит хэш последнего коммита

Хэш гарантирует целостность данных: любое изменение содержимого приводит к совершенно другому хэшу. Git использует эти хэши для ссылок между коммитами, создания веток и тегов.

Переход на SHA-256 улучшил криптостойкость, хотя SHA-1 всё ещё поддерживается для совместимости.

✈️ Frontend собеседования

Начальное значение поля ввода задаётся с помощью атрибута value для <input> и <textarea>, либо размещением текста между тегами для <textarea>.

<input type="text" value="Значение по умолчанию">
<textarea>Текст по умолчанию</textarea>

Для <select> начальное значение определяется атрибутом selected у <option>.

<select>
  <option value="1">Первый</option>
  <option value="2" selected>Второй</option>
</select>

В React/Vue начальное значение обычно управляется через состояние компонента.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Числа с плавающей точкой (float/double) — это формат представления дробных чисел в IEEE 754, где число хранится в виде мантиссы и порядка. В JavaScript все числа — 64-битные float, что может приводить к неточностям в арифметике, поэтому для точных вычислений используют методы округления или целочисленные операции.

✈️ Frontend собеседования

Глобальная регистрация делает компонент доступным во всём приложении через Vue.component().

Vue.component('MyComponent', { /* options */ });

Локальная регистрация ограничивает область видимости компонента текущим экземпляром Vue через свойство components.

new Vue({  
  components: {  
    MyComponent: { /* options */ }  
  }  
});

Глобальная регистрация увеличивает размер сборки, так как компонент включается даже если не используется. Локальная — предпочтительна для оптимизации.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для изменения курсора при наведении используется CSS-свойство cursor с указанием типа курсора.

.element:hover {
  cursor: pointer; /* Рука с пальцем */
}

Доступны стандартные варианты: default, pointer, text, move, not-allowed. Для кастомных изображений используется синтаксис:

.custom-cursor {
  cursor: url('cursor.png'), auto; /* Своё изображение + fallback */
}

Размер кастомного курсора ограничен 128×128px в большинстве браузеров.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для просмотра истории коммитов используется команда git log, которая отображает хронологию с хэшами, авторами и сообщениями. Дополнительные флаги типа --oneline, --graph или -p позволяют настроить формат вывода и детализацию.

✈️ Frontend собеседования

JSX-трансформация — это процесс преобразования JSX-синтаксиса в вызовы React.createElement(). На этапе сборки Babel или другие транспиляторы конвертируют JSX в обычный JavaScript.

// До трансформации
const element = <div className="test">Hello</div>;

// После трансформации
const element = React.createElement('div', { className: 'test' }, 'Hello');

Трансформация позволяет писать декларативный HTML-подобный код, который затем превращается в оптимизированные вызовы React API. Современные сборщики автоматически обрабатывают JSX через плагины типа @babel/plugin-transform-react-jsx.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Атрибут required указывает, что поле формы обязательно для заполнения перед отправкой. Добавляется к элементам <input>, <select> и <textarea> без значения.

<input type="text" required>
<select required>
  <option value="">Выберите</option>
</select>
<textarea required></textarea>

Браузер автоматически проверяет заполнение таких полей при отправке формы. Для кастомной валидации можно использовать JavaScript и CSS-псевдоклассы типа :invalid. Невалидные поля с required блокируют отправку формы.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Mapped types — это шаблонные типы, которые трансформируют свойства существующего типа, создавая новую модифицированную версию. Они используются для массового изменения модификаторов (readonly, optional) или преобразования типов полей без дублирования кода.

✈️ Frontend собеседования