diff --git a/README.md b/README.md index 23f52e7..a5d23a5 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Лабораторные работы на выбор: * [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md) -* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md) +* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md) * [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md) * [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md) diff --git a/lwF2/README.md b/lwF2/README.md new file mode 100644 index 0000000..601d6f5 --- /dev/null +++ b/lwF2/README.md @@ -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 можно найти здесь: . + +Пример данных со списком репозиториев пользователя _vladdy-moses_: . + +В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх. + +## Метод получения данных + +В качестве базы будет использоваться приложение из л/р №F1. + +Пусть в `App.tsx` будут выводиться карточки со списком репозиториев. + +Для того, чтобы это сделать, надо: + +1. Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github. +2. Создать асинхронный метод по получению данных от API при помощи fetch API. +3. Добавить вывод от API в `console.log` и вызвать метод, чтобы убедиться, что он работает. + +Получение данных надо реализовать при помощи 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, её работу необходимо продемонстрировать на лабораторном занятии. diff --git a/lwF2/example.png b/lwF2/example.png new file mode 100644 index 0000000..1345bc4 Binary files /dev/null and b/lwF2/example.png differ