IT-Свободный Программист

Всем привет!

Вы уже достаточно много изучили по курсу React Cinema, поэтому я предлагаю тебе проверить свои знания, а так же выполнить практические задания, для закрепление материала.
Если вы усомнились в своих знаниях, в комментарии этого поста я выложу все ответы на теоретические задания, но постарайтесь ответить на все вопросы самостоятельно.

Чуть ниже, в практической части, вы встретите сложное и очень сложное задание. Эти задания специально построены таким образом, что без желания выполнить их, у вас это на вряд-ли получится. Поэтому я искренне желаю вам удачи, но не забывайте, что если у вас возникнут трудности, вы всегда можете обратиться за помощью.

Теоретическая часть:

1. Что такое React?
2. Назовите основные преимущества React.
3. Что такое компонент в React, и зачем он нужен?
4. Объясните, как данные передаются между компонентами.
5. Что такое Virtual DOM, и зачем он нужен в React?
6. Почему React использует Virtual DOM для оптимизации?
7. Когда React решает, что нужно обновить компонент?
8. Что такое хук useState, и для чего он нужен?
9. Объясните, как работает хук useEffect.

Практическая часть:

1. Создайте компонент, который отслеживает клики по кнопке и выводит количество кликов. Каждое нажатие на кнопку должно обновлять только компонент кнопки!

2. Реализуйте компонент, который меняет цвет текста при каждом клике на кнопку. Используйте хук useState.

3. Напишите компонент, который загружает данные пользователей из API (например, https://jsonplaceholder.typicode.com/users) и отображает их в виде списка на экране.

Сложное практическое задание:

Задание по практической части №3, необходимо доделать.

1) При загрузке страницы выполните запрос через fetch в useEffect и сохраните данные в состояние с помощью useState.

2) Добавьте кнопку "Обновить данные", которая повторно вызывает API и обновляет список.

3) Реализуйте обработку ошибок, если запрос завершится с ошибкой, отобразите сообщение "Не удалось загрузить данные".

Подсказка к 1 заданию:

Внутри useEffect напишите асинхронную функцию, которая выполняет запрос через fetch. Это поможет избежать проблемы с передачей пустых данных в состояние до завершения запроса. Не забудьте использовать await!

Подсказка к 2 заданию:

Создайте функцию, которая вызывает тот же fetch запрос, что и в useEffect. Добавьте кнопку в JSX, которая вызовет эту функцию благодаря onClick()

Подсказка к 3 заданию:

Для обработки ошибок используйте блок try...catch или проверьте response.ok перед преобразованием данных

Очень сложное практическое задание:

Дополнение к сложному заданию.
Необходимо добавить тег ввода данных (input) и привязать данные внутри input к хуку useEffect.
При вводе в строку input текста, данные для запроса к API будут фильтроваться по имени.

🫡1

176 viewsedited 17:59