Условие
В App.js уже есть два простых компонента: PageTitle и AuthButton. Подключите StrictMode - он не рисует ничего на экране, а включает проверки для дочерних компонентов в режиме разработки. Интерфейс должен остаться прежним.
Что нужно сделать
- Подключите строгий режим React из объекта библиотеки.
- Оберните то, что возвращает App, в этот режим.
- Убедитесь, что на экране по-прежнему заголовок «Панель обучения» и кнопка «Выйти».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Строгий режим похож на «use strict» для дерева React: помогает ловить проблемы в консоли и не меняет внешний вид. Подробности - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Тот же UI: заголовок и кнопка
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
App.js- файл решения; компоненты PageTitle и AuthButton уже есть.React- глобальный объект библиотеки в предпросмотре.const { StrictMode } = React- деструктуризация: достать StrictMode одной строкой.<StrictMode>...</StrictMode>- обёртка вокруг JSX вreturn.function,const,return,className- уже в стартовом коде.<h1>,<button>,<div className="app">- разметка PageTitle, AuthButton и App.body,#root,.app- CSS превью (фон, margin, flex, gap).
Пишите код только в
App.js.
Ниже - важные понятия по теме задачи.
Стили превью (CSS)
-
body-font-family: system-ui, sans-serif,margin: 24px,background: #f0f9ff. -
#root,.app-display: flex,flex-direction: column,align-items: flex-start,gap: 8px.
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>,<html lang="ru">,<meta charset="UTF-8" />.<title>- «React StrictMode Preview».<div id="root">+ReactDOM.createRoot/render(<App />).
Деструктуризация
Вместо React.StrictMode удобнее один раз написать
const { StrictMode } = React;
и дальше использовать короткое имя <StrictMode>.
Что делает StrictMode
Включает дополнительные проверки для потомков: устаревшие API, небезопасные конструкции, побочные эффекты. Предупреждения видны в консоли браузера только при разработке.
Локальная обёртка
Позже StrictMode можно будет ставить и вокруг отдельного компонента, но в этой задаче достаточно одной обёртки вокруг всего
содержимого return:
<StrictMode><div className="app">...</div></StrictMode>.
Коротко:
const { StrictMode } = React → обернуть return → UI без изменений → «Проверить».