├── .gitignore ├── .markdownlint.yaml ├── README.md ├── homework-07 ├── resource.png ├── README.md ├── README.ua.md └── README.pl.md ├── homework-01 ├── friend-list │ ├── preview.jpg │ ├── friends.json │ ├── README.ua.md │ ├── README.md │ └── README.pl.md ├── statistics │ ├── preview.jpg │ ├── data.json │ ├── README.ua.md │ ├── README.md │ └── README.pl.md ├── social-profile │ ├── preview.png │ ├── user.json │ ├── README.ua.md │ ├── README.md │ └── README.pl.md ├── transaction-history │ ├── preview.jpg │ ├── README.pl.md │ ├── README.ua.md │ ├── README.md │ └── transactions.json ├── README.md ├── README.ua.md └── README.pl.md ├── homework-02 ├── feedback │ ├── mockup │ │ ├── step-1.png │ │ ├── step-2.png │ │ └── preview.gif │ ├── README.ua.md │ ├── README.pl.md │ └── README.md ├── phonebook │ ├── mockup │ │ ├── step-1.png │ │ ├── step-2.png │ │ ├── step-3.gif │ │ ├── step-5.png │ │ ├── step-6.gif │ │ └── step-6.png │ ├── README.ua.md │ ├── README.pl.md │ └── README.md ├── README.md ├── README.ua.md └── README.pl.md ├── homework-03 ├── image-finder │ ├── mockup │ │ └── preview.jpg │ ├── README.ua.md │ ├── README.pl.md │ ├── README.md │ └── styles.css ├── phonebook │ ├── README.ua.md │ ├── README.pl.md │ └── README.md ├── README.md ├── README.ua.md └── README.pl.md ├── .prettierrc ├── hooks ├── README.md ├── README.pl.md └── README.ua.md ├── homework-06 ├── README.md ├── README.ua.md └── README.pl.md ├── homework-08 ├── README.ua.md ├── README.md └── README.pl.md ├── homework-04 ├── README.md ├── README.ua.md └── README.pl.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | drafts/ -------------------------------------------------------------------------------- /.markdownlint.yaml: -------------------------------------------------------------------------------- 1 | MD041: false 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GoIT React Course Homework 2 | -------------------------------------------------------------------------------- /homework-07/resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-07/resource.png -------------------------------------------------------------------------------- /homework-01/friend-list/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-01/friend-list/preview.jpg -------------------------------------------------------------------------------- /homework-01/statistics/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-01/statistics/preview.jpg -------------------------------------------------------------------------------- /homework-01/social-profile/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-01/social-profile/preview.png -------------------------------------------------------------------------------- /homework-02/feedback/mockup/step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/feedback/mockup/step-1.png -------------------------------------------------------------------------------- /homework-02/feedback/mockup/step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/feedback/mockup/step-2.png -------------------------------------------------------------------------------- /homework-02/feedback/mockup/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/feedback/mockup/preview.gif -------------------------------------------------------------------------------- /homework-02/phonebook/mockup/step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/phonebook/mockup/step-1.png -------------------------------------------------------------------------------- /homework-02/phonebook/mockup/step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/phonebook/mockup/step-2.png -------------------------------------------------------------------------------- /homework-02/phonebook/mockup/step-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/phonebook/mockup/step-3.gif -------------------------------------------------------------------------------- /homework-02/phonebook/mockup/step-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/phonebook/mockup/step-5.png -------------------------------------------------------------------------------- /homework-02/phonebook/mockup/step-6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/phonebook/mockup/step-6.gif -------------------------------------------------------------------------------- /homework-02/phonebook/mockup/step-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-02/phonebook/mockup/step-6.png -------------------------------------------------------------------------------- /homework-01/transaction-history/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-01/transaction-history/preview.jpg -------------------------------------------------------------------------------- /homework-03/image-finder/mockup/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/react-homework/HEAD/homework-03/image-finder/mockup/preview.jpg -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "es5", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "arrowParens": "avoid", 11 | "proseWrap": "always" 12 | } 13 | -------------------------------------------------------------------------------- /homework-01/social-profile/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "username": "Jacques Gluke", 3 | "tag": "jgluke", 4 | "location": "Ocho Rios, Jamaica", 5 | "avatar": "https://cdn-icons-png.flaticon.com/512/2922/2922506.png", 6 | "stats": { 7 | "followers": 5603, 8 | "views": 4827, 9 | "likes": 1308 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /homework-01/statistics/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "id": "id-1", "label": ".docx", "percentage": 22 }, 3 | { "id": "id-2", "label": ".pdf", "percentage": 4 }, 4 | { "id": "id-3", "label": ".mp3", "percentage": 17 }, 5 | { "id": "id-4", "label": ".psd", "percentage": 47 }, 6 | { "id": "id-5", "label": ".pdf", "percentage": 10 } 7 | ] 8 | -------------------------------------------------------------------------------- /homework-03/phonebook/README.ua.md: -------------------------------------------------------------------------------- 1 | **`ESC`: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Телефонна книга 4 | 5 | Візьми своє рішення завдання з попередньої домашньої роботи і додай зберігання контактів телефонної книги в `localStorage`. Використовуй методи життєвого циклу. 6 | 7 | - Під час додавання та видалення контакту контакти зберігаються у локальне сховище. 8 | - Під час завантаження застосунку контакти, якщо такі є, зчитуються з локального сховища і записуються у стан. 9 | -------------------------------------------------------------------------------- /homework-03/phonebook/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | # Książka telefoniczna 4 | 5 | Weź swoje rozwiązanie zadania z poprzedniej pracy domowej i dodaj przechowywanie kontaktów w książce telefonicznej w `localStorage`. Wykorzystaj metody cyklu życia. 6 | 7 | - Przy dodawaniu i usuwaniu kontaktów zapisują się one w lokalnym magazynie. 8 | - W trakcie ładowania aplikacji, kontakty, jeśli jakieś istnieją, sczytują się z lokalnego magazynu i zapisują w stanie. 9 | -------------------------------------------------------------------------------- /homework-03/phonebook/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Телефонная книга 4 | 5 | Возьми свое решение задания из предыдущей домашней работы и добавь хранение 6 | контактов телефонной книги в `localStorage`. Используй методы жизненного цикла. 7 | 8 | - При добавлении и удалении контакта, контакты сохраняются в локальное 9 | хранилище. 10 | - При загрузке приложения, контакты, если таковые есть, считываются из 11 | локального хранилища и записываются в состояние. 12 | -------------------------------------------------------------------------------- /homework-01/friend-list/friends.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "avatar": "https://cdn-icons-png.flaticon.com/512/1998/1998592.png", 4 | "name": "Mango", 5 | "isOnline": true, 6 | "id": 1812 7 | }, 8 | { 9 | "avatar": "https://cdn-icons-png.flaticon.com/512/616/616438.png", 10 | "name": "Kiwi", 11 | "isOnline": false, 12 | "id": 1137 13 | }, 14 | { 15 | "avatar": "https://cdn-icons-png.flaticon.com/512/1623/1623681.png", 16 | "name": "Ajax", 17 | "isOnline": true, 18 | "id": 1213 19 | }, 20 | { 21 | "avatar": "https://cdn-icons-png.flaticon.com/512/2977/2977285.png", 22 | "name": "Jay", 23 | "isOnline": true, 24 | "id": 1714 25 | }, 26 | { 27 | "avatar": "https://cdn-icons-png.flaticon.com/512/1998/1998749.png", 28 | "name": "Poly", 29 | "isOnline": false, 30 | "id": 1284 31 | } 32 | ] 33 | -------------------------------------------------------------------------------- /homework-02/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Созданы репозитории `goit-react-hw-02-feedback` и 10 | `goit-react-hw-02-phonebook`. 11 | - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочие 12 | страницы каждого задания на `GitHub Pages`. 13 | - При запуске кода задания, в консоли нету ошибок и предупреждений. 14 | - Для каждого компонента есть отдельный файл в папке `src/components`. 15 | - Для компонентов описаны `propTypes`. 16 | - Все что компонент ожидает в виде пропсов, передается ему при вызове. 17 | - JS-код чистый и понятный, используется `Prettier`. 18 | - Стилизация выполнена `CSS-модулями` или `Styled Components`. 19 | 20 | ## Задания 21 | 22 | - [Задание 1 - Виджет отзывов](./feedback/) 23 | - [Задание 2 - Телефонная книга](./phonebook/) 24 | -------------------------------------------------------------------------------- /homework-02/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створені репозиторії `goit-react-hw-02-feedback` и 10 | `goit-react-hw-02-phonebook`. 11 | - При здачі домашньої роботи є два посилання: на вихідні файли та робочі 12 | сторінки кожного завдання на `GitHub Pages`. 13 | - Під час запуску коду завдання в консолі відсутні помилки та попередження. 14 | - Для кожного компонента є окремий файл у папці `src/components`. 15 | - Для компонентів описані `propTypes`. 16 | - Все, що компонент очікує у вигляді пропсів, передається йому під час виклику. 17 | - JS-код чистий і зрозумілий, використовується `Prettier`. 18 | - Стилізація виконана `CSS-модулями` або `Styled Components`. 19 | 20 | ## Завдання 21 | 22 | - [Завдання 1 - Віджет відгуків](./feedback/) 23 | - [Завдання 2 - Телефонна книга](./phonebook/) 24 | -------------------------------------------------------------------------------- /homework-02/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Utworzone repozytoria `goit-react-hw-02-feedback` i 10 | `goit-react-hw-02-phonebook`. 11 | - W pracy domowej są dwa odnośniki: do plików źródłowych i roboczych stron 12 | każdego zadania na `GitHub Pages`. 13 | - Po uruchomieniu kodu zadania, na konsoli nie ma błędów i ostrzeżeń. 14 | - Dla każdego komponentu jest oddzielny plik w folderze `src/components`. 15 | - Dla komponentów opisane są `propTypes`. 16 | - Wszystko, czego komponent oczekuje w postaci propsów, przekazywane jest do 17 | niego przy wywołaniu. 18 | - Kod JS jest czysty i zrozumiały, wykorzystuje się `Prettier`. 19 | - Stylizacja wykonana `CSS-modułami` lub `Styled Components`. 20 | 21 | ## Zadania 22 | 23 | - [Zadanie 1 - Widget odpowiedzi](./feedback/README.pl.md) 24 | - [Zadanie 2 - Książka telefoniczna](./phonebook/README.pl.md) 25 | -------------------------------------------------------------------------------- /homework-03/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Созданы репозитории `goit-react-hw-03-phonebook` и 10 | `goit-react-hw-03-image-finder` 11 | - При сдаче домашней работы есть ссылки: на исходные файлы и рабочую страницу 12 | проектов на `GitHub Pages` 13 | - В состоянии компонентов хранится минимально необходимый набор данных, 14 | остальное вычисляется 15 | - При запуске кода задания, в консоли нету ошибок и предупреждений 16 | - Для каждого компонента есть отдельная папка с файлом React-компонента и файлом 17 | стилей 18 | - Для компонентов описаны `propTypes` 19 | - Все что компонент ожидает в виде пропов, передается ему при вызове 20 | - Имена компонентов понятные, описательные 21 | - JS-код чистый и понятный, используется `Prettier` 22 | - Стилизация выполнена `CSS-модулями` или `Styled Components`. 23 | 24 | ## Задания 25 | 26 | - [Задание 1 - Телефонная книга](./phonebook/) 27 | - [Задание 2 - Поиск изображений](./image-finder/) 28 | -------------------------------------------------------------------------------- /homework-03/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створені репозиторії `goit-react-hw-03-phonebook` и 10 | `goit-react-hw-03-image-finder` 11 | - При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку 12 | проектів на `GitHub Pages`. 13 | - У стані компонентів зберігається мінімально необхідний набір даних, решта 14 | обчислюється 15 | - Під час запуску коду завдання в консолі відсутні помилки та попередження. 16 | - Для кожного компонента є окрема папка з файлом React-компонента та файлом 17 | стилів 18 | - Для компонентів описані `propTypes` 19 | - Все, що компонент очікує у вигляді пропсів, передається йому під час виклику. 20 | - Імена компонентів зрозумілі та описові 21 | - JS-код чистий і зрозумілий, використовується `Prettier`. 22 | - Стилізація виконана `CSS-модулями` або `Styled Components`. 23 | 24 | ## Завдання 25 | 26 | - [Завдання 1 - Телефонна книга](./phonebook/) 27 | - [Завдання 2 - Пошук зображень](./image-finder/) 28 | -------------------------------------------------------------------------------- /homework-07/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Создан репозиторий `goit-react-hw-07-phonebook` 10 | - Использована библиотека `Redux Toolkit` 11 | 12 | ## Телефонная книга 13 | 14 | Выполни рефакторинг кода приложения «Телефонная книга». Удали код отвечающий за 15 | хранение и чтение контактов из локального хранилища и добавь работу с бекендом 16 | для хранения контактов. 17 | 18 | Создай бекенд для разработки при помощи UI-сервиса 19 | [mockapi.io](https://mockapi.io). Зарегистрируйся используя свой аккаунт GitHub. 20 | 21 | Создай ресурс `contacts` чтобы получить ендпоинт `/contacts`. Используй 22 | конструктор ресурса и опиши объект контакта как на иллюстрации. 23 | 24 | Contact schema 25 | 26 | Используй функцию 27 | [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) или 28 | [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) для взаимодействия 29 | с бекендом и асинхронными запросами. 30 | -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | Используй этот 2 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 3 | как стартовую точку своего приложения. 4 | 5 | # Критерии приема 6 | 7 | - При сдаче домашней работы есть ссылки: на исходные файлы и рабочую страницу 8 | проектов на `GitHub Pages`. 9 | - При запуске кода задания, в консоли нету ошибок и предупреждений. 10 | - Для каждого компонента есть отдельная папка с файлом React-компонента и файлом 11 | стилей. 12 | - Для компонентов описаны `propTypes`. 13 | - Имена компонентов понятные, описательные. 14 | 15 | ## Виджет отзывов 16 | 17 | - Создан репозиторий `goit-react-hw-04-hooks-feedback`. 18 | - Проведи рефакторинг кода задания 19 | [Виджет отзывов](../homework-02/feedback/README.md) используя React-хуки. 20 | 21 | ## Книга контактов 22 | 23 | - Создан репозиторий `goit-react-hw-04-hooks-phonebook`. 24 | - Проведи рефакторинг кода задания 25 | [Книга контактов](../homework-03/phonebook/README.md) используя React-хуки. 26 | 27 | ## Поиск изображений 28 | 29 | - Создан репозиторий `goit-react-hw-04-hooks-images`. 30 | - Проведи рефакторинг кода задания 31 | [Поиск изображений](../homework-03/image-finder/README.md) используя 32 | React-хуки. 33 | -------------------------------------------------------------------------------- /homework-07/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створений репозиторій `goit-react-hw-07-phonebook` 10 | - Використана бібліотека `Redux Toolkit` 11 | 12 | ## Телефонна книга 13 | 14 | Виконай рефакторинг коду застосунку «Телефонна книга». Видали код, який 15 | відповідає за зберігання та читання контактів з локального сховища, та додай 16 | роботу з бекендом для зберігання контактів. 17 | 18 | Створи бекенд для розробки за допомогою UI-сервісу 19 | [mockapi.io](https://mockapi.io). Зареєструйся, використовуючи свій обліковий 20 | запис GitHub. 21 | 22 | Створи ресурс `contacts`, щоб отримати ендпоінт `/contacts`. Використовуй 23 | конструктор ресурсу та опиши об'єкт контакту як на ілюстрації. 24 | 25 | Contact schema 26 | 27 | Використовуй функцію 28 | [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) або 29 | [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) для взаємодії з 30 | бекендом та асинхронними запитами. 31 | -------------------------------------------------------------------------------- /homework-07/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Stworzone repozytorium `goit-react-hw-07-phonebook`. 10 | - Wykorzystana biblioteka `Redux Toolkit`. 11 | 12 | ## Książka telefoniczna 13 | 14 | Wykonaj refaktor kodu aplikacji "Książka telefoniczna". Usuń kod odpowiadający 15 | za przechowywanie i czytanie kontaktów z lokalnego magazynu i dodaj pracę z 16 | backendem do zapisywania kontaktów. 17 | 18 | Stwórz backend dla projektu przy pomocy serwisu UI 19 | [mockapi.io](https://mockapi.io). Zarejestruj się, wykorzystując swoje konto na 20 | GitHub. 21 | 22 | Stwórz zasób `contacts`, aby otrzymać endpoint `/contacts`. Wykorzystaj 23 | konstruktor zasobów i opisz obiekt kontaktu jak na ilustracji. 24 | 25 | Contact schema 26 | 27 | Wykorzystaj funkcję 28 | [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) lub 29 | [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) do współpracy z 30 | backendem i asynchronicznymi zapytaniami. 31 | -------------------------------------------------------------------------------- /hooks/README.pl.md: -------------------------------------------------------------------------------- 1 | Wykorzystaj ten [szablon projektu React](https://github.com/goitacademy/react-homework-template/blob/main/README.pl.md), jako punkt początkowy swojej aplikacji. 2 | 3 | # Kryteria zaliczenia 4 | 5 | - W oddawanej pracy domowej są odnośniki do plików źródłowych i strony roboczej projektów na `GitHub Pages`. 6 | - Po uruchomieniu kodu zadania, na konsoli nie ma błędów i ostrzeżeń. 7 | - Dla każdego komponentu stworzony został oddzielny folder z plikiem komponentu React i plikiem stylów. 8 | - Dla komponentów opisane są `propTypes`. 9 | - Nazwy komponentów są zrozumiałe i opisowe. 10 | 11 | ## Widget odpowiedzi 12 | 13 | - Utworzone repozytorium `goit-react-hw-04-hooks-feedback`. 14 | - Przeprowadź refaktor kodu zadania [Widget odpowiedzi](../homework-02/feedback/README.md), wykorzystując hooki React. 15 | 16 | ## Książka kontaktów 17 | 18 | - Utworzone repozytorium `goit-react-hw-04-hooks-phonebook`. 19 | - Przeprowadź refaktor kodu zadania Książka kontaktów](../homework-03/phonebook/README.md), wykorzystując hooki React. 20 | 21 | ## Wyszukiwanie obrazów 22 | 23 | - Utworzone repozytorium `goit-react-hw-04-hooks-images`. 24 | - Przeprowadź refaktor [Wyszukiwanie obrazów](../homework-03/image-finder/README.md), wykorzystując hooki React. 25 | -------------------------------------------------------------------------------- /hooks/README.ua.md: -------------------------------------------------------------------------------- 1 | Використовуй цей 2 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 3 | як стартову точку своєї програми. 4 | 5 | # Критерії приймання 6 | 7 | - При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку 8 | проекту на `GitHub Pages`. 9 | - Під час запуску коду завдання в консолі відсутні помилки та попередження. 10 | - Для кожного компонента є окрема папка з файлом React-компонента та файлом 11 | стилів 12 | - Для компонентів описані `propTypes`. 13 | - Імена компонентів зрозумілі та описові. 14 | 15 | ## Віджет відгуків 16 | 17 | - Створений репозиторій `goit-react-hw-04-hooks-feedback`. 18 | - Проведи рефакторинг коду завдання 19 | [Віджет відгуків](../homework-02/feedback/README.md), використовуючи 20 | React-хуки. 21 | 22 | ## Книга контактів 23 | 24 | - Створений репозиторій `goit-react-hw-04-hooks-phonebook`. 25 | - Проведи рефакторинг коду завдання 26 | [Книга контактів](../homework-03/phonebook/README.md), використовуючи 27 | React-хуки. 28 | 29 | ## Пошук зображень 30 | 31 | - Створений репозиторій `goit-react-hw-04-hooks-images`. 32 | - Проведи рефакторинг коду завдання 33 | [Пошук зображень](../homework-03/image-finder/README.md), використовуючи 34 | React-хуки. 35 | -------------------------------------------------------------------------------- /homework-03/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Stwórz repozytoria `goit-react-hw-03-phonebook` i 10 | `goit-react-hw-03-image-finder`. 11 | - W zadaniu domowym umieszczone są odnośniki: do oryginalnych plików i strony 12 | roboczej projektów na `GitHub Pages`. 13 | - W stanie komponentów przechowywany jest minimalny niezbędny zestaw danych, 14 | pozostałe są obliczane. 15 | - Po włączeniu kodu zadania, na konsoli nie ma błędów i ostrzeżeń. 16 | - Dla każdego komponentu stworzony został folder z plikiem komponentu React i 17 | plikiem stylów. 18 | - Dla komponentu opisane są `propTypes`. 19 | - Wszystko, czego komponent żąda w postaci propsów, przekazuje się do niego przy 20 | wywołaniu. 21 | - Nazwy komponentów są zrozumiałe, opisowe. 22 | - Kod JS jest czysty i zrozumiały, wykorzystuje się `Prettier`. 23 | - Stylizacja wykonania `CSS-modułami` lub `Styled Components`. 24 | 25 | ## Zadania 26 | 27 | - [Zadanie 1 - Książka telefoniczna](./phonebook/README.pl.md) 28 | - [Zadanie 2 - Wyszukiwanie obrazów](./image-finder/README.pl.md) 29 | -------------------------------------------------------------------------------- /homework-01/friend-list/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Список друзів 4 | 5 | Необхідно створити компонент ``, за допомогою якого ми могли б відображати інформацію про друзів користувача. Інформація про друзів зберігається у файлі [friends.json](./friends.json). 6 | 7 | ![Прев'ю компонента FriendList](./preview.jpg) 8 | 9 | ## Опис компонента `` 10 | 11 | Компонент повинен приймати один проп `friends` – масив об'єктів друзів. 12 | 13 | Компонент повинен створювати DOM наступної структури. 14 | 15 | ```html 16 | 19 | ``` 20 | 21 | ## Опис компонента `` 22 | 23 | Компонент повинен приймати кілька пропів: 24 | 25 | - `avatar` – посилання на аватар 26 | - `name` – ім'я друга 27 | - `isOnline` – буль, що сигналізує про стан друга: в мережі або ні. 28 | 29 | Залежно від пропа `isOnline`, повинен змінюватися колір фону `span.status`. Це можна зробити за допомогою різних CSS-класів або Styled Components. 30 | 31 | Компонент повинен створювати DOM наступної структури. 32 | 33 | ```html 34 |
  • 35 | 36 | User avatar 37 |

    38 |
    • 39 | ``` 40 | 41 | ## Приклад використання 42 | 43 | ```js 44 | import friends from 'путь/к/friends.json'; 45 | 46 | , 47 | ``` 48 | -------------------------------------------------------------------------------- /homework-01/friend-list/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Список друзей 4 | 5 | Необходимо создать компонент ``, с помощью которого мы могли бы 6 | отображать информацию о друзьях пользователя. Информация о друзьях хранится в 7 | файле [friends.json](./friends.json). 8 | 9 | ![Превью компонента FriendList](./preview.jpg) 10 | 11 | ## Описание компонента `` 12 | 13 | Компонент должен принимать один проп `friends` - массив объектов друзей. 14 | 15 | Компонент должен создавать DOM следующей структуры. 16 | 17 | ```html 18 |
      19 | 20 |
    21 | ``` 22 | 23 | ## Описание компонента `` 24 | 25 | Компонент должен принимать несколько пропов: 26 | 27 | - `avatar` - ссылка на аватар 28 | - `name` - имя друга 29 | - `isOnline` - буль сигнализирующий о состоянии друга, в сети или нет. 30 | 31 | В зависимости от пропа `isOnline`, должен меняться цвет фона `span.status`. Это 32 | можно сделать через разный CSS-класс или Styled Components. 33 | 34 | Компонент должен создавать DOM следующей структуры. 35 | 36 | ```html 37 |
  • 38 | 39 | User avatar 40 |

    41 |
    • 42 | ``` 43 | 44 | ## Пример использования 45 | 46 | ```js 47 | import friends from 'путь/к/friends.json'; 48 | 49 | , 50 | ``` 51 | -------------------------------------------------------------------------------- /homework-01/friend-list/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | # Lista znajomych 4 | 5 | Należy utworzyć komponent ``, przy pomocy którego możemy wyświetlać informację o znajomych użytkownika. Informacja o znajomych przechowywana jest w pliku [friends.json](./friends.json). 6 | 7 | ![Preview komponentu FriendList](./preview.jpg) 8 | 9 | ## Opis komponentu `` 10 | 11 | Komponent powinien przyjmować jeden props `friends` - tablica obiektów znajomych. 12 | 13 | Komponent powinien tworzyć DOM następującej struktury. 14 | 15 | ```html 16 |
      17 | 18 |
    19 | ``` 20 | 21 | ## Opis komponentu `` 22 | 23 | Komponent powinien przyjmować kilka propsów: 24 | 25 | - `avatar` - odnośnik do awatara 26 | - `name` - imię znajomego 27 | - `isOnline` - wartość boolowska sygnalizująca status znajomego – jest lub nie ma go w sieci. 28 | 29 | W zależności od propsu `isOnline`, powinien zmieniać się kolor tła `span.status`. Można to zrobić poprzez różne klasy CSS lub Styled Components. 30 | 31 | Komponent powinien tworzyć DOM o następującej strukturze. 32 | 33 | ```html 34 |
  • 35 | 36 | User avatar 37 |

    38 |
    • 39 | ``` 40 | 41 | ## Przykład wykorzystania 42 | 43 | ```js 44 | import friends from 'trasa/do/friends.json'; 45 | 46 | , 47 | ``` 48 | -------------------------------------------------------------------------------- /homework-01/transaction-history/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | # Historia transakcji 4 | 5 | Należy utworzyć komponent historii transakcji na koncie osobistym banku internetowego. 6 | 7 | ![Preview komponentu TransactionHistory](./preview.jpg) 8 | 9 | Dane do listy dostępne w formacie JSON w pliku [transactions.json](./transactions.json). To tablica obiektów, każdy obiekt opisuje jedną transakcję z następującymi właściwościami: 10 | 11 | - `id` — indywidualny identyfikator transakcji 12 | - `type` — typ transakcji 13 | - `amount` - kwota transakcji 14 | - `currency` - typ waluty 15 | 16 | ## Opis komponentu `` 17 | 18 | Należy utworzyć komponent `` przyjmujący jeden props `items` - tablicę obiektów transakcji z `transactions.json`. Komponent tworzy układ tablicy. W przykładzie widać układ dwóch transakcji. 19 | 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
    TypeAmountCurrency
    Invoice125USD
    Withdrawal85USD
    43 | ``` 44 | 45 | ## Przykład wykorzystania 46 | 47 | ```js 48 | import transactions from 'droga/do/transactions.json'; 49 | 50 | ; 51 | ``` 52 | -------------------------------------------------------------------------------- /homework-06/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Создан репозиторий `goit-react-hw-06-phonebook` 10 | - При сдаче домашней работы есть ссылки: на исходные файлы и рабочую страницу 11 | проекта на `GitHub Pages` или `Netlify` 12 | - В Redux-состоянии хранится минимально необходимый набор данных 13 | - При запуске кода задания, в консоли нету ошибок и предупреждений 14 | - Для каждого компонента есть отдельная папка с файлом React-компонента и файлом 15 | стилей 16 | - Для компонентов описаны `propTypes` 17 | - Использована библиотека `Redux Toolkit` 18 | 19 | ## Телефонная книга 20 | 21 | Выполни рефакторинг кода приложения «Телефонная книга» добавив управление 22 | состоянием при помощи библиотеки [Redux Toolkit](https://redux-toolkit.js.org/). 23 | 24 | Пусть Redux-состояние выглядит следующим образом. 25 | 26 | ```bash 27 | { 28 | contacts: { 29 | items: [], 30 | filter: '' 31 | } 32 | } 33 | ``` 34 | 35 | - Создай хранилище с `configureStore()` 36 | - Создай действия сохранения и удаления контакта, а также обновления фильтра. 37 | Используй функцию `createAction()`. 38 | - Создай редюсеры контактов и фильтра. Используй функцию `createReducer()` или 39 | `createSlice()`. 40 | - Свяжи React-компоненты с Redux-логикой при помощи хуков бибилиотеки 41 | [react-redux](https://react-redux.js.org/). 42 | -------------------------------------------------------------------------------- /homework-06/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створений репозиторій `goit-react-hw-06-phonebook` 10 | - При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку 11 | проекту на `GitHub Pages` або `Netlify` 12 | - В Redux-стані зберігається мінімально необхідний набір даних 13 | - Під час запуску коду завдання в консолі відсутні помилки та попередження. 14 | - Для кожного компонента є окрема папка з файлом React-компонента та файлом 15 | стилів 16 | - Для компонентів описані `propTypes` 17 | - Використана бібліотека `Redux Toolkit` 18 | 19 | ## Телефонна книга 20 | 21 | Виконай рефакторинг коду застосунку «Телефонна книга», додавши управління станом 22 | за допомогою бібліотеки [Redux Toolkit](https://redux-toolkit.js.org/). 23 | 24 | Нехай Redux-стан виглядає наступним чином. 25 | 26 | ```bash 27 | { 28 | contacts: { 29 | items: [], 30 | filter: '' 31 | } 32 | } 33 | ``` 34 | 35 | - Створи сховище з `configureStore()` 36 | - Створи дії збереження та видалення контакту, а також оновлення фільтра. 37 | Використовуй функцію `createAction()`. 38 | - Створи редюсери контактів та фільтра. Використовуй функцію `createReducer()` 39 | або `createSlice()`. 40 | - Зв'яжи React-компоненти з Redux-логікою за допомогою хуків бібліотеки 41 | [react-redux](https://react-redux.js.org/). 42 | -------------------------------------------------------------------------------- /homework-01/transaction-history/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Історія транзакцій 4 | 5 | Необхідно створити компонент історії транзакцій в особистому кабінеті інтернет-банку. 6 | 7 | ![Прев'ю компонента TransactionHistory](./preview.jpg) 8 | 9 | Дані для списку доступні у форматі JSON у файлі [transactions.json](./transactions.json). Це масив об'єктів, кожен об'єкт описує одну транзакцію з наступними властивостями: 10 | 11 | - `id` — унікальний ідентифікатор транзакції 12 | - `type` — тип транзакції 13 | - `amount` - сума транзакції 14 | - `currency` - тип валюти 15 | 16 | ## Опис компонента `` 17 | 18 | Необхідно створити компонент ``, який приймає один проп `items` – масив об'єктів транзакцій з `transactions.json`. Компонент створює розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена розмітка двох транзакцій. 19 | 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
    TypeAmountCurrency
    Invoice125USD
    Withdrawal85USD
    43 | ``` 44 | 45 | ## Приклад використання 46 | 47 | ```js 48 | import transactions from 'путь/к/transactions.json'; 49 | 50 | ; 51 | ``` 52 | -------------------------------------------------------------------------------- /homework-01/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Создан репозиторий `goit-react-hw-01-components`. 10 | - Компоненты всех заданий рендерятся на одной странице, внутри общего 11 | контейнера - корневого компонента ``. 12 | - При сдаче домашней работы есть ссылка на репозиторий с исходным кодом проекта. 13 | - В шапке репозитория есть ссылка на живую страницу на `GitHub pages`. 14 | - При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и 15 | предупреждений. 16 | - Для каждого компонента есть отдельная папка с файлом React-компонента и файлом 17 | стилей. 18 | - Для компонентов описаны `propTypes`. 19 | - Все что компонент ожидает в виде пропсов, передается ему при вызове. 20 | - Имена компонентов понятные, описательные. 21 | - JS-код чистый и понятный, используется `Prettier`. 22 | - Стилизация выполнена `CSS-модулями` или `Styled Components`, поэтому классы в 23 | результирующем DOM будут отличаться от примеров. 24 | - Достаточно базовой стилизации приложения, в первую очередь оно должно 25 | работать, а уже потом быть красивое. Выделяй 20% времени на CSS и 80% на JS. 26 | 27 | ## Задания 28 | 29 | - [Задание 1 - Профиль социальной сети](./social-profile/) 30 | - [Задание 2 - Секция статистики](./statistics/) 31 | - [Задание 3 - Список друзей](./friend-list/) 32 | - [Задание 4 - История транзакций](./transaction-history/) 33 | -------------------------------------------------------------------------------- /homework-01/transaction-history/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # История транзакций 4 | 5 | Необходимо создать компонент истории транзакций в личном кабинете интернет 6 | банка. 7 | 8 | ![Превью компонента TransactionHistory](./preview.jpg) 9 | 10 | Данные для списка доступны в формате JSON в файле 11 | [transactions.json](./transactions.json). Это массив объектов, каждый объект 12 | описывает одну транзакцию со следующими свойствами: 13 | 14 | - `id` — уникальный идентификатор транзакции 15 | - `type` — тип транзакции 16 | - `amount` - сумма транзакции 17 | - `currency` - тип валюты 18 | 19 | ## Описание компонента `` 20 | 21 | Необходимо создать компонент `` принимающий один проп 22 | `items` - массив объектов транзакций из `transactions.json`. Компонент создает 23 | разметку таблицы. Каждая транзакция это строка таблицы. В примере приведена 24 | разметка двух транзакций. 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
    TypeAmountCurrency
    Invoice125USD
    Withdrawal85USD
    49 | ``` 50 | 51 | ## Пример использования 52 | 53 | ```js 54 | import transactions from 'путь/к/transactions.json'; 55 | 56 | ; 57 | ``` 58 | -------------------------------------------------------------------------------- /homework-06/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Stworzone repozytorium `goit-react-hw-06-phonebook` 10 | - Przy oddawaniu zadania domowego znajdują się w nim odnośniki do: oryginalnych 11 | plików i roboczej strony projektu na `GitHub Pages` lub `Netlify`. 12 | - W stanie Redux przechowywany jest minimalny wymagany zestaw danych. 13 | - Po włączeniu kodu zadania, na konsoli nie ma błędów i ostrzeżeń. 14 | - Dla każdego komponentu stworzony został folder z plikiem komponentu React i 15 | plikiem stylów. 16 | - Dla komponentu opisane są `propTypes`. 17 | - Wykorzystywana jest biblioteka `Redux Toolkit`. 18 | 19 | ## Książka telefoniczna 20 | 21 | Przeprowadź refaktor kodu aplikacji "Książka telefoniczna", dodając zarządzanie 22 | stanem przy pomocy biblioteki [Redux Toolkit](https://redux-toolkit.js.org/). 23 | 24 | Niech stan Redux wygląda następująco. 25 | 26 | ```bash 27 | { 28 | contacts: { 29 | items: [], 30 | filter: '' 31 | } 32 | } 33 | ``` 34 | 35 | - Stwórz magazyn z `configureStore()`. 36 | - Stwórz działanie zapisywania i usuwania kontaktu oraz odświeżania filtru. 37 | Wykorzystaj funkcję `createAction()`. 38 | - Stwórz reduktory kontaktów i filtru. Wykorzystaj funkcję `createReducer()` lub 39 | `createSlice()`. 40 | - Powiąż komponent React i logikę Redux przy pomocy hooków biblioteki 41 | [react-redux](https://react-redux.js.org/). 42 | -------------------------------------------------------------------------------- /homework-01/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створений репозиторій `goit-react-hw-01-components`. 10 | - Компоненти всіх завдань рендеряться на одній сторінці, всередині спільного 11 | контейнера – кореневого компонента ``. 12 | - При здачі домашньої роботи є посилання на репозиторій з вихідним кодом 13 | проекту. 14 | - В шапці репозиторія є посилання на живу сторінку на `GitHub pages`. 15 | - Під час відвідування робочої сторінки (GitHub pages) завдання, в консолі 16 | відсутні помилки та попередження. 17 | - Для кожного компонента є окрема папка з файлом React-компонента і файлом 18 | стилів. 19 | - Для компонентів описані `propTypes`. 20 | - Все, що компонент очікує у вигляді пропсів, передається йому під час виклику. 21 | - Імена компонентів зрозумілі та описові. 22 | - JS-код чистий і зрозумілий, використовується `Prettier`. 23 | - Стилізація виконана `CSS-модулями` або `Styled Components`, тому класи в 24 | результуючому DOM відрізнятимуться від прикладів. 25 | - Достатньо базової стилізації застосунку, насамперед він повинен працювати, а 26 | вже потім бути гарним. Приділяй 20% часу на CSS і 80% на JS. 27 | 28 | ## Завдання 29 | 30 | - [Завдання 1 - Профіль соціальної мережі](./social-profile/) 31 | - [Завдання 2 - Секція статистики](./statistics/) 32 | - [Завдання 3 - Список друзів](./friend-list/) 33 | - [Завдання 4 - Історія транзакцій](./transaction-history/) 34 | -------------------------------------------------------------------------------- /homework-08/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створений репозиторій `goit-react-hw-08-phonebook` 10 | - При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку 11 | проекту на `GitHub Pages` 12 | - Під час запуску коду завдання в консолі відсутні помилки та попередження. 13 | - Для кожного компонента є окрема папка з файлом React-компонента та файлом 14 | стилів 15 | - Для компонентів описані `propTypes` 16 | 17 | ## Телефонна книга 18 | 19 | Додай у застосунок «Телефонної книги» можливість реєстрації користувачів та 20 | роботу з приватними колекціями контактів. 21 | 22 | - Додай маршрутизацію та кілька сторінок: 23 | - `/register` – публічний маршрут реєстрації нового користувача з формою 24 | - `/login` – публічний маршрут логіна існуючого користувача з формою 25 | - `/contacts` – приватний маршрут для роботи з колекцією контактів користувача 26 | - Додай навігаційні посилання для переходу маршрутами. 27 | - Додай компонент ``, що складається з пошти користувача і кнопки 28 | `Logout`. 29 | - Використовуй готовий живий бекенд з документацією 30 | [за посиланням](https://connections-api.herokuapp.com/docs/). 31 | - Додай публічні і приватні маршрути. 32 | - Попрацюй над гарним оформленням інтерфейсу, можна використовувати бібліотеку 33 | компонентів, наприклад [React Bootstrap](https://react-bootstrap.github.io/), 34 | [Material-UI](https://material-ui.com/) та інші. 35 | -------------------------------------------------------------------------------- /homework-08/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Создан репозиторий `goit-react-hw-08-phonebook` 10 | - При сдаче домашней работы есть ссылки: на исходные файлы и рабочую страницу 11 | проекта на `GitHub Pages` 12 | - При запуске кода задания, в консоли нету ошибок и предупреждений 13 | - Для каждого компонента есть отдельная папка с файлом React-компонента и файлом 14 | стилей 15 | - Для компонентов описаны `propTypes` 16 | 17 | ## Телефонная книга 18 | 19 | Добавь в приложение «Телефонной книги» возможность регистрации пользователей и 20 | работу с приватными коллекциями контактов. 21 | 22 | - Добавь маршрутизацию и несколько страниц: 23 | - `/register` - публичный маршрут регистрации нового пользователя с формой 24 | - `/login` - публичный маршрут логина сущестующего пользователя с формой 25 | - `/contacts` - приватный маршрут для работы с коллекцией контактов 26 | пользователя 27 | - Добавь навигационные ссылки для перехода по маршрутам. 28 | - Добавь компонент ``, состоящий из почты пользователя и кнопки 29 | `Logout`. 30 | - Используй готовый живой бекенд с документацией 31 | [по ссылке](https://connections-api.herokuapp.com/docs/). 32 | - Добавь публичные и приватные маршруты. 33 | - Поработай над красивым оформлением интерфейса, можно использовать библиотеку 34 | компонентов, например [React Bootstrap](https://react-bootstrap.github.io/), 35 | [Material-UI](https://material-ui.com/) и другие. 36 | -------------------------------------------------------------------------------- /homework-08/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Stworzone repozytorium `goit-react-hw-08-phonebook`. 10 | - W zadaniu domowym umieszczone są odnośniki: do oryginalnych plików i strony 11 | roboczej projektu na `Netlify`. 12 | - Po włączeniu kodu zadania, na konsoli nie ma błędów i ostrzeżeń. 13 | - Dla każdego komponentu stworzony został folder z plikiem komponentu React i 14 | plikiem stylów. 15 | - Dla komponentu opisane są `propTypes`. 16 | 17 | ## Książka telefoniczna 18 | 19 | Dodaj do aplikacji "Książka telefoniczna" możliwość rejestracji użytkowników i 20 | pracę z prywatnymi zbiorami kontaktów. 21 | 22 | - Dodaj trasowanie i kilka stron: 23 | - `/register` - publiczna trasa rejestracji nowego użytkownika z formularzem 24 | - `/login` - publiczna trasa loginu istniejącego użytkownika z formularzem 25 | - `/contacts` - prywatna trasa do pracy ze zbiorem kontaktów użytkownika 26 | - Dodaj odnośniki nawigacyjne do przechodzenia trasy. 27 | - Dodaj komponent ``, składający się z poczty użytkownika i przycisku 28 | `Logout`. 29 | - Wykorzystaj gotowy, działający backend z dokumentacją 30 | [w odnośniku](https://connections-api.herokuapp.com/docs/). 31 | - Dodaj publiczne i prywatne trasy. 32 | - Popracuj nad ładną szatą graficzną interfejsu, można wykorzystać bibliotekę 33 | komponentów, na przykład 34 | [React Bootstrap](https://react-bootstrap.github.io/), 35 | [Material-UI](https://material-ui.com/) i inne. 36 | -------------------------------------------------------------------------------- /homework-01/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Utworzone repozytorium `goit-react-hw-01-components`. 10 | - Komponenty wszystkich zadań renderują się na jednej stronie, wewnątrz 11 | wspólnego kontenera – głównego komponentu ``. 12 | - W zadaniu domowym umieszczone są odnośniki do repozytorium z oryginalnym kodem 13 | projektu. 14 | - W nagłówku repozytorium jest odnośnik do działającej strony na `GitHub pages`. 15 | - Po przejściu do strony roboczej (GitHub pages) zadania, w konsoli nie ma 16 | błędów i ostrzeżeń. 17 | - Dla każdego komponentu jest oddzielny folder z plikiem komponentu React i 18 | plikiem stylów. 19 | - Dla komponentów opisany jest `propTypes`. 20 | - Wszystko, czego komponent oczekuje w postaci propsów, przekazywane jest do 21 | niego po wywołaniu. 22 | - Nazwy komponentów są zrozumiałe, opisowe. 23 | - Kod JS jest czysty i zrozumiały, wykorzystywany jest `Prettier`. 24 | - Stylizacja wykonania `CSS-modułami` lub `Styled Components`, dlatego klasy w 25 | otrzymanym DOM będą różnić się od przykładów. 26 | - Wystarczająca bazowa stylizacja aplikacji. Po pierwsze powinna działać, 27 | dopiero po drugie wyglądać ładnie. Przeznaczaj 20% czasu na CSS i 80% na JS. 28 | 29 | ## Zadania 30 | 31 | - [Zadanie 1 - Profil w sieci społecznościowej](./social-profile/README.pl.md) 32 | - [Zadanie 2 - Sekcja statystyki](./statistics/README.pl.md) 33 | - [Zadanie 3 - Lista znajomych](./friend-list/README.pl.md) 34 | - [Zadanie 4 - Historia transakcji](./transaction-history/README.pl.md) 35 | -------------------------------------------------------------------------------- /homework-01/social-profile/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Профіль соціальної мережі 4 | 5 | Необхідно створити компонент ``, за допомогою якого ми могли б відображати інформацію про користувача соціальної мережі. Дані про користувача лежать у файлі [user.json](./user.json). 6 | 7 | ![Прев'ю компонента Profile](./preview.png) 8 | 9 | ## Опис компонента `` 10 | 11 | Компонент повинен приймати кілька пропсів з інформацією про користувача: 12 | 13 | - `username` — ім'я користувача 14 | - `tag` — тег в соціальній мережі без `@` 15 | - `location` — місто і країна 16 | - `avatar` — посилання на зображення 17 | - `stats` — об'єкт з інформацією про активності 18 | 19 | Компонент повинен створювати DOM елемент наступної структури. 20 | 21 | ```html 22 |
    23 |
    24 | User avatar 29 |

    Petra Marica

    30 |

    @pmarica

    31 |

    Salvador, Brasil

    32 |
    33 | 34 |
      35 |
    • 36 | Followers 37 | 1000 38 |
      • 39 |
    • 40 | Views 41 | 2000 42 |
      • 43 |
    • 44 | Likes 45 | 3000 46 |
      • 47 |
    48 |
    49 | ``` 50 | 51 | ## Приклад використання 52 | 53 | ```js 54 | import user from 'путь/к/user.json; 55 | 56 | 63 | ``` 64 | -------------------------------------------------------------------------------- /homework-01/social-profile/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Профиль социальной сети 4 | 5 | Необходимо создать компонент ``, с помощью которого мы могли бы 6 | отображать информацию о пользователе социальной сети. Данные о пользователе 7 | лежат в файле [user.json](./user.json). 8 | 9 | ![Превью компонента Profile](./preview.png) 10 | 11 | ## Описание компонента `` 12 | 13 | Компонент должен принимать несколько пропсов с информацией о пользователе: 14 | 15 | - `username` — имя пользователя 16 | - `tag` — тег в социальной сети без `@` 17 | - `location` — город и страна 18 | - `avatar` — ссылка на изображение 19 | - `stats` — объект с информацией об активности 20 | 21 | Компонент должен создавать DOM элемент следующей структуры. 22 | 23 | ```html 24 |
    25 |
    26 | User avatar 31 |

    Petra Marica

    32 |

    @pmarica

    33 |

    Salvador, Brasil

    34 |
    35 | 36 |
      37 |
    • 38 | Followers 39 | 1000 40 |
      • 41 |
    • 42 | Views 43 | 2000 44 |
      • 45 |
    • 46 | Likes 47 | 3000 48 |
      • 49 |
    50 |
    51 | ``` 52 | 53 | ## Пример использования 54 | 55 | ```js 56 | import user from 'путь/к/user.json; 57 | 58 | 65 | ``` 66 | -------------------------------------------------------------------------------- /homework-01/social-profile/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | # Profil w sieci społecznościowej 4 | 5 | Należy stworzyć komponent ``, przy pomocy którego możemy wyświetlać informacje o użytkowniku sieci społecznościowej. Dane o użytkowniku znajdują się w pliku [user.json](./user.json). 6 | 7 | ![Preview komponentu Profile](./preview.png) 8 | 9 | ## Opis komponentu `` 10 | 11 | Komponent powinien przyjmować kilka propsów z informacją o użytkowniku: 12 | 13 | - `username` — nazwa użytkownika 14 | - `tag` — tag w sieci społecznościowej bez `@` 15 | - `location` — miasto i państwo 16 | - `avatar` — odnośnik do zdjęcia 17 | - `stats` — obiekt z informacją o aktywności 18 | 19 | Komponent powinien tworzyć element DOM o następującej strukturze. 20 | 21 | ```html 22 |
    23 |
    24 | User avatar 29 |

    Petra Marica

    30 |

    @pmarica

    31 |

    Salvador, Brasil

    32 |
    33 | 34 |
      35 |
    • 36 | Followers 37 | 1000 38 |
      • 39 |
    • 40 | Views 41 | 2000 42 |
      • 43 |
    • 44 | Likes 45 | 3000 46 |
      • 47 |
    48 |
    49 | ``` 50 | 51 | ## Przykład wykorzystania 52 | 53 | ```js 54 | import user from 'droga/do/user.json; 55 | 56 | 63 | ``` 64 | -------------------------------------------------------------------------------- /homework-01/statistics/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Секція статистики 4 | 5 | Створити компонент ``, який би відображав статистику з переданих пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про статистику лежать у файлі [data.json](./data.json). 6 | 7 | ![Прев'ю компонента Statistics](./preview.jpg) 8 | 9 | ## Опис компонента 10 | 11 | Компонент повинен приймати два пропи `title` і `stats`, в яких вказується заголовок та об'єкт статистики. 12 | 13 | - `title` – не обов'язковий, і якщо він не переданий, не повинна рендеритись розмітка заголовка `

    `. 14 | - `stats` – масив об'єктів, що містять інформацію про елемент статистики. Може мати довільну кількість елементів. 15 | - Колір фону елемента статистики в оформленні можна пропустити або створити функцію для генерації випадкового кольору. 16 | 17 | Компонент повинен створювати DOM елемент наступної структури. 18 | 19 | ```html 20 |
    21 |

    Upload stats

    22 | 23 |
      24 |
    • 25 | .docx 26 | 4% 27 |
      • 28 |
    • 29 | .mp3 30 | 14% 31 |
      • 32 |
    • 33 | .pdf 34 | 41% 35 |
      • 36 |
    • 37 | .mp4 38 | 12% 39 |
      • 40 |
    41 |
    42 | ``` 43 | 44 | ## Приклад використання 45 | 46 | ```js 47 | import data from '/путь/к/data.json'; 48 | 49 | ; 50 | ; 51 | ``` 52 | -------------------------------------------------------------------------------- /homework-01/statistics/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Секция статистики 4 | 5 | Создать компонет ``, который бы отображал статистику по переданным 6 | пропам. Например, загрузки в облако по типу файлов, посещение веб-страницы 7 | пользователями разных стран, финансовые траты и т. п. Данные о статистике лежат 8 | в файле [data.json](./data.json). 9 | 10 | ![Превью компонента Statistics](./preview.jpg) 11 | 12 | ## Описание компонента 13 | 14 | Компонент должен принимать два пропа `title` и `stats`, в которых указывается 15 | заголовок и объект статистики. 16 | 17 | - `title` - не обязателен, и если он не передан, не должна рендериться разметка 18 | заголовка `

    `. 19 | - `stats` - массив объектов содержащих информацию о элементе статистики. Может 20 | иметь произвольное кол-во элементов. 21 | - Цвет фона элемента статистики в оформлении можно пропустить, либо создать 22 | функцию для генерации случайного цвета. 23 | 24 | Компонент должен создавать DOM элемент следующей структуры. 25 | 26 | ```html 27 |
    28 |

    Upload stats

    29 | 30 |
      31 |
    • 32 | .docx 33 | 4% 34 |
      • 35 |
    • 36 | .mp3 37 | 14% 38 |
      • 39 |
    • 40 | .pdf 41 | 41% 42 |
      • 43 |
    • 44 | .mp4 45 | 12% 46 |
      • 47 |
    48 |
    49 | ``` 50 | 51 | ## Пример использования 52 | 53 | ```js 54 | import data from '/путь/к/data.json'; 55 | 56 | ; 57 | ; 58 | ``` 59 | -------------------------------------------------------------------------------- /homework-01/statistics/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | # Sekcja statystyki 4 | 5 | Należy utworzyć komponent ``, który będzie wyświetlał statystyki zgodnie z przekazanymi propsami. Na przykład ładowanie w chmurze po typie pliku, odwiedziny strony internetowej przez użytkowników z różnych krajów, wydatki finansowe itp. Dane o statystykach znajdują się w pliku [data.json](./data.json). 6 | 7 | ![Preview komponentu Statistics](./preview.jpg) 8 | 9 | ## Opis komponentu 10 | 11 | Komponent powinien przyjmować dwa propsy `title` i `stats`, w których wyświetla się nagłówek i obiekt statystyk. 12 | 13 | - `title` - nie jest obowiązkowy i jeśli nie został przekazany, układ nagłówka nie powinien się renderować `

    `. 14 | - `stats` - tablica obiektów zawierających informację o elemencie statystyki. Może mieć dowolną ilość elementów. 15 | - Kolor tła elementu statystyki można opuścić lub utworzyć funkcję do generowania losowego koloru. 16 | 17 | Komponent powinien tworzyć element DOM o następującej strukturze. 18 | 19 | ```html 20 |
    21 |

    Upload stats

    22 | 23 |
      24 |
    • 25 | .docx 26 | 4% 27 |
      • 28 |
    • 29 | .mp3 30 | 14% 31 |
      • 32 |
    • 33 | .pdf 34 | 41% 35 |
      • 36 |
    • 37 | .mp4 38 | 12% 39 |
      • 40 |
    41 |
    42 | ``` 43 | 44 | ## Przykład wykorzystania 45 | 46 | ```js 47 | import data from '/droga/do/data.json'; 48 | 49 | ; 50 | ; 51 | ``` 52 | -------------------------------------------------------------------------------- /homework-02/feedback/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Віджет відгуків 4 | 5 | Як і більшість компаній, кафе Expresso збирає відгуки від своїх клієнтів. Твоє завдання – створити додаток для збору статистики. Є лише три варіанти зворотного зв'язку: добре, нейтрально і погано. 6 | 7 | ## Крок 1 8 | 9 | Застосунок повинен відображати кількість зібраних відгуків для кожної категорії. Застосунок не повинен зберігати статистику відгуків між різними сесіями (оновлення сторінки). 10 | 11 | Стан застосунку обов'язково повинен бути наступного вигляду, додавати нові властивості не можна. 12 | 13 | ```bash 14 | state = { 15 | good: 0, 16 | neutral: 0, 17 | bad: 0 18 | } 19 | ``` 20 | 21 | Інтерфейс може мати такий вигляд. 22 | 23 | ![preview](./mockup/step-1.png) 24 | 25 | ## Крок 2 26 | 27 | Розшир функціонал застосунку таким чином, щоб в інтерфейсі відображалося більше статистики про зібрані відгуки. Додай відображення загальної кількості зібраних відгуків з усіх категорій та відсоток позитивних відгуків. Для цього створи допоміжні методи `countTotalFeedback()` і `countPositiveFeedbackPercentage()`, які підраховують ці значення, ґрунтуючись на даних у стані (обчислювані дані). 28 | 29 | ![preview](./mockup/step-2.png) 30 | 31 | ## Крок 3 32 | 33 | Виконай рефакторинг застосунку. Стан застосунку повинен залишатися у кореневому компоненті ``. 34 | 35 | - Винеси відображення статистики в окремий компонент 36 | ``. 37 | - Винеси блок кнопок в компонент 38 | ``. 39 | - Створи компонент `
    `, який рендерить секцію із заголовком і дітей (children). Обгорни кожен із `` і `` у створений компонент секції. 40 | 41 | ## Крок 4 42 | 43 | Розшир функціонал застосунку таким чином, щоб блок статистики рендерився тільки після того, як було зібрано хоча б один відгук. Повідомлення про відсутність статистики винеси в компонент ``. 44 | 45 | ![preview](./mockup/preview.gif) 46 | -------------------------------------------------------------------------------- /homework-02/feedback/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | # Widget odpowiedzi 4 | 5 | Jak większość spółek, kawiarnia Expresso zbiera informacje zwrotne od swoich klientów. Twoim zadaniem jest utworzenie aplikacji dla zbierania statystyk. Istnieją tylko trzy warianty odpowiedzi: dobra, neutralna i zła. 6 | 7 | ## Krok 1 8 | 9 | Aplikacja powinna wyświetlać ilość zebranych odpowiedzi dla każdej kategorii. Aplikacja nie powinna zapisywać statystyk odpowiedzi między różnymi sesjami (aktualizacja strony). 10 | 11 | Stan aplikacji powinien wyglądać następująco, nie należy dodawać nowych właściwości. 12 | 13 | ```bash 14 | state = { 15 | good: 0, 16 | neutral: 0, 17 | bad: 0 18 | } 19 | ``` 20 | 21 | Interfejs może wyglądać tak. 22 | 23 | ![preview](./mockup/step-1.png) 24 | 25 | ## Krok 2 26 | 27 | Rozszerz funkcjonalność aplikacji tak, by w interfejsie wyświetlało się więcej statystyk z zebranych odpowiedzi. Dodaj wyświetlanie ogólnej ilości zebranych odpowiedzi ze wszystkich kategorii i procent pozytywnych odpowiedzi. W tym celu stwórz metody wspomgające `countTotalFeedback()` i `countPositiveFeedbackPercentage()`, podliczające te wartości, bazując na danych w stanie (wyliczane dane). 28 | 29 | ![preview](./mockup/step-2.png) 30 | 31 | ## Krok 3 32 | 33 | Przeprowadź refaktor aplikacji. Stan aplikacji powinien pozostawać w głównym komponencie ``. 34 | 35 | - Przenieś wyświetlanie statystyki do oddzielnego komponentu 36 | ``. 37 | - Przenieś blok przycisków do komponentu 38 | ``. 39 | - Utwórz komponent `
    `, który renderuje sekcję z nagłówkami i dzieci (children). Obróć każdy z `` i `` w utworzony komponent sekcji. 40 | 41 | ## Krok 4 42 | 43 | Rozszerz funkcjonalność aplikacji tak, by blok statystyki renderował się tylko po nadejściu przynajmniej jednej odpowiedzi. Wiadomość o braku statystyk przenieś do komponentu ``. 44 | 45 | ![preview](./mockup/preview.gif) 46 | -------------------------------------------------------------------------------- /homework-02/feedback/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Виджет отзывов 4 | 5 | Как и большинство компаний, кафе Expresso собирает отзывы от своих клиентов. 6 | Твоя задача - создать приложение для сбора статистики. Есть всего три варианта 7 | обратной связи: хорошо, нейтрально и плохо. 8 | 9 | ## Шаг 1 10 | 11 | Приложение должно отображать количество собранных отзывов для каждой категории. 12 | Приложение не должно сохранять статистику отзывов между разными сессиями 13 | (обновление страницы). 14 | 15 | Состояние приложения обязательно должно быть следующего вида, добавлять новые 16 | свойства нельзя. 17 | 18 | ```bash 19 | state = { 20 | good: 0, 21 | neutral: 0, 22 | bad: 0 23 | } 24 | ``` 25 | 26 | Интерфейс может выглядеть так. 27 | 28 | ![preview](./mockup/step-1.png) 29 | 30 | ## Шаг 2 31 | 32 | Расширь функционал приложения так, чтобы в интерфейсе отображалось больше 33 | статистики о собранных отзывах. Добавь отображение общего количества собранных 34 | отзывов из всех категорий и процент положительных отзывов. Для этого создай 35 | вспомогательные методы `countTotalFeedback()` и 36 | `countPositiveFeedbackPercentage()`, подсчитывающие эти значения основываясь на 37 | данных в состоянии (вычисляемые данные). 38 | 39 | ![preview](./mockup/step-2.png) 40 | 41 | ## Шаг 3 42 | 43 | Выполни рефакторинг приложения. Состояние приложения должно оставаться в 44 | корневом компоненте ``. 45 | 46 | - Вынеси отображение статистики в отдельный компонент 47 | ``. 48 | - Вынеси блок кнопок в компонент 49 | ``. 50 | - Создай компонент `
    `, который рендерит секцию с заголовком и 51 | детей (children). Оберни каждый из `` и `` в 52 | созданный компонент секции. 53 | 54 | ## Шаг 4 55 | 56 | Расширь функционал приложения так, чтобы блок статистики рендерился только после 57 | того, как был собран хотя бы один отзыв. Сообщение об отсутствиии статистики 58 | вынеси в компонент ``. 59 | 60 | ![preview](./mockup/preview.gif) 61 | -------------------------------------------------------------------------------- /homework-01/transaction-history/transactions.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1e0700a2-5183-4291-85cc-2065a036a683", 4 | "type": "invoice", 5 | "amount": "964.82", 6 | "currency": "LRD" 7 | }, 8 | { 9 | "id": "a30f821b-4d25-4ff0-abdd-e340b3f0dd2b", 10 | "type": "payment", 11 | "amount": "686.50", 12 | "currency": "WST" 13 | }, 14 | { 15 | "id": "44dca67a-8e5a-4798-bf8e-b15efd4e1abd", 16 | "type": "invoice", 17 | "amount": "828.62", 18 | "currency": "UGX" 19 | }, 20 | { 21 | "id": "ea8ed3dc-2b68-4a53-905a-53ecb0adef33", 22 | "type": "withdrawal", 23 | "amount": "527.80", 24 | "currency": "ALL" 25 | }, 26 | { 27 | "id": "ea76146a-0b00-4b80-bc02-a8c822176712", 28 | "type": "withdrawal", 29 | "amount": "371.43", 30 | "currency": "MUR" 31 | }, 32 | { 33 | "id": "63ca02f9-d637-46b5-9237-f3b24425e029", 34 | "type": "payment", 35 | "amount": "862.44", 36 | "currency": "AUD" 37 | }, 38 | { 39 | "id": "ed0263e8-59a5-4bf1-87e0-2bb88e53dc34", 40 | "type": "withdrawal", 41 | "amount": "907.00", 42 | "currency": "GEL" 43 | }, 44 | { 45 | "id": "6013bad0-750c-4691-8bc2-d8f2b43969c4", 46 | "type": "withdrawal", 47 | "amount": "352.52", 48 | "currency": "UGX" 49 | }, 50 | { 51 | "id": "252c7be4-8b06-4fa7-8d42-61fb835b70d5", 52 | "type": "payment", 53 | "amount": "388.98", 54 | "currency": "TOP" 55 | }, 56 | { 57 | "id": "4eaab41b-b967-40ac-82ed-85fc66f646f1", 58 | "type": "deposit", 59 | "amount": "103.10", 60 | "currency": "BWP" 61 | }, 62 | { 63 | "id": "9648a350-8469-42d5-8bf3-18090de5fe67", 64 | "type": "withdrawal", 65 | "amount": "322.32", 66 | "currency": "MRO" 67 | }, 68 | { 69 | "id": "9c5c25fb-1a95-4b2f-8d1f-4c4426d677cc", 70 | "type": "invoice", 71 | "amount": "14.79", 72 | "currency": "PYG" 73 | }, 74 | { 75 | "id": "43ef232c-80e9-4d6f-b48a-b22405620de3", 76 | "type": "payment", 77 | "amount": "904.86", 78 | "currency": "CHF" 79 | }, 80 | { 81 | "id": "5161682e-e620-4019-ab0a-24ceb10fbd20", 82 | "type": "withdrawal", 83 | "amount": "307.08", 84 | "currency": "NOK" 85 | }, 86 | { 87 | "id": "7b119d71-42e6-4c42-a141-6818b07bb9ff", 88 | "type": "invoice", 89 | "amount": "275.07", 90 | "currency": "AWG" 91 | }, 92 | { 93 | "id": "a4f65722-65c4-4c28-b1f4-b8ed988bb205", 94 | "type": "deposit", 95 | "amount": "213.10", 96 | "currency": "STD" 97 | }, 98 | { 99 | "id": "c6e5784b-0ca3-48d6-86e5-b5128af5a523", 100 | "type": "invoice", 101 | "amount": "116.11", 102 | "currency": "CUP CUC" 103 | }, 104 | { 105 | "id": "c9ebed6a-3a02-4b49-ac0d-0534b51f2bfd", 106 | "type": "invoice", 107 | "amount": "878.67", 108 | "currency": "HKD" 109 | }, 110 | { 111 | "id": "a4a98b0e-b22c-438b-9f83-de2df52110c8", 112 | "type": "invoice", 113 | "amount": "725.03", 114 | "currency": "UYU UYI" 115 | }, 116 | { 117 | "id": "b39bfa7a-0166-4c47-94d6-87d20590f746", 118 | "type": "payment", 119 | "amount": "405.45", 120 | "currency": "MDL" 121 | } 122 | ] 123 | -------------------------------------------------------------------------------- /homework-04/README.md: -------------------------------------------------------------------------------- 1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Используй этот 4 | [шаблон React-проекта](https://github.com/goitacademy/react-homework-template#readme) 5 | как стартовую точку своего приложения. 6 | 7 | # Критерии приема 8 | 9 | - Создан репозиторий `goit-react-hw-05-movies` 10 | - При сдаче домашней работы есть ссылки: на исходные файлы и рабочие страницы 11 | каждого проекта на `GitHub Pages` 12 | - В состоянии компонентов хранится минимально необходимый набор данных, 13 | остальное вычисляется 14 | - При запуске кода задания, в консоли нету ошибок и предупреждений 15 | - Для каждого компонента есть отдельная папка с файлом React-компонента и файлом 16 | стилей 17 | - Для компонентов описаны `propTypes` 18 | - Все что компонент ожидает в виде пропов, передается ему при вызове 19 | - Имена компонентов понятные, описательные 20 | - JS-код чистый и понятный, используется `Prettier` 21 | - Стилизация выполнена `CSS-модулями` или `Styled Components`. 22 | 23 | ## Задание «Кинопоиск» 24 | 25 | Создай базовую маршрутизацию для приложения поиска и хранения фильмов. Превью 26 | рабочего приложения 27 | [смотри по ссылке](https://drive.google.com/file/d/1vR0hi3n1236Q5Bg4-se-8JVKD9UKSfId/view?usp=sharing). 28 | 29 | ## API themoviedb.org 30 | 31 | Для бекенда используй [themoviedb.org API](https://www.themoviedb.org/). 32 | Необходимо зарегистриваться (можно ввести произвольные данные) и получить 33 | API-ключ. В этой работе будут использоваться следующие ендпоинты. 34 | 35 | - [/trending/get-trending](https://developers.themoviedb.org/3/trending/get-trending) 36 | список самых популярных фильмов на сегодня для создания коллекции на главной 37 | странице. 38 | - [/search/search-movies](https://developers.themoviedb.org/3/search/search-movies) 39 | поиск кинофильма по ключевому слову на странице фильмов. 40 | - [/movies/get-movie-details](https://developers.themoviedb.org/3/movies/get-movie-details) 41 | запрос полной информации о фильме для страницы кинофильма. 42 | - [/movies/get-movie-credits](https://developers.themoviedb.org/3/movies/get-movie-credits) 43 | запрос информации о актёрском составе для страницы кинофильма. 44 | - [/movies/get-movie-reviews](https://developers.themoviedb.org/3/movies/get-movie-reviews) 45 | запрос обзоров для страницы кинофильма. 46 | 47 | [Ссылка на документацию](https://developers.themoviedb.org/3/getting-started/introduction) 48 | 49 | ## Маршруты 50 | 51 | В приложении должны быть следующие маршруты. Если пользователь зашел по 52 | несуществующему маршруту, его необходимо перенаправлять на домашнюю страницу. 53 | 54 | - `'/'` - компонент ``, домашняя страница со списком популярных 55 | кинофильмов. 56 | - `'/movies'` - компонент ``, страница поиска фильмов по ключевому 57 | слову. 58 | - `'/movies/:movieId'` - компонент ``, страница с детальной 59 | информацией о кинофильме. 60 | - `/movies/:movieId/cast` - компонент ``, информация о актерском составе. 61 | Рендерится на странице ``. 62 | - `/movies/:movieId/reviews` - компонент ``, информация об обзорах. 63 | Рендерится на странице ``. 64 | 65 | ## Code Splitting (разделение кода) 66 | 67 | Добавь асинхронную загрузку JS-кода для маршрутов приложения используя 68 | `React.lazy()` и `Suspense`. 69 | -------------------------------------------------------------------------------- /homework-04/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | Використовуй цей 4 | [шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme) 5 | як стартову точку своєї програми. 6 | 7 | # Критерії приймання 8 | 9 | - Створений репозиторій `goit-react-hw-05-movies` 10 | - При здачі домашньої роботи є посилання: на вихідні файли та робочі сторінки 11 | кожного проекту на `GitHub Pages`. 12 | - У стані компонентів зберігається мінімально необхідний набір даних, решта 13 | обчислюється 14 | - Під час запуску коду завдання в консолі відсутні помилки та попередження. 15 | - Для кожного компонента є окрема папка з файлом React-компонента та файлом 16 | стилів 17 | - Для компонентів описані `propTypes` 18 | - Все, що компонент очікує у вигляді пропсів, передається йому під час виклику. 19 | - Імена компонентів зрозумілі та описові 20 | - JS-код чистий і зрозумілий, використовується `Prettier` 21 | - Стилізація виконана `CSS-модулями` або `Styled Components`. 22 | 23 | ## Завдання «Кінопошук» 24 | 25 | Створи базову маршрутизацію для застосунку пошуку і зберігання фільмів. Прев'ю 26 | робочого застосунку 27 | [дивись за посиланням](https://drive.google.com/file/d/1vR0hi3n1236Q5Bg4-se-8JVKD9UKSfId/view?usp=sharing). 28 | 29 | ## API themoviedb.org 30 | 31 | Для бекенду використовуй [themoviedb.org API](https://www.themoviedb.org/). 32 | Необхідно зареєструватися (можна ввести довільні дані) та отримати API-ключ. У 33 | цій роботі будуть використовуватися наступні ендпоінти. 34 | 35 | - [/trending/get-trending](https://developers.themoviedb.org/3/trending/get-trending) 36 | список найпопулярніших фільмів на сьогодні для створення колекції на головній 37 | сторінці. 38 | - [/search/search-movies](https://developers.themoviedb.org/3/search/search-movies) 39 | пошук фільму за ключовим словом на сторінці фільмів. 40 | - [/movies/get-movie-details](https://developers.themoviedb.org/3/movies/get-movie-details) 41 | запит повної інформації про фільм для сторінки кінофільму. 42 | - [/movies/get-movie-credits](https://developers.themoviedb.org/3/movies/get-movie-credits) 43 | запит інформації про акторський склад для сторінки кінофільму. 44 | - [/movies/get-movie-reviews](https://developers.themoviedb.org/3/movies/get-movie-reviews) 45 | запит оглядів для сторінки кінофільму. 46 | 47 | [Посилання на документацію](https://developers.themoviedb.org/3/getting-started/introduction) 48 | 49 | ## Маршрути 50 | 51 | У застосунку повинні бути такі маршрути. Якщо користувач зайшов за неіснуючим 52 | маршрутом, його необхідно перенаправляти на домашню сторінку. 53 | 54 | - `'/'` – компонент ``, домашня сторінка зі списком популярних 55 | кінофільмів. 56 | - `'/movies'` – компонент ``, сторінка пошуку кінофільмів за 57 | ключовим словом. 58 | - `'/movies/:movieId'` – компонент ``, сторінка з детальною 59 | інформацією про кінофільм. 60 | - `/movies/:movieId/cast` – компонент ``, інформація про акторський склад. 61 | Рендериться на сторінці ``. 62 | - `/movies/:movieId/reviews` – компонент ``, інформація про огляди. 63 | Рендериться на сторінці ``. 64 | 65 | ## Code Splitting (поділ коду) 66 | 67 | Додай асинхронне завантаження JS-коду для маршрутів застосунку, використовуючи 68 | `React.lazy()` і `Suspense`. 69 | -------------------------------------------------------------------------------- /homework-04/README.pl.md: -------------------------------------------------------------------------------- 1 | **Czytaj w innych językach: [rosyjski](README.md), [ukraiński](README.ua.md).** 2 | 3 | Użyj tego 4 | [szablonu projektu React](https://github.com/goitacademy/react-homework-template#readme) 5 | jako punktu wyjścia dla swojej aplikacji. 6 | 7 | # Kryteria zaliczenia 8 | 9 | - Stworzone repozytorium `goit-react-hw-05-movies`. 10 | - W oddawanym zadaniu domowym są odnośniki: do oryginalnych plików i strony 11 | roboczej każdego projektu na `Netlify`. 12 | - W stanie komponentów przechowywany jest minimalny niezbędny zestaw danych, 13 | pozostałe są obliczane. 14 | - Po włączeniu kodu zadania, na konsoli nie ma błędów i ostrzeżeń. 15 | - Dla każdego komponentu stworzony został folder z plikiem komponentu React i 16 | plikiem stylów. 17 | - Dla komponentu opisane są `propTypes`. 18 | - Wszystko, czego komponent żąda w postaci propsów, przekazuje się do niego przy 19 | wywołaniu. 20 | - Nazwy komponentów są zrozumiałe, opisowe. 21 | - Kod JS jest czysty i zrozumiały, wykorzystuje się `Prettier`. 22 | - Stylizacja wykonania `CSS-modułami` lub `Styled Components`. 23 | 24 | ## Zadanie "Wyszukiwanie filmów" 25 | 26 | Stwórz bazowe trasowanie dla aplikacji do wyszukiwania i zapisywania filmów. 27 | Preview roboczej aplikacji 28 | [zobacz link](https://drive.google.com/file/d/1vR0hi3n1236Q5Bg4-se-8JVKD9UKSfId/view?usp=sharing). 29 | 30 | ## API themoviedb.org 31 | 32 | Do backendu wykorzystaj [themoviedb.org API](https://www.themoviedb.org/). 33 | Należy się zarejestrować (można wprowadzić dowolne dane) i pobrać klucz API. W 34 | tym zadaniu będzie się wykorzystywać następujące endpointy. 35 | 36 | - [/trending/get-trending](https://developers.themoviedb.org/3/trending/get-trending) 37 | lista najpopularniejszych filmów dzisiaj w celu utworzenia kolekcji na stronie 38 | głównej. 39 | - [/search/search-movies](https://developers.themoviedb.org/3/search/search-movies) 40 | wyszukiwanie filmu po słowie kluczu na stronie filmów. 41 | - [/movies/get-movie-details](https://developers.themoviedb.org/3/movies/get-movie-details) 42 | zapytanie o pełną informację o filmie dla strony filmu. 43 | - [/movies/get-movie-credits](https://developers.themoviedb.org/3/movies/get-movie-credits) 44 | zapytanie o informację o zespole aktorskim dla strony filmu. 45 | - [/movies/get-movie-reviews](https://developers.themoviedb.org/3/movies/get-movie-reviews) 46 | zapytanie o recenzje dla strony filmu. 47 | 48 | [Link do dokumentacji](https://developers.themoviedb.org/3/getting-started/introduction) 49 | 50 | ## Trasy 51 | 52 | W aplikacji powinny znaleźć się następujące trasy. Jeśli użytkownik poszedł 53 | nieistniejącą trasą, należy przekierować go na stronę główną. 54 | 55 | - `'/'` - komponent ``, strona domowa z listą popularnych filmów. 56 | - `'/movies'` - komponent ``, strona wyszukiwania filmów po słowie 57 | kluczu. 58 | - `'/movies/:movieId'` - komponent ``, strona ze szczegółowymi 59 | informacjami o filmie. 60 | - `/movies/:movieId/cast` - komponent ``, informacja o zespole aktorskim. 61 | Renderuje się na stronie ``. 62 | - `/movies/:movieId/reviews` - komponent ``, informacja o recenzjach. 63 | Renderuje się n stronie ``. 64 | 65 | ## Code Splitting (rozdzielenie kodu) 66 | 67 | Dodaj asynchroniczne ładownie kodu JS dla tras aplikacji, wykorzystując 68 | `React.lazy()` i `Suspense`. 69 | -------------------------------------------------------------------------------- /homework-03/image-finder/README.ua.md: -------------------------------------------------------------------------------- 1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).** 2 | 3 | # Пошук зображень 4 | 5 | Напиши застосунок пошуку зображень за ключовим словом. Прев'ю робочого застосунку [дивись за посиланням](https://drive.google.com/file/d/1oXCGyiq4uKwW0zzraZLKk4lh3voBlBzZ/view?usp=sharing). 6 | 7 | Створи компоненти ``, ``, ``, 8 | ``, ` 40 | 41 | 48 | 49 | 50 | ``` 51 | 52 | ## Опис компонента `` 53 | 54 | Список карток зображень. Створює DOM-елемент наступної структури. 55 | 56 | ```html 57 |
      58 | 59 |
    60 | ``` 61 | 62 | ## Опис компонента `` 63 | 64 | Компонент елемента списку із зображенням. Створює DOM-елемент наступної структури. 65 | 66 | ```html 67 |
  • 68 | 69 |
    • 70 | ``` 71 | 72 | ## Опис компонента ` 41 | 42 | 49 | 50 | 51 | ``` 52 | 53 | ## Opis komponentu `` 54 | 55 | Lista kart obrazków. Tworzy element DOM o następującej strukturze. 56 | 57 | ```html 58 |
      59 | 60 |
    61 | ``` 62 | 63 | ## Opis komponentu `` 64 | 65 | Komponent elementu listy z obrazem. Tworzy element DOM o następującej strukturze. 66 | 67 | ```html 68 |
  • 69 | 70 |
    • 71 | ``` 72 | 73 | ## Opis komponentu ` 50 | 51 | 58 | 59 | 60 | ``` 61 | 62 | ## Описание компонента `` 63 | 64 | Список карточек изображений. Создает DOM-элемент следующей структуры. 65 | 66 | ```html 67 |
      68 | 69 |
    70 | ``` 71 | 72 | ## Описание компонента `` 73 | 74 | Компонент элемента списка с изображением. Создает DOM-элемент следующей 75 | структуры. 76 | 77 | ```html 78 |
  • 79 | 80 |
    • 81 | ``` 82 | 83 | ## Описание компонента `