JSX транслируется в вызовы React.createElement(). Каждый JSX-элемент преобразуется в функцию, где:

<div className="test">Hello</div>
// Становится:
React.createElement('div', { className: 'test' }, 'Hello');

Первый аргумент — тип элемента, второй — пропсы, остальные — дети. Компоненты передаются по имени <Component /> → React.createElement(Component). Трансляция происходит через Babel или TypeScript до запуска кода.

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

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

Операция push в Git отправляет локальные коммиты в удалённый репозиторий.

git push <remote> <branch>



- <remote> — имя удалённого репозитория (обычно origin)
- <branch> — ветка, которую нужно отправить

git push -u origin main

Флаг -u связывает локальную ветку с удалённой для будущих push/pull без указания параметров. При конфликтах требуется предварительный pull.

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

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

HTML5 ввёл семантические теги для улучшения структуры документа: <header>, <footer>, <article>, <section>, <nav>, <aside>, а также медиа-теги <video>, <audio> и графический <canvas>. Эти элементы заменили универсальные <div> в ключевых местах разметки, упрощая понимание кода и SEO-оптимизацию.

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

Цикл for выполняет блок кода многократно, пока условие истинно. Состоит из трёх частей:

for (инициализация; условие; шаг) {
  // тело цикла
}

- Инициализация — задаёт начальное значение (например, let i = 0)
- Условие — проверяется перед каждой итерацией (i < 10)
- Шаг — выполняется после каждой итерации (i++)

Используется для перебора массивов, строк или повторения операций. Альтернативы — for...of (для итерируемых объектов) и forEach (для массивов).

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

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

CSS-спрайты — это метод объединения нескольких изображений в один файл для уменьшения количества HTTP-запросов. Часто применяется для иконок, кнопок и других мелких элементов.

Как использовать:
1. Создать спрайт, разместив все изображения в одном файле (например, sprite.png).

2. Задать элементу фоновое изображение и позиционировать его с помощью background-position:

.icon {
  background-image: url('sprite.png');
  width: 32px;
  height: 32px;
}  

.icon-home {
  background-position: 0 0;
}  

.icon-settings {
  background-position: -32px 0;
}

Преимущества: ускорение загрузки страницы, меньше запросов к серверу. Недостаток — сложность обновления при изменении спрайта.

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

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

PropTypes — это механизм проверки типов пропсов в React, который помогает выявлять ошибки на этапе разработки. Для использования необходимо импортировать PropTypes из пакета 'prop-types' и определить ожидаемые типы и обязательность пропсов в компоненте.

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

Комментарии в HTML позволяют оставлять пояснения в коде, не влияя на отображение страницы.

Синтаксис:

<!-- Это комментарий, он не отображается в браузере -->
<p>Этот текст будет виден.</p>

Комментарии могут быть однострочными или многострочными. Они полезны для заметок, временного отключения кода или разметки структуры.

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

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

▶️Для визуального скрытия элемента, оставляя его в DOM, используется свойство visibility.

.hidden-element {  
  visibility: hidden;  
}

Элемент остается на странице, занимает место, но становится невидимым. В отличие от display: none, не удаляется из потока документа.

Альтернативный вариант — прозрачность:

.transparent-element {  
  opacity: 0;  
}

Сохраняет кликабельность и взаимодействие, если не отключено pointer-events.

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

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

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

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

😎Для восстановления используйте git reflog для поиска последних действий и git checkout или git reset для возврата файлов.

git reflog  # Поиск последнего коммита перед удалением
git checkout HEAD@{n} -- path/to/file  # Восстановление файла из истории

Если файлы были проиндексированы, но не закоммичены:

git fsck --lost-found  # Поиск dangling-объектов

Для восстановления после git rm используйте git reset HEAD file перед git checkout -- file.

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

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

Свойство scroll-behavior в CSS позволяет управлять поведением прокрутки на странице. При установке значения smooth прокрутка становится плавной, а не мгновенной. Это особенно полезно для навигации по странице с помощью якорей или JavaScript.

html {
  scroll-behavior: smooth;
}

При таком стиле переход по ссылке с якорем (например, <a href="#section">) будет происходить с плавной прокруткой до целевого элемента. Также это работает с методами JavaScript, такими как scrollTo или scrollIntoView.

document.getElementById('section').scrollIntoView({ behavior: 'smooth' });

Значение по умолчанию — auto, при котором прокрутка происходит мгновенно. Свойство поддерживается в современных браузерах, но для старых версий может потребоваться полифил.

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

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

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

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

Методы Vue — это функции, которые определяются в объекте methods компонента. Они используются для обработки событий, выполнения логики или изменения состояния компонента. Методы можно вызывать из шаблона через директивы (например, v-on) или из других методов.

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

В шаблоне метод вызывается через v-on:

<button @click="increment">Увеличить счетчик</button>

Методы реагируют на изменения данных и обновляют DOM через реактивную систему Vue. Они не кэшируются, в отличие от вычисляемых свойств, и выполняются каждый раз при вызове.

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

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

Тернарный оператор позволяет компактно записывать условные выражения. Синтаксис: условие ? значение_если_истина : значение_если_ложь.

const isLoggedIn = true;
const message = isLoggedIn ? 'Добро пожаловать' : 'Пожалуйста, войдите';

В этом примере, если isLoggedIn равно true, переменной message присваивается 'Добро пожаловать', иначе — 'Пожалуйста, войдите'.

Тернарный оператор удобен для простых условий, но для сложной логики лучше использовать if-else, чтобы сохранить читаемость кода.

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

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

Сообщение к коммиту помогает понять, какие изменения были внесены и зачем. Это упрощает навигацию по истории проекта, поиск ошибок и совместную работу.

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

Селектор потомков в CSS выбирает элементы, которые находятся внутри другого элемента, независимо от уровня вложенности. Синтаксис: родитель потомок.

div p {
  color: blue;
}

В этом примере все элементы <p>, находящиеся внутри <div>, будут стилизованы синим цветом, даже если они вложены в другие элементы.

Селектор потомков применяется ко всем подходящим элементам, независимо от их глубины в структуре DOM. Это отличает его от дочернего селектора (>), который выбирает только прямых потомков.

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

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

Для обработки событий формы в React используется состояние (state) и обработчики событий. События, такие как onChange и onSubmit, позволяют отслеживать ввод данных и отправку формы.

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Отправлено:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">Отправить</button>
    </form>
  );
}

onChange обновляет состояние при каждом изменении ввода, а onSubmit обрабатывает отправку формы, предотвращая стандартное поведение браузера с помощью e.preventDefault().

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

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

⏩ Shadow DOM — это технология, которая позволяет инкапсулировать HTML, CSS и JavaScript внутри компонента, изолируя их от основного документа. Это предотвращает конфликты стилей и скриптов.

<div id="host"></div>
<noscript>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `<p>Этот текст изолирован в Shadow DOM</p>`;
</noscript>

В этом примере содержимое внутри shadowRoot изолировано от глобального DOM. Shadow DOM используется в веб-компонентах для создания независимых и переиспользуемых элементов.

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

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

Интерфейсы и типы в TypeScript используются для описания структуры объектов, но интерфейсы поддерживают расширение через extends, а типы — через объединение (|) и пересечение (&). Интерфейсы чаще применяют для описания объектов, а типы — для более сложных конструкций, включая примитивы и объединения.

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

➡️ Слоты позволяют передавать контент в компонент, делая его более гибким и переиспользуемым. Они используются для вставки HTML или других компонентов в определенные места шаблона.

<!-- Компонент с слотом -->
<template>
  <div class="container">
    <slot></slot>
  </div>
</template>

<!-- Использование компонента -->
<MyComponent>
  <p>Этот контент попадет в слот</p>
</MyComponent>

Слоты могут быть именованными, что позволяет передавать контент в разные части компонента. По умолчанию используется основной слот (<slot>), который принимает весь переданный контент.

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

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

👉 Цикл for...of используется для итерации по элементам итерируемых объектов, таких как массивы, строки, Map, Set и другие. В отличие от for...in, который перебирает ключи, for...of работает непосредственно со значениями.

Синтаксис:

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // Выводит 1, 2, 3
}

Цикл for...of упрощает работу с коллекциями, исключая необходимость вручную управлять индексами. Он поддерживает break и continue для управления потоком выполнения. Подходит для работы с массивами и другими итерируемыми структурами, где важны значения элементов.

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

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