This commit is contained in:
Vladislav Moiseev 2023-04-04 09:11:23 +04:00
parent b2fa8d2552
commit 6258b3295f
3 changed files with 67 additions and 1 deletions

View File

@ -25,7 +25,7 @@
Лабораторные работы на выбор: Лабораторные работы на выбор:
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md) * [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md) * [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md) * [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md) * [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)

66
lwF2/README.md Normal file
View File

@ -0,0 +1,66 @@
# Лабораторная работа №F2 - Получение данных через API (Fetch)
## Цель работы
Освоить получение данных через fetch API и отображение данных на клиенте.
## Ход выполнения работы
1. Найти документацию по интеграции с API Github.
2. Изучить fetch API и Promise в Javascript.
3. Создать приложение React с шаблоном TypeScript.
4. Описать интерфейс репозитория Github и состояние компонента со списком репозиториев.
5. Реализовать метод получения данных о репозиториях пользователя и сохранение их в состоянии.
6. Релизовать отображение списка репозиториев.
## Документация API Github
Описание ресурсоа API Github можно найти здесь: <https://docs.github.com/en/rest>.
Пример данных со списком репозиториев пользователя _vladdy-moses_: <https://api.github.com/users/vladdy-moses/repos>.
В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх.
## Метод получения данных
В качестве базы будет использоваться приложение из л/р №F1.
Пусть в `App.tsx` будут выводиться карточки со списком репозиториев.
Для того, чтобы это сделать, надо:
1. Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github.
2. Создать асинхронный метод по получению данных от API при помощи fetch API.
3. Добавить вывод от API в `console.log` и вызвать метод, чтобы убедиться, что он работает.
Получение данных надо реализовать при помощи Fetch API.
Информацию можно получить здесь: <https://developer.mozilla.org/ru/docs/Web/API/Fetch_API>.
Пример функции:
```tsx
let getData = () => {
fetch(`https://api.github.com/users/vladdy-moses/repos`)
.then(res => res.json())
.then((res: GithubRepo[]) => {
console.log(res);
})
};
```
## Добавление состояния и вывод данных на экран
Проведите самостоятельно.
В качестве состояния можете использовать массив элементов с интерфейсом `GithubRepo`.
В работе №F1 состоянием счётчика было "текущее количество".
В этой же работе состоянием компонента "приложение" будет "массив репозиториев, полученный через API".
Должно получиться что-то наподобие этого:
![](example.png)
## Защита лабораторной работы
Как и с л/р №F1, её работу необходимо продемонстрировать на лабораторном занятии.

BIN
lwF2/example.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB