Тесты СинергияАртём Хелп
Артём Help онлайнПолучить расчёт
Бесплатно оценим сроки и стоимостьОтправить задание в Telegram
Разработка web-приложений на языке JavaScript.dor_БАК_25-233-Б

Разработка web-приложений на языке JavaScript.dor_БАК_25-233-Б — вариант 4

Просмотрите все вопросы и варианты бесплатно. Правильные ответы скрыты и открываются только после получения доступа.

11 вопросов Вариант 4 Доступ 7 дней
Содержание теста

Вопросы и варианты

Без отметок и подсказок к правильным ответам

Вопрос 1

Сопоставьте элемент React Router и его назначение:

  1. BrowserRouter
  2. Routes
  3. Route
  4. Link
  5. оборачивает всё приложение и управляет историей браузера (HTML5 History API)
  6. контейнер для набора маршрутов (v6), выбирает подходящий Route
  7. описывает соответствие пути компоненту через path и element
  8. ссылка для SPA-навигации (Single Page Application) без полной перезагрузки страницы
Вопрос 2

Расположите шаги инициализации проекта React + TypeScript с Vite в корректном порядке:

  1. npm create vite@latest my-app -- --template react-ts
  2. cd my-app
  3. npm install
  4. npm run dev
Вопрос 3

Библиотека для построения пользовательских интерфейсов (UI) — это ...<i> (укажите слово на английском языке)</i>

  1. React
  2. react
Вопрос 4

Назначение JSX (JavaScript XML) в React — это ...

  1. серверный рендеринг Next.js
  2. декларативное описание структуры компонентов; компилируется в React.createElement
  3. замена TypeScript
  4. описание конфигурации маршрутов
Вопрос 5

Актуальный подход к написанию компонентов в новом коде … — это функциональные компоненты с хуками (useState, useEffect и др.)<i> (укажите слово на английском языке)</i>

  1. React
  2. react
Вопрос 6

Ключевой принцип Redux в управлении состоянием — это ...

  1. использование двустороннего связывание как основы работы
  2. использование нескольких независимых хранилищ на компонент
  3. использование одного источника правды (единый store) и обновление через actions/reducers
  4. хранение состояния в SQL-таблицах (Structured Query Language)
Вопрос 7

Компонент для группировки маршрутов в React Router v6 — это ...

  1. switch
  2. routes
  3. routerGroup
  4. stack
Вопрос 8

Результат установки опции "jsx": "react-jsx" в tsconfig.json для React + TS (TypeScript) — это ...

  1. полное отключение JSX (JavaScript XML)
  2. включение нового автоматического JSX-трансформа (React 17+), не требующего явного import React
  3. замена TypeScript на JavaScript
  4. включение SSR (Server-Side Rendering) по умолчанию
Вопрос 9

По умолчанию файл index.html в проекте Vite (React + TS (TypeScript)) находится в ...

  1. корне проекта
  2. папке src
  3. папке public
  4. папке dist
Вопрос 10

Современный способ монтирования корневого компонента в React 18 — это ...

  1. ReactDOM.render
  2. hydrate
  3. createRoot
  4. mountComponent
Вопрос 11

Вы фронтенд-разработчик в команде, которая внедряет страницу профиля в SPA на React + TypeScript. Требования заказчика (см. ниже): • страница доступна по маршруту /users/:id (React Router v6); • данные профиля подтягиваются с GET /api/users/:id; • при смене :id происходит повторная загрузка; • предыдущий запрос корректно отменяется при размонтировании/смене :id; • для авторизации в заголовок уходит токен из localStorage; • без глобального состояния, только локальный useState; • корректная типизация ответа; • отображать «Загрузка…» во время запроса и имя пользователя после. Какой из фрагментов компонента реализует требования наилучшим образом?

  1. function Profile() {   const { id } = useParams();   const [user, setUser] = useState˂any˃(null);   useEffect(() =˃ {     fetch(`/api/users/${id}`, {       headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }     })       .then(r =˃ r.json())       .then(setUser);   }, []); // ← не реагирует на смену id, нет отмены запроса   if (!user) return ˂p˃Загрузка…˂/p˃;   return ˂h1˃{user.name}˂/h1˃; }
  2. type Profile = { id: number; name: string; email: string }; export default function ProfilePage() {   const { id } = useParams();   const [data, setData] = useState˂Profile | null˃(null);   const [loading, setLoading] = useState(false);   const [error, setError] = useState˂string | null˃(null);   useEffect(() =˃ {     const ctrl = new AbortController();     const token = localStorage.getItem('token');     setLoading(true);     setError(null);     setData(null);     fetch(`/api/users/${id}`, {       method: 'GET',       signal: ctrl.signal,       headers: { Authorization: `Bearer ${token ?? ''}` }     })       .then(r =˃ {         if (!r.ok) throw new Error(`HTTP ${r.status}`);         return r.json() as Promise˂Profile˃;       })       .then(setData)       .catch(e =˃ {         if (e.name !== 'AbortError') setError(e.message);       })       .finally(() =˃ setLoading(false));     return () =˃ ctrl.abort();   }, [id]);   if (loading) return ˂p˃Загрузка…˂/p˃;   if (error) return ˂p˃Ошибка: {error}˂/p˃;   if (!data) return null;   return ˂h1˃{data.name}˂/h1˃; }
  3. function Profile() {   const { id } = useParams();   const [user, setUser] = useState˂{ name: string } | null˃(null);   useLayoutEffect(() =˃ {     // Нет обработки токена, нет отмены, возможны гонки     fetch('/api/users/' + id)       .then(r =˃ r.json())       .then(setUser);   }, [/* пусто */]); // ← зависимостей нет   return user ? ˂h1˃{user.name}˂/h1˃ : ˂span/˃; }
  4. // Использует Redux store для хранения профиля — нарушает требование «без глобального состояния» function Profile() {   const { id } = useParams();   const dispatch = useAppDispatch();   const user = useAppSelector(s =˃ s.user.byId[id!]);   useEffect(() =˃ {     dispatch(fetchUser(id!));   }, [id]);   return user ? ˂h1˃{user.name}˂/h1˃ : ˂p˃Загрузка…˂/p˃; }