React Frontend Developer

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

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

Question 1

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

Accepted Answer

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

Question 2

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

Accepted Answer

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

Question 3

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

Accepted Answer

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

Question 4

Какие отличия поведения WebView от браузера могут влиять на обработку событий (например resize)?

Accepted Answer

WebView — это компонент для отображения веб-контента внутри нативного приложения, а браузер — самостоятельное приложение. Основное отличие в обработке событий, например resize, заключается в том, что WebView может не генерировать стандартные события браузера при изменении размера, если это изменение инициировано нативным кодом. В браузере событие resize срабатывает при изменении размеров окна, а в WebView это зависит от реализации платформы и может требовать ручного вызова JavaScript. Также WebView может иметь ограничения по таймерам и анимации при свёрнутом состоянии, что влияет на отзывчивость интерфейса.

Question 5

Как организовать интеграцию React-приложения с нативным приложением через WebView и какие есть ограничения по сравнению с браузером?

Accepted Answer

Интеграция React-приложения с нативным кодом в WebView осуществляется через специальный "мост" (bridge). Нативная часть предоставляет интерфейс, который можно вызвать из JavaScript. В React вы используете этот интерфейс для отправки данных или вызова нативных функций. Обратно, нативный код может выполнять JavaScript в WebView, чтобы передать данные в React-компонент. Основные ограничения: производительность ниже, чем у нативных экранов, доступ к некоторым API устройства может быть ограничен или требовать дополнительной настройки через мост, а также возможны задержки в коммуникации между слоями.

Question 6

Как устроен процесс разработки в команде с использованием Kanban и code review?

Accepted Answer

Kanban — это методология, которая визуализирует рабочий процесс на доске с колонками (например, "To Do", "In Progress", "Review", "Done"). Каждая задача представлена карточкой, которая перемещается по колонкам. Code review — это процесс проверки кода коллегами перед его слиянием в основную ветку. В Kanban карточка задачи переходит в колонку "Review" после завершения разработки, где другой разработчик проверяет код на соответствие стандартам, отсутствие ошибок и читаемость. После успешного ревью карточка перемещается в "Done". Этот процесс обеспечивает непрерывный поток работы и повышает качество кода.

Question 7

Что такое code review и на что обращают внимание?

Accepted Answer

Code review — это процесс проверки исходного кода другими разработчиками перед его слиянием в основную ветку. Основная цель — улучшить качество кода, найти ошибки, обеспечить соответствие стандартам и обмен знаниями. Ревьюверы обращают внимание на корректность логики, читаемость, производительность, безопасность и покрытие тестами. Это важная практика для командной работы и предотвращения багов в продакшене.

Question 8

Что делает getBoundingClientRect?

Accepted Answer

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

Question 9

Что такое design review?

Accepted Answer

Design review — это процесс анализа дизайна продукта (UI/UX, архитектуры) командой до начала разработки. Он помогает выявить ошибки, улучшить пользовательский опыт и согласовать решения. Обычно проводится с участием дизайнеров, разработчиков и заинтересованных сторон. Цель — убедиться, что дизайн соответствует требованиям и технически реализуем.

Вопросы React Frontend Developer