React Frontend Developer

Question 1

Как бы ты описал общий тип для разных вариантов пользователя?

Accepted Answer

Общий тип пользователя удобно описывать через discriminated union. Для этого вводится общее поле-дискриминатор. По нему TypeScript понимает, с каким вариантом типа работает код. Такой подход безопасен и хорошо масштабируется. Он часто используется в реальных проектах.

Question 2

Работал ли ты с React Native и в чем его отличия от React?

Accepted Answer

React Native и React используют один подход к построению UI, но рендерят его по-разному. В React UI отображается в DOM браузера, а в React Native — в нативные компоненты платформы. Логика и хуки похожи, но API и стилизация отличаются. React Native ближе к мобильной разработке, чем к вебу. Код нельзя просто взять и перенести без изменений.

Question 3

Что такое дискриминантные юнионы?

Accepted Answer

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

Question 4

Как работать с файловой системой, камерой и другими нативными возможностями в React Native?

Accepted Answer

React Native предоставляет API для работы с нативными возможностями через встроенные модули и сторонние библиотеки. Для доступа к файловой системе используется react-native-fs, для камеры — react-native-camera или expo-camera. Необходимо запрашивать разрешения через PermissionsAndroid или Permissions API. Эти модули позволяют выполнять операции, недоступные в вебе, сохраняя единую кодовую базу.

Question 5

Как собрать React Native приложение, настроить подписи и подготовить релиз?

Accepted Answer

Для сборки React Native приложения нужно настроить подписи: для Android — создать keystore и указать его в gradle.properties, для iOS — настроить сертификаты и provisioning profile в Xcode. Затем выполнить команды: для Android — cd android && ./gradlew bundleRelease, для iOS — npx react-native run-ios --configuration Release. После сборки можно загрузить билд в Google Play Console или App Store Connect.

Question 6

Какие основные отличия в стилизации между React Native (Web) и обычным веб-приложением?

Accepted Answer

В React Native Web стили задаются через объекты JavaScript с помощью StyleSheet.create, а не через CSS-файлы. Используются только свойства, поддерживаемые мобильными компонентами, например flexbox для раскладки. Нет поддержки CSS-селекторов, псевдоклассов или медиазапросов напрямую. Вместо классов применяются пропсы style, а адаптивность достигается через JS-логику или библиотеки.

Question 7

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

Accepted Answer

Используй discriminated union: каждое состояние — отдельный тип с общим литеральным полем-тегом. Затем через conditional types и keyof выведи тип геттера: если поле есть в варианте — возвращаем его тип, иначе never. Так TypeScript сам подставит правильный возвращаемый тип в зависимости от входного.

Вопросы React Frontend Developer