Условие
В App.js соберите мини-интерфейс из трёх функциональных компонентов. Компонент - это функция с заглавной буквы, которая возвращает JSX. Элемент - отдельный тег внутри JSX (<h1>, <input>). React и ReactDOM уже подключены в предпросмотре - пишите только JSX. Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- Сделайте компонент шапки с заголовком «Моя первая React-страница».
- Сделайте поле поиска с подсказкой «Найти курс...» и своими inline-стилями.
- Сделайте кнопку входа/выхода: текст зависит от того, вошёл ли пользователь.
- Соберите все три компонента в App и сверьте с вкладкой «Результат».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Имя с маленькой буквы - HTML-тег, с большой - React-компонент. Какие понятия нужны - в «Дополнительной информации» и во вкладке «Результат».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Заголовок, поле поиска и кнопка входа/выхода
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
App.js- единственный файл в редакторе; здесь пишете решение.function/const/return- объявление компонента и возврат JSX.className- CSS-класс в JSX (вместо HTMLclass).style={{ ... }}- inline-стили объектом (camelCase:borderRadius).<h1>,<input>,<button>- теги в компонентах TopBar, QueryInput, LoginButton.placeholder,type="text"- атрибуты поля поиска.- Проп
isSignedIn- данные от App к LoginButton. - Тернарный оператор
? :- текст кнопки «Выйти» / «Войти». body,#root,.app- стартовые CSS превью (фон, отступы, flex).
Пишите код только в
App.js.
HTML-оболочка превью собирается автоматически. Ниже - важные понятия по теме задачи.
Стили превью (CSS)
Эти правила уже подключены к предпросмотру (отдельный файл CSS в редакторе не открывается).
-
body-font-family: system-ui, sans-serif,margin: 24px,background: #f0f9ff(светло-голубой фон страницы). -
#rootи.app-display: flex,flex-direction: column,align-items: flex-start,gap: 4px- колонка элементов сверху вниз с маленьким промежутком.
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень; язык русский.<meta charset="UTF-8" />- кодировка.<title>- «React Preview».<div id="root">- куда React монтирует приложение.ReactDOM.createRoot(...).render(<App />)- запуск вашегоApp.
Элемент vs компонент
<h1> в JSX - React-элемент (структурная часть).
TopBar - компонент (переиспользуемый блок с логикой).
Элементы в React неизменяемые: чтобы обновить интерфейс, React перерисовывает дерево заново.
Inline-стили
Сначала создайте объект со стилями (width, padding - в camelCase), затем передайте его в атрибут
style через фигурные скобки.
Пример из решения: у QueryInput - width, margin, border, padding, borderRadius; у LoginButton - background, color, border, padding, borderRadius, cursor.
Условный рендеринг
isSignedIn ? 'Выйти' : 'Войти'
- тернарный оператор внутри JSX. Так же позже показывают спиннер загрузки или блок с ошибкой.
Коротко: TopBar + QueryInput + LoginButton → собрать в App → проп isSignedIn и тернарный текст → «Проверить».