React Frontend Developer

Question 1

В каких случаях могут рассматриваться Angular или Vue и чем они принципиально отличаются от React

Accepted Answer

Angular и Vue обычно рассматриваются, когда нужен более «из коробки» фреймворк с готовыми соглашениями. React — это библиотека, а не полноценный фреймворк, поэтому он требует самостоятельного выбора архитектуры и инструментов. Angular подходит для крупных корпоративных проектов с жесткими стандартами. Vue часто выбирают за более низкий порог входа и мягкую кривую обучения. Выбор зависит от масштаба проекта, команды и требований к архитектуре.

Question 2

Как инжектировать HttpClient в Angular-сервис?

Accepted Answer

HttpClient инжектируется через конструктор сервиса с помощью механизма Dependency Injection. Для этого нужно импортировать HttpClientModule в AppModule или в standalone компоненте. Затем в сервисе объявить параметр конструктора с типом HttpClient, и Angular автоматически предоставит экземпляр.

Question 3

Как отправить GET-запрос на бэкенд через HttpClient?

Accepted Answer

Для отправки GET-запроса через HttpClient нужно импортировать HttpClientModule в AppModule, затем внедрить HttpClient в сервис или компонент. Вызовите метод http.get(url), который возвращает Observable. Подпишитесь на него с помощью subscribe() для получения данных или используйте async pipe в шаблоне.

Question 4

Как связать BehaviorSubject с HTTP-запросом через switchMap?

Accepted Answer

BehaviorSubject хранит текущее значение и эмитирует его подписчикам. Оператор switchMap принимает значение из BehaviorSubject, выполняет HTTP-запрос и автоматически отменяет предыдущий запрос, если приходит новое значение. Это позволяет реализовать поиск с автодополнением или обновление данных при изменении параметров.

Question 5

Как создать и зарегистрировать компонент в Angular?

Accepted Answer

Компонент в Angular создается с помощью декоратора @Component, который определяет селектор, шаблон и стили. Затем компонент регистрируется в модуле (NgModule) в массиве declarations. После этого он может использоваться в шаблонах других компонентов этого модуля.

Question 6

Что такое OutputEmitter (EventEmitter) в Angular и как он используется?

Accepted Answer

OutputEmitter в Angular — это декоратор, который позволяет дочернему компоненту отправлять события родительскому. Он использует класс EventEmitter для создания пользовательских событий. Родительский компонент подписывается на эти события через шаблон, используя привязку в круглых скобках. Это основной способ передачи данных от дочернего компонента к родительскому.

Question 7

Как создать сервис в Angular и для чего он используется?

Accepted Answer

Сервис в Angular — это класс с декоратором @Injectable, который используется для вынесения общей логики (работа с API, хранение состояния, вычисления) из компонентов. Он регистрируется в провайдерах модуля или компонента и внедряется через конструктор. Сервисы делают код переиспользуемым, тестируемым и следуют принципу единственной ответственности.

Question 8

Что такое FormControl в Angular?

Accepted Answer

FormControl — это класс в Angular, который отслеживает значение и состояние валидации одного поля ввода. Он используется в реактивных формах для управления данными и проверки. Создается с начальным значением и массивом валидаторов. Позволяет подписываться на изменения значения или статуса.

Question 9

Что такое valueChanges в Angular и как с ним работать?

Accepted Answer

valueChanges — это свойство объекта FormControl, FormGroup или FormArray в Angular, которое возвращает Observable, испускающий текущее значение элемента управления при каждом его изменении. Подписка на этот Observable позволяет реагировать на изменения в реальном времени, например, для валидации, фильтрации или логирования. Для работы с ним нужно импортировать необходимые модули из @angular/forms и использовать метод subscribe().

Question 10

Как организовать структуру Angular-приложения для реализации поиска с отправкой запросов на бэкенд?

Accepted Answer

Для реализации поиска в Angular создается сервис с HttpClient для отправки запросов. Компонент использует Reactive Forms с FormControl и подписывается на изменения значения через valueChanges с оператором debounceTime для уменьшения количества запросов. Результаты отображаются в шаблоне через async pipe.

Вопросы React Frontend Developer