Add lwF2

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)
 

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 можно найти здесь: <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, её работу необходимо продемонстрировать на лабораторном занятии.