diff --git a/README.md b/README.md index d402e67..9e0a113 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Frontend: - [Лабораторная работа №F1 - Макет одностраничного сайта (Figma)](./lwF1/README.md) - [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](./lwF2/README.md) - [Лабораторная работа №F3 - Стилизация веб-приложения (React)](./lwF3/README.md) -- [Лабораторная работа №F4 - Взаимодействие с API (Axios)](#) +- [Лабораторная работа №F4 - Взаимодействие с API (Axios)](./lwF4/README.md) - [Лабораторная работа №F5 - Повторение на базовых технологиях (HTML, CSS)](#) Backend: diff --git a/lwF4/README.md b/lwF4/README.md new file mode 100644 index 0000000..6f9c52a --- /dev/null +++ b/lwF4/README.md @@ -0,0 +1,224 @@ +# Лабораторная работа №F4 - Взаимодействие с API (Axios) + +## Цель работы + +- Освоение взаимодействия между fronend и backend в веб-приложениями посредством технологии `axios`. +- Получение навыков формирования макета RESTful API при помощи технологии `json-server`. +- Освоение технологии `Postman` для работы с API, основанным на протоколе HTTP(S). + +## Ход работы + +1. Проверить и при необходимости исправить код описания формы ввода данных в приложении из [lwF3](../lwF3/README.md). +2. Развернуть API-сервер на основе `json-server` рядом с frontend-приложением. +3. Развернуть ПО Postman и выполнить CRUD-запросы на API-сервере (backend). +4. Подключить к frontend пакет `axios`. +5. Добавить в обработчик отправки формы вызов метода добавления данных в API-сервер при помощи axios. +6. Убедиться через Postman и через блокнот, что данные корректно пришли с frontend на backend. + +## Проверка формы ввода + +> TODO: описать, на что стоит обратить внимание. + +При использовании Consta Design, убедитесь, что все текстовые поля записывают значение во внутреннее состояние формы. + +Если используете собственные обёртки, пропсы `value` и `onChange` "перекидывать" из компонентов Consta Design далее. + +Пример формы БЕЗ компонентов-обёрток (у Вас должно быть с "обёртками"): + +```tsx +export const FeedbackForm = () => { + const [nameValue, setNameValue] = useState(null); + const [textValue, setTextValue] = useState(null); + + const handleSend = () => { + /* TODO: логика по отправке данных на сервер. */ + }; + + return ( + + + +