Тесты СинергияАртём Хелп
Артём Help онлайнПолучить расчёт
Бесплатно оценим сроки и стоимостьОтправить задание в Telegram
Шаблоны нового АС

Шаблоны нового АС — вариант 8

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

11 вопросов Вариант 8 Доступ 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) — это ... (укажите слово на английском языке)

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

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

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

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

  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˃;}.