Для решения каждой задачи надо написать компонент на React.js. Писать легче всего в проекте, созданном с помощью create-react-app. Писать компонент надо в функциональном стиле с использованием хуков.
Компонент каждую секундую пишет новое число Фибоначчи вдобавок к уже отображённым. Так, в первую секунду он напишет: 0
Потом: 0, 1
Потом: 0, 1, 1
Потом: 0, 1, 1, 2
Потом: 0, 1, 1, 2, 3
Потом: 0, 1, 1, 2, 3, 5
Потом: 0, 1, 1, 2, 3, 5, 8
Компоненту в пропсах передаётся строка для отображения и задержка в секундах:
<Alert text="Тревога, волк украл зайчат!" delay={5} />Будучи отображённым на экране, компонент показывает сообщение, а потом скрывает его через указанное количество секунд.
Компоненту в пропсы передали строку:
<Component text="!тевирП" />Компонент отрисовывает строку и кнопку:
При нажатии на кнопку строка отображается в обратном порядке.
Внимание! В переданной строке могут быть символы юникода, эмодзи.
Компонент просто отображает светофор. Время переключения на усмотрение разработчика. Вёрстка не обязательна, можно отобразить цветные лампы каким-нибудь символом:
Компонент отображает
- ползунок с текущим значением инкремента,
- кнопку инкремента со знаком +,
- текущее значение счётчика.
При нажатии на кнопку к текущему значению счётчика добавляется столько, сколько указано ползунком:
Компонент предназначен для отображения дополнительной информации. Ему передаётся на вход некий текст и резюме этого текста.
<Details shortText="Лицензионное соглашение" text="Настоящее соглашение дает вам нижеследующие права..." />В изначальном состоянии он показывает краткий текст и ссылку "подробнее".
Лицензионное соглашение подробнее
При нажатии на ссылку компонент отображает краткий и полный текст, а ссылка превращается в "скрыть".
Лицензионное соглашение Настоящее соглашение дает вам нижеследующие права... скрыть
Компонент содержит текстовое поле и кнопку "получить":
При нажатии на кнопку происходит обращение к серверу по адресу https://jsonplaceholder.typicode.com/todos/:id,
где :id — то, что ввели в текстовое поле.
От сервера приходит:
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}При получении ответа сервера нужно отобразить поле title.
Написать компонент, рисующий панель ввода PIN. PIN 4-значный, правильный код 9999. При нажатии кнопок в поле ввода появляются соответствующие цифры. Количество цифр в поле 4, они перезаписываются циклически (было 1234, нажали 5, отображается 2345). Если ввели правильный PIN, показывается сообщение.
Калькулятор перевода в другие системы счисления (2, 8, 16). Результат меняется при изменении полей.
Приложение содержит поле ввода, кнопку "+", выбор режима фильтрации (изначально показываются все числа) и список чисел.
При нажатии "+" в список добавляется число из поля ввода, если оно там есть.
При изменении режима фильтрации список обновляется в соответствии с выбранным режимом (все, чётные, нечетные).
При добавлении числа список также должен обновляться в соответствии с выбранным режимом фильтрации.
