React Frontend Developer

Q: Как задать элементу ширину и высоту во весь экран?

Для задания размеров во весь экран используются единицы vw и vh.100vw соответствует ширине viewport, а 100vh — его высоте.Также можно использовать абсолютное позиционирование.Выбор способа зависит от контекста верстки.

Question 1

Что делают метатеги , , ?

Accepted Answer

Метатеги — это элементы HTML, которые предоставляют информацию о странице браузеру и поисковым системам. Например, задает кодировку символов, что важно для корректного отображения текста. используется для управления отображением страницы на мобильных устройствах, позволяя адаптировать содержимое под размеры экрана. Метатеги, такие как , могут задавать параметры, связанные с заголовками HTTP, что также способствует оптимизации страницы.

Question 2

Что такое HTML Imports и почему они были отклонены стандартом? Какие современные альтернативы существуют для организации модулей?

Accepted Answer

HTML Imports — это экспериментальная технология, которая позволяла загружать и включать HTML-файлы в другие документы с помощью тега <link>. Она была отклонена из-за слабой поддержки и наличия альтернативных стандартов, таких как JavaScript модули и Web Components. Современные альтернативы включают ES-модули (import/export) и технологии, основанные на шаблонах и компонентах, такие как React и Web Components.

Question 3

Для чего используется !important?

Accepted Answer

!important — это специальное правило в CSS, которое позволяет переопределить любые другие стили, даже если они имеют более высокую специфичность. При добавлении !important к свойству, это свойство становится приоритетным, и любые другие правила для этого элемента игнорируются. Однако использование !important не рекомендуется, так как это может усложнить поддержку кода и привести к путанице в определении стилей.

Question 4

Как использовать @supports для проверки поддержки браузером определенных CSS-свойств?

Accepted Answer

Директива @supports позволяет проверить, поддерживает ли браузер конкретное CSS-свойство, и применить стили только в случае успешной проверки. Это полезно для использования новых возможностей, сохраняя при этом совместимость.

Question 5

Как определить, что элемент виден во viewport?

Accepted Answer

Используйте IntersectionObserver для эффективного отслеживания видимости. Альтернативно — сравнение координат элемента с размерами viewport.

Question 6

Как задать элементу ширину и высоту во весь экран?

Accepted Answer

Для задания размеров во весь экран используются единицы vw и vh.
100vw соответствует ширине viewport, а 100vh — его высоте.
Также можно использовать абсолютное позиционирование.
Выбор способа зависит от контекста верстки.

Question 7

Что такое React Portals и зачем они нужны?

Accepted Answer

React Portals позволяют рендерить компонент в другой части DOM, не меняя структуру React-компонентов. Это часто используется для модальных окон, тултипов и выпадающих меню. Такой подход помогает избежать проблем с z-index и переполнением контейнеров. Логика компонента при этом остается в том же месте.

Question 8

Какие проблемы у default export?

Accepted Answer

Default export создаёт одну "главную" сущность для модуля, что может привести к проблемам с переименованием при импорте и ухудшает автоматический рефакторинг. Импортирующая сторона может дать любое имя, что снижает ясность и согласованность кода. Кроме того, это усложняет реэкспорт и анализ зависимостей инструментами.

Question 9

Что делает getBoundingClientRect?

Accepted Answer

Метод getBoundingClientRect возвращает объект DOMRect с координатами элемента относительно окна браузера (viewport). Он содержит свойства top, right, bottom, left, width и height. Это полезно для определения видимости элемента, анимаций или позиционирования всплывающих подсказок.

Question 10

Зачем использовать import type в TypeScript и чем он отличается от обычного import?

Accepted Answer

import type используется для импорта только типов, а не значений. В отличие от обычного import, он не генерирует код в JavaScript на этапе компиляции, что уменьшает размер бандла и улучшает производительность. Это особенно полезно при использовании с инструментами сборки, такими как Webpack, для оптимизации tree shaking.

Вопросы React Frontend Developer