-
19 |
20 |
-
17 |
18 |
-
17 |
18 |
25 |
51 | ```
52 |
53 | ## Пример использования
54 |
55 | ```js
56 | import user from 'путь/к/user.json;
57 |
58 |
26 | 
31 |
35 |
36 |
31 | Petra Marica
32 |@pmarica
33 |Salvador, Brasil
34 |-
37 |
- 38 | Followers 39 | 1000 40 | 41 |
- 42 | Views 43 | 2000 44 | 45 |
- 46 | Likes 47 | 3000 48 | 49 |
23 |
49 | ```
50 |
51 | ## Przykład wykorzystania
52 |
53 | ```js
54 | import user from 'droga/do/user.json;
55 |
56 |
24 |
29 |
33 |
34 |
29 | Petra Marica
30 |@pmarica
31 |Salvador, Brasil
32 |-
35 |
- 36 | Followers 37 | 1000 38 | 39 |
- 40 | Views 41 | 2000 42 | 43 |
- 44 | Likes 45 | 3000 46 | 47 |
23 |
49 | ```
50 |
51 | ## Приклад використання
52 |
53 | ```js
54 | import user from 'путь/к/user.json;
55 |
56 |
24 |
29 |
33 |
34 |
29 | Petra Marica
30 |@pmarica
31 |Salvador, Brasil
32 |-
35 |
- 36 | Followers 37 | 1000 38 | 39 |
- 40 | Views 41 | 2000 42 | 43 |
- 44 | Likes 45 | 3000 46 | 47 |
`.
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 | `, 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 | 
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 | `, який би відображав статистику з переданих пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про статистику лежать у файлі [data.json](./data.json).
6 |
7 | 
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 | `
20 |
21 | Необходимо создать компонент `` принимающий один проп
22 | `items` - массив объектов транзакций из `transactions.json`. Компонент создает
23 | разметку таблицы. Каждая транзакция это строка таблицы. В примере приведена
24 | разметка двух транзакций.
25 |
26 | ```html
27 |
28 |
29 |
30 | Type
31 | Amount
32 | Currency
33 |
34 |
35 |
36 |
37 |
38 | Invoice
39 | 125
40 | USD
41 |
42 |
43 | Withdrawal
44 | 85
45 | USD
46 |
47 |
48 |
49 | ```
50 |
51 | ## Пример использования
52 |
53 | ```js
54 | import transactions from 'путь/к/transactions.json';
55 |
56 | `
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 | Type
25 | Amount
26 | Currency
27 |
28 |
29 |
30 |
31 |
32 | Invoice
33 | 125
34 | USD
35 |
36 |
37 | Withdrawal
38 | 85
39 | USD
40 |
41 |
42 |
43 | ```
44 |
45 | ## Przykład wykorzystania
46 |
47 | ```js
48 | import transactions from 'droga/do/transactions.json';
49 |
50 | `
17 |
18 | Необхідно створити компонент ``, який приймає один проп `items` – масив об'єктів транзакцій з `transactions.json`. Компонент створює розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена розмітка двох транзакцій.
19 |
20 | ```html
21 |
22 |
23 |
24 | Type
25 | Amount
26 | Currency
27 |
28 |
29 |
30 |
31 |
32 | Invoice
33 | 125
34 | USD
35 |
36 |
37 | Withdrawal
38 | 85
39 | USD
40 |
41 |
42 |
43 | ```
44 |
45 | ## Приклад використання
46 |
47 | ```js
48 | import transactions from 'путь/к/transactions.json';
49 |
50 | `.
45 |
46 | - Вынеси отображение статистики в отдельный компонент
47 | ``.
48 | - Вынеси блок кнопок в компонент
49 | ``.
50 | - Создай компонент ``, который рендерит секцию с заголовком и
51 | детей (children). Оберни каждый из `` и `` в
52 | созданный компонент секции.
53 |
54 | ## Шаг 4
55 |
56 | Расширь функционал приложения так, чтобы блок статистики рендерился только после
57 | того, как был собран хотя бы один отзыв. Сообщение об отсутствиии статистики
58 | вынеси в компонент ``.
59 |
60 | 
61 |
--------------------------------------------------------------------------------
/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 | 
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 | 
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 | 
46 |
--------------------------------------------------------------------------------
/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 | 
24 |
25 | ## Крок 2
26 |
27 | Розшир функціонал застосунку таким чином, щоб в інтерфейсі відображалося більше статистики про зібрані відгуки. Додай відображення загальної кількості зібраних відгуків з усіх категорій та відсоток позитивних відгуків. Для цього створи допоміжні методи `countTotalFeedback()` і `countPositiveFeedbackPercentage()`, які підраховують ці значення, ґрунтуючись на даних у стані (обчислювані дані).
28 |
29 | 
30 |
31 | ## Крок 3
32 |
33 | Виконай рефакторинг застосунку. Стан застосунку повинен залишатися у кореневому компоненті ``.
34 |
35 | - Винеси відображення статистики в окремий компонент
36 | ``.
37 | - Винеси блок кнопок в компонент
38 | ``.
39 | - Створи компонент ``, який рендерить секцію із заголовком і дітей (children). Обгорни кожен із `` і `` у створений компонент секції.
40 |
41 | ## Крок 4
42 |
43 | Розшир функціонал застосунку таким чином, щоб блок статистики рендерився тільки після того, як було зібрано хоча б один відгук. Повідомлення про відсутність статистики винеси в компонент ``.
44 |
45 | 
46 |
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/preview.gif
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/step-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/step-1.png
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/step-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/step-2.png
--------------------------------------------------------------------------------
/homework-02/phonebook/README.md:
--------------------------------------------------------------------------------
1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
2 |
3 | # Телефонная книга
4 |
5 | Напиши приложение хранения контактов телефонной книги.
6 |
7 | ## Шаг 1
8 |
9 | Приложение должно состоять из формы и списка контактов. На текущем шаге реализуй
10 | добавление имени контакта и отображение списка контактов. Приложение не должно
11 | сохранять контакты между разными сессиями (обновление страницы).
12 |
13 | Используй эту разметку инпута с встроенной валидацией для имени контакта.
14 |
15 | ```html
16 |
23 | ```
24 |
25 | Состояние хранящееся в родительском компоненте `` обязательно должно быть
26 | следующего вида, добавлять новые свойства нельзя.
27 |
28 | ```bash
29 | state = {
30 | contacts: [],
31 | name: ''
32 | }
33 | ```
34 |
35 | Каждый контакт должен быть объектом со свойствами `name` и `id`. Для генерации
36 | идентификаторов используй любой подходящий пакет, например
37 | [nanoid](https://www.npmjs.com/package/nanoid). После завершения этого шага,
38 | приложение должно выглядеть примерно так.
39 |
40 | 
41 |
42 | ## Шаг 2
43 |
44 | Расширь функционал приложения, позволив пользователям добавлять номера
45 | телефонов. Для этого добавь `` в форму, и свойство для
46 | хранения его значения в состоянии.
47 |
48 | ```bash
49 | state = {
50 | contacts: [],
51 | name: '',
52 | number: ''
53 | }
54 | ```
55 |
56 | Используй эту разметку инпута с встроенной валидацией для номера контакта.
57 |
58 | ```html
59 |
66 | ```
67 |
68 | После завершения этого шага, приложение должно выглядеть примерно так.
69 |
70 | 
71 |
72 | ## Шаг 3
73 |
74 | Добавь поле поиска, которое можно использовать для фильтрации списка контактов
75 | по имени.
76 |
77 | - Поле поиска это инпут без формы, значение которого записывается в состояние
78 | (контролируемый элемент).
79 | - Логика фильтрации должна быть нечувствительна к регистру.
80 |
81 | ```bash
82 | state = {
83 | contacts: [],
84 | filter: '',
85 | name: '',
86 | number: ''
87 | }
88 | ```
89 |
90 | 
91 |
92 | Когда мы работаем над новым функционалом, бывает удобно жестко закодировать
93 | некоторые данные в состояние. Это избавит от необходимости вручную вводить
94 | данные в интерфейсе для тестирования работы нового функционала. Например можно
95 | использовать такое начальное состояние.
96 |
97 | ```bash
98 | state = {
99 | contacts: [
100 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
101 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
102 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
103 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
104 | ],
105 | filter: '',
106 | name: '',
107 | number: ''
108 | }
109 | ```
110 |
111 | ## Шаг 4
112 |
113 | Если твое приложение реализовано в одном компоненте ``, выполни
114 | рефакторинг, выделив подходящие части в отдельные компоненты. В состоянии
115 | корневого компонента `` останутся только свойства `contacts` и `filter`.
116 |
117 | ```bash
118 | state = {
119 | contacts: [],
120 | filter: ''
121 | }
122 | ```
123 |
124 | Достаточно выделить четыре компонента: форма добавления контактов, список
125 | контактов, элемент списка контактов и фильтр поиска.
126 |
127 | После рефакторинга корневой компонент приложения будет выглядеть так.
128 |
129 | ```jsx
130 |
131 | Phonebook
132 | Contacts
135 | ` powinien wyglądać następująco, nie należy dodawać nowych właściwości.
24 |
25 | ```bash
26 | state = {
27 | contacts: [],
28 | name: ''
29 | }
30 | ```
31 |
32 | Każdy kontakt powinien być obiektem z właściwościami `name` i `id`. Do generowania identyfikatorów wykorzystaj dowolną pasującą paczkę, na przykład [nanoid](https://www.npmjs.com/package/nanoid). Po tym kroku aplikacja powinna wyglądać mniej więcej tak.
33 |
34 | 
35 |
36 | ## Krok 2
37 |
38 | Rozszerz funkcjonalność aplikacji, pozwalając użytkownikom dodawać numery telefonów. W tym celu dodaj do formularza `` oraz właściwość dla przechowywania jego wartości w stanie.
39 |
40 | ```bash
41 | state = {
42 | contacts: [],
43 | name: '',
44 | number: ''
45 | }
46 | ```
47 |
48 | Wykorzystaj układ input z wmontowaną walidacją numeru kontaktu.
49 |
50 | ```html
51 |
58 | ```
59 |
60 | Po tym kroku aplikacja powinna działać mniej więcej tak.
61 |
62 | 
63 |
64 | ## Krok 3
65 |
66 | Dodaj pole wyszukiwania, które można wykorzystać do filtrowania listy kontaktów po nazwie.
67 |
68 | - Pole wyszukiwania to input bez formularza, którego wartość zapisuje się w stanie (kontrolowany element).
69 | - Logika filtrowania powinna być niewrażliwa na wielkość liter.
70 |
71 | ```bash
72 | state = {
73 | contacts: [],
74 | filter: '',
75 | name: '',
76 | number: ''
77 | }
78 | ```
79 |
80 | 
81 |
82 | Gdy pracujemy nad nową funkcjonalnością, wygodne może być twarde zakodowanie niektórych danych w stanie. Sprawi to, że nie będziemy musieli ręcznie wprowadzać danych do interfejsu, aby przetestować pracę nowej funkcjonalności. Można na przykład wykorzystać taki stan początkowy.
83 |
84 | ```bash
85 | state = {
86 | contacts: [
87 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
88 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
89 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
90 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
91 | ],
92 | filter: '',
93 | name: '',
94 | number: ''
95 | }
96 | ```
97 |
98 | ## Krok 4
99 |
100 | Jeżeli twoja aplikacja jest realizowana w jednym komponencie ``, wykonaj refaktor, rozdzielając pasujące części do oddzielnych komponentów. W stanie głównego komponentu `` zostaną tylko właściwości `contacts` i `filter`.
101 |
102 | ```bash
103 | state = {
104 | contacts: [],
105 | filter: ''
106 | }
107 | ```
108 | Wystarczy wydzielić cztery komponenty: formularz dodania kontaktów, listę kontaktów, element listy kontaktów i filtr wyszukiwania.
109 |
110 | Po refaktorze źródłowy komponent aplikacji będzie wyglądał tak.
111 |
112 | ```jsx
113 |
114 | Phonebook
115 | Contacts
118 | `, обов'язково повинен бути наступного вигляду, додавати нові властивості не можна.
24 |
25 | ```bash
26 | state = {
27 | contacts: [],
28 | name: ''
29 | }
30 | ```
31 |
32 | Кожен контакт повинен бути об'єктом з властивостями `name` та `id`. Для генерації ідентифікаторів використовуй будь-який відповідний пакет, наприклад [nanoid](https://www.npmjs.com/package/nanoid). Після завершення цього кроку, застосунок повинен виглядати приблизно так.
33 |
34 | 
35 |
36 | ## Крок 2
37 |
38 | Розшир функціонал застосунку, дозволивши користувачам додавати номери телефонів. Для цього додай `` у форму і властивість для зберігання його значення в стані.
39 |
40 | ```bash
41 | state = {
42 | contacts: [],
43 | name: '',
44 | number: ''
45 | }
46 | ```
47 |
48 | Використовуй цю розмітку інпуту з вбудованою валідацією для номеру контакту.
49 |
50 | ```html
51 |
58 | ```
59 |
60 | Після завершення цього кроку, застосунок повинен виглядати приблизно так.
61 |
62 | 
63 |
64 | ## Крок 3
65 |
66 | Додай поле пошуку, яке можна використовувати для фільтрації списку контактів за ім'ям.
67 |
68 | - Поле пошуку – це інпут без форми, значення якого записується у стан (контрольований елемент).
69 | - Логіка фільтрації повинна бути нечутливою до регістру.
70 |
71 | ```bash
72 | state = {
73 | contacts: [],
74 | filter: '',
75 | name: '',
76 | number: ''
77 | }
78 | ```
79 |
80 | 
81 |
82 | Коли ми працюємо над новим функціоналом, буває зручно жорстко закодувати деякі дані у стан. Це позбавить необхідності вручну вводити дані в інтерфейсі для тестування роботи нового функціоналу. Наприклад, можна використовувати такий початковий стан.
83 |
84 | ```bash
85 | state = {
86 | contacts: [
87 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
88 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
89 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
90 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
91 | ],
92 | filter: '',
93 | name: '',
94 | number: ''
95 | }
96 | ```
97 |
98 | ## Крок 4
99 |
100 | Якщо твій застосунок реалізований в одному компоненті ``, виконай рефакторинг, виділивши відповідні частини в окремі компоненти. У стані кореневого компонента `` залишаться тільки властивості `contacts` і `filter`.
101 |
102 | ```bash
103 | state = {
104 | contacts: [],
105 | filter: ''
106 | }
107 | ```
108 |
109 | Достатньо виділити чотири компоненти: форма додавання контактів, список контактів, елемент списку контактів та фільтр пошуку.
110 |
111 | Після рефакторингу кореневий компонент програми виглядатиме так.
112 |
113 | ```jsx
114 |
115 | Phonebook
116 | Contacts
119 | `, ``, ``,
10 | ``, `
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 |
`.
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 | `, який би відображав статистику з переданих пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про статистику лежать у файлі [data.json](./data.json).
6 |
7 | 
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 | `
20 |
21 | Необходимо создать компонент `` принимающий один проп
22 | `items` - массив объектов транзакций из `transactions.json`. Компонент создает
23 | разметку таблицы. Каждая транзакция это строка таблицы. В примере приведена
24 | разметка двух транзакций.
25 |
26 | ```html
27 |
28 |
29 |
30 | Type
31 | Amount
32 | Currency
33 |
34 |
35 |
36 |
37 |
38 | Invoice
39 | 125
40 | USD
41 |
42 |
43 | Withdrawal
44 | 85
45 | USD
46 |
47 |
48 |
49 | ```
50 |
51 | ## Пример использования
52 |
53 | ```js
54 | import transactions from 'путь/к/transactions.json';
55 |
56 | `
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 | Type
25 | Amount
26 | Currency
27 |
28 |
29 |
30 |
31 |
32 | Invoice
33 | 125
34 | USD
35 |
36 |
37 | Withdrawal
38 | 85
39 | USD
40 |
41 |
42 |
43 | ```
44 |
45 | ## Przykład wykorzystania
46 |
47 | ```js
48 | import transactions from 'droga/do/transactions.json';
49 |
50 | `
17 |
18 | Необхідно створити компонент ``, який приймає один проп `items` – масив об'єктів транзакцій з `transactions.json`. Компонент створює розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена розмітка двох транзакцій.
19 |
20 | ```html
21 |
22 |
23 |
24 | Type
25 | Amount
26 | Currency
27 |
28 |
29 |
30 |
31 |
32 | Invoice
33 | 125
34 | USD
35 |
36 |
37 | Withdrawal
38 | 85
39 | USD
40 |
41 |
42 |
43 | ```
44 |
45 | ## Приклад використання
46 |
47 | ```js
48 | import transactions from 'путь/к/transactions.json';
49 |
50 | `.
45 |
46 | - Вынеси отображение статистики в отдельный компонент
47 | ``.
48 | - Вынеси блок кнопок в компонент
49 | ``.
50 | - Создай компонент ``, который рендерит секцию с заголовком и
51 | детей (children). Оберни каждый из `` и `` в
52 | созданный компонент секции.
53 |
54 | ## Шаг 4
55 |
56 | Расширь функционал приложения так, чтобы блок статистики рендерился только после
57 | того, как был собран хотя бы один отзыв. Сообщение об отсутствиии статистики
58 | вынеси в компонент ``.
59 |
60 | 
61 |
--------------------------------------------------------------------------------
/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 | 
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 | 
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 | 
46 |
--------------------------------------------------------------------------------
/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 | 
24 |
25 | ## Крок 2
26 |
27 | Розшир функціонал застосунку таким чином, щоб в інтерфейсі відображалося більше статистики про зібрані відгуки. Додай відображення загальної кількості зібраних відгуків з усіх категорій та відсоток позитивних відгуків. Для цього створи допоміжні методи `countTotalFeedback()` і `countPositiveFeedbackPercentage()`, які підраховують ці значення, ґрунтуючись на даних у стані (обчислювані дані).
28 |
29 | 
30 |
31 | ## Крок 3
32 |
33 | Виконай рефакторинг застосунку. Стан застосунку повинен залишатися у кореневому компоненті ``.
34 |
35 | - Винеси відображення статистики в окремий компонент
36 | ``.
37 | - Винеси блок кнопок в компонент
38 | ``.
39 | - Створи компонент ``, який рендерить секцію із заголовком і дітей (children). Обгорни кожен із `` і `` у створений компонент секції.
40 |
41 | ## Крок 4
42 |
43 | Розшир функціонал застосунку таким чином, щоб блок статистики рендерився тільки після того, як було зібрано хоча б один відгук. Повідомлення про відсутність статистики винеси в компонент ``.
44 |
45 | 
46 |
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/preview.gif
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/step-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/step-1.png
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/step-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/step-2.png
--------------------------------------------------------------------------------
/homework-02/phonebook/README.md:
--------------------------------------------------------------------------------
1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
2 |
3 | # Телефонная книга
4 |
5 | Напиши приложение хранения контактов телефонной книги.
6 |
7 | ## Шаг 1
8 |
9 | Приложение должно состоять из формы и списка контактов. На текущем шаге реализуй
10 | добавление имени контакта и отображение списка контактов. Приложение не должно
11 | сохранять контакты между разными сессиями (обновление страницы).
12 |
13 | Используй эту разметку инпута с встроенной валидацией для имени контакта.
14 |
15 | ```html
16 |
23 | ```
24 |
25 | Состояние хранящееся в родительском компоненте `` обязательно должно быть
26 | следующего вида, добавлять новые свойства нельзя.
27 |
28 | ```bash
29 | state = {
30 | contacts: [],
31 | name: ''
32 | }
33 | ```
34 |
35 | Каждый контакт должен быть объектом со свойствами `name` и `id`. Для генерации
36 | идентификаторов используй любой подходящий пакет, например
37 | [nanoid](https://www.npmjs.com/package/nanoid). После завершения этого шага,
38 | приложение должно выглядеть примерно так.
39 |
40 | 
41 |
42 | ## Шаг 2
43 |
44 | Расширь функционал приложения, позволив пользователям добавлять номера
45 | телефонов. Для этого добавь `` в форму, и свойство для
46 | хранения его значения в состоянии.
47 |
48 | ```bash
49 | state = {
50 | contacts: [],
51 | name: '',
52 | number: ''
53 | }
54 | ```
55 |
56 | Используй эту разметку инпута с встроенной валидацией для номера контакта.
57 |
58 | ```html
59 |
66 | ```
67 |
68 | После завершения этого шага, приложение должно выглядеть примерно так.
69 |
70 | 
71 |
72 | ## Шаг 3
73 |
74 | Добавь поле поиска, которое можно использовать для фильтрации списка контактов
75 | по имени.
76 |
77 | - Поле поиска это инпут без формы, значение которого записывается в состояние
78 | (контролируемый элемент).
79 | - Логика фильтрации должна быть нечувствительна к регистру.
80 |
81 | ```bash
82 | state = {
83 | contacts: [],
84 | filter: '',
85 | name: '',
86 | number: ''
87 | }
88 | ```
89 |
90 | 
91 |
92 | Когда мы работаем над новым функционалом, бывает удобно жестко закодировать
93 | некоторые данные в состояние. Это избавит от необходимости вручную вводить
94 | данные в интерфейсе для тестирования работы нового функционала. Например можно
95 | использовать такое начальное состояние.
96 |
97 | ```bash
98 | state = {
99 | contacts: [
100 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
101 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
102 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
103 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
104 | ],
105 | filter: '',
106 | name: '',
107 | number: ''
108 | }
109 | ```
110 |
111 | ## Шаг 4
112 |
113 | Если твое приложение реализовано в одном компоненте ``, выполни
114 | рефакторинг, выделив подходящие части в отдельные компоненты. В состоянии
115 | корневого компонента `` останутся только свойства `contacts` и `filter`.
116 |
117 | ```bash
118 | state = {
119 | contacts: [],
120 | filter: ''
121 | }
122 | ```
123 |
124 | Достаточно выделить четыре компонента: форма добавления контактов, список
125 | контактов, элемент списка контактов и фильтр поиска.
126 |
127 | После рефакторинга корневой компонент приложения будет выглядеть так.
128 |
129 | ```jsx
130 |
131 | Phonebook
132 | Contacts
135 | ` powinien wyglądać następująco, nie należy dodawać nowych właściwości.
24 |
25 | ```bash
26 | state = {
27 | contacts: [],
28 | name: ''
29 | }
30 | ```
31 |
32 | Każdy kontakt powinien być obiektem z właściwościami `name` i `id`. Do generowania identyfikatorów wykorzystaj dowolną pasującą paczkę, na przykład [nanoid](https://www.npmjs.com/package/nanoid). Po tym kroku aplikacja powinna wyglądać mniej więcej tak.
33 |
34 | 
35 |
36 | ## Krok 2
37 |
38 | Rozszerz funkcjonalność aplikacji, pozwalając użytkownikom dodawać numery telefonów. W tym celu dodaj do formularza `` oraz właściwość dla przechowywania jego wartości w stanie.
39 |
40 | ```bash
41 | state = {
42 | contacts: [],
43 | name: '',
44 | number: ''
45 | }
46 | ```
47 |
48 | Wykorzystaj układ input z wmontowaną walidacją numeru kontaktu.
49 |
50 | ```html
51 |
58 | ```
59 |
60 | Po tym kroku aplikacja powinna działać mniej więcej tak.
61 |
62 | 
63 |
64 | ## Krok 3
65 |
66 | Dodaj pole wyszukiwania, które można wykorzystać do filtrowania listy kontaktów po nazwie.
67 |
68 | - Pole wyszukiwania to input bez formularza, którego wartość zapisuje się w stanie (kontrolowany element).
69 | - Logika filtrowania powinna być niewrażliwa na wielkość liter.
70 |
71 | ```bash
72 | state = {
73 | contacts: [],
74 | filter: '',
75 | name: '',
76 | number: ''
77 | }
78 | ```
79 |
80 | 
81 |
82 | Gdy pracujemy nad nową funkcjonalnością, wygodne może być twarde zakodowanie niektórych danych w stanie. Sprawi to, że nie będziemy musieli ręcznie wprowadzać danych do interfejsu, aby przetestować pracę nowej funkcjonalności. Można na przykład wykorzystać taki stan początkowy.
83 |
84 | ```bash
85 | state = {
86 | contacts: [
87 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
88 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
89 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
90 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
91 | ],
92 | filter: '',
93 | name: '',
94 | number: ''
95 | }
96 | ```
97 |
98 | ## Krok 4
99 |
100 | Jeżeli twoja aplikacja jest realizowana w jednym komponencie ``, wykonaj refaktor, rozdzielając pasujące części do oddzielnych komponentów. W stanie głównego komponentu `` zostaną tylko właściwości `contacts` i `filter`.
101 |
102 | ```bash
103 | state = {
104 | contacts: [],
105 | filter: ''
106 | }
107 | ```
108 | Wystarczy wydzielić cztery komponenty: formularz dodania kontaktów, listę kontaktów, element listy kontaktów i filtr wyszukiwania.
109 |
110 | Po refaktorze źródłowy komponent aplikacji będzie wyglądał tak.
111 |
112 | ```jsx
113 |
114 | Phonebook
115 | Contacts
118 | `, обов'язково повинен бути наступного вигляду, додавати нові властивості не можна.
24 |
25 | ```bash
26 | state = {
27 | contacts: [],
28 | name: ''
29 | }
30 | ```
31 |
32 | Кожен контакт повинен бути об'єктом з властивостями `name` та `id`. Для генерації ідентифікаторів використовуй будь-який відповідний пакет, наприклад [nanoid](https://www.npmjs.com/package/nanoid). Після завершення цього кроку, застосунок повинен виглядати приблизно так.
33 |
34 | 
35 |
36 | ## Крок 2
37 |
38 | Розшир функціонал застосунку, дозволивши користувачам додавати номери телефонів. Для цього додай `` у форму і властивість для зберігання його значення в стані.
39 |
40 | ```bash
41 | state = {
42 | contacts: [],
43 | name: '',
44 | number: ''
45 | }
46 | ```
47 |
48 | Використовуй цю розмітку інпуту з вбудованою валідацією для номеру контакту.
49 |
50 | ```html
51 |
58 | ```
59 |
60 | Після завершення цього кроку, застосунок повинен виглядати приблизно так.
61 |
62 | 
63 |
64 | ## Крок 3
65 |
66 | Додай поле пошуку, яке можна використовувати для фільтрації списку контактів за ім'ям.
67 |
68 | - Поле пошуку – це інпут без форми, значення якого записується у стан (контрольований елемент).
69 | - Логіка фільтрації повинна бути нечутливою до регістру.
70 |
71 | ```bash
72 | state = {
73 | contacts: [],
74 | filter: '',
75 | name: '',
76 | number: ''
77 | }
78 | ```
79 |
80 | 
81 |
82 | Коли ми працюємо над новим функціоналом, буває зручно жорстко закодувати деякі дані у стан. Це позбавить необхідності вручну вводити дані в інтерфейсі для тестування роботи нового функціоналу. Наприклад, можна використовувати такий початковий стан.
83 |
84 | ```bash
85 | state = {
86 | contacts: [
87 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
88 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
89 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
90 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
91 | ],
92 | filter: '',
93 | name: '',
94 | number: ''
95 | }
96 | ```
97 |
98 | ## Крок 4
99 |
100 | Якщо твій застосунок реалізований в одному компоненті ``, виконай рефакторинг, виділивши відповідні частини в окремі компоненти. У стані кореневого компонента `` залишаться тільки властивості `contacts` і `filter`.
101 |
102 | ```bash
103 | state = {
104 | contacts: [],
105 | filter: ''
106 | }
107 | ```
108 |
109 | Достатньо виділити чотири компоненти: форма додавання контактів, список контактів, елемент списку контактів та фільтр пошуку.
110 |
111 | Після рефакторингу кореневий компонент програми виглядатиме так.
112 |
113 | ```jsx
114 |
115 | Phonebook
116 | Contacts
119 | `, ``, ``,
10 | ``, `
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 |
`.
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 | `
20 |
21 | Необходимо создать компонент `` принимающий один проп
22 | `items` - массив объектов транзакций из `transactions.json`. Компонент создает
23 | разметку таблицы. Каждая транзакция это строка таблицы. В примере приведена
24 | разметка двух транзакций.
25 |
26 | ```html
27 |
28 |
29 |
30 | Type
31 | Amount
32 | Currency
33 |
34 |
35 |
36 |
37 |
38 | Invoice
39 | 125
40 | USD
41 |
42 |
43 | Withdrawal
44 | 85
45 | USD
46 |
47 |
48 |
49 | ```
50 |
51 | ## Пример использования
52 |
53 | ```js
54 | import transactions from 'путь/к/transactions.json';
55 |
56 | `
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 | Type
25 | Amount
26 | Currency
27 |
28 |
29 |
30 |
31 |
32 | Invoice
33 | 125
34 | USD
35 |
36 |
37 | Withdrawal
38 | 85
39 | USD
40 |
41 |
42 |
43 | ```
44 |
45 | ## Przykład wykorzystania
46 |
47 | ```js
48 | import transactions from 'droga/do/transactions.json';
49 |
50 | `
17 |
18 | Необхідно створити компонент ``, який приймає один проп `items` – масив об'єктів транзакцій з `transactions.json`. Компонент створює розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена розмітка двох транзакцій.
19 |
20 | ```html
21 |
22 |
23 |
24 | Type
25 | Amount
26 | Currency
27 |
28 |
29 |
30 |
31 |
32 | Invoice
33 | 125
34 | USD
35 |
36 |
37 | Withdrawal
38 | 85
39 | USD
40 |
41 |
42 |
43 | ```
44 |
45 | ## Приклад використання
46 |
47 | ```js
48 | import transactions from 'путь/к/transactions.json';
49 |
50 | `.
45 |
46 | - Вынеси отображение статистики в отдельный компонент
47 | ``.
48 | - Вынеси блок кнопок в компонент
49 | ``.
50 | - Создай компонент ``, который рендерит секцию с заголовком и
51 | детей (children). Оберни каждый из `` и `` в
52 | созданный компонент секции.
53 |
54 | ## Шаг 4
55 |
56 | Расширь функционал приложения так, чтобы блок статистики рендерился только после
57 | того, как был собран хотя бы один отзыв. Сообщение об отсутствиии статистики
58 | вынеси в компонент ``.
59 |
60 | 
61 |
--------------------------------------------------------------------------------
/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 | 
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 | 
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 | 
46 |
--------------------------------------------------------------------------------
/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 | 
24 |
25 | ## Крок 2
26 |
27 | Розшир функціонал застосунку таким чином, щоб в інтерфейсі відображалося більше статистики про зібрані відгуки. Додай відображення загальної кількості зібраних відгуків з усіх категорій та відсоток позитивних відгуків. Для цього створи допоміжні методи `countTotalFeedback()` і `countPositiveFeedbackPercentage()`, які підраховують ці значення, ґрунтуючись на даних у стані (обчислювані дані).
28 |
29 | 
30 |
31 | ## Крок 3
32 |
33 | Виконай рефакторинг застосунку. Стан застосунку повинен залишатися у кореневому компоненті ``.
34 |
35 | - Винеси відображення статистики в окремий компонент
36 | ``.
37 | - Винеси блок кнопок в компонент
38 | ``.
39 | - Створи компонент ``, який рендерить секцію із заголовком і дітей (children). Обгорни кожен із `` і `` у створений компонент секції.
40 |
41 | ## Крок 4
42 |
43 | Розшир функціонал застосунку таким чином, щоб блок статистики рендерився тільки після того, як було зібрано хоча б один відгук. Повідомлення про відсутність статистики винеси в компонент ``.
44 |
45 | 
46 |
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/preview.gif
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/step-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/step-1.png
--------------------------------------------------------------------------------
/homework-02/feedback/mockup/step-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/feedback/mockup/step-2.png
--------------------------------------------------------------------------------
/homework-02/phonebook/README.md:
--------------------------------------------------------------------------------
1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
2 |
3 | # Телефонная книга
4 |
5 | Напиши приложение хранения контактов телефонной книги.
6 |
7 | ## Шаг 1
8 |
9 | Приложение должно состоять из формы и списка контактов. На текущем шаге реализуй
10 | добавление имени контакта и отображение списка контактов. Приложение не должно
11 | сохранять контакты между разными сессиями (обновление страницы).
12 |
13 | Используй эту разметку инпута с встроенной валидацией для имени контакта.
14 |
15 | ```html
16 |
23 | ```
24 |
25 | Состояние хранящееся в родительском компоненте `` обязательно должно быть
26 | следующего вида, добавлять новые свойства нельзя.
27 |
28 | ```bash
29 | state = {
30 | contacts: [],
31 | name: ''
32 | }
33 | ```
34 |
35 | Каждый контакт должен быть объектом со свойствами `name` и `id`. Для генерации
36 | идентификаторов используй любой подходящий пакет, например
37 | [nanoid](https://www.npmjs.com/package/nanoid). После завершения этого шага,
38 | приложение должно выглядеть примерно так.
39 |
40 | 
41 |
42 | ## Шаг 2
43 |
44 | Расширь функционал приложения, позволив пользователям добавлять номера
45 | телефонов. Для этого добавь `` в форму, и свойство для
46 | хранения его значения в состоянии.
47 |
48 | ```bash
49 | state = {
50 | contacts: [],
51 | name: '',
52 | number: ''
53 | }
54 | ```
55 |
56 | Используй эту разметку инпута с встроенной валидацией для номера контакта.
57 |
58 | ```html
59 |
66 | ```
67 |
68 | После завершения этого шага, приложение должно выглядеть примерно так.
69 |
70 | 
71 |
72 | ## Шаг 3
73 |
74 | Добавь поле поиска, которое можно использовать для фильтрации списка контактов
75 | по имени.
76 |
77 | - Поле поиска это инпут без формы, значение которого записывается в состояние
78 | (контролируемый элемент).
79 | - Логика фильтрации должна быть нечувствительна к регистру.
80 |
81 | ```bash
82 | state = {
83 | contacts: [],
84 | filter: '',
85 | name: '',
86 | number: ''
87 | }
88 | ```
89 |
90 | 
91 |
92 | Когда мы работаем над новым функционалом, бывает удобно жестко закодировать
93 | некоторые данные в состояние. Это избавит от необходимости вручную вводить
94 | данные в интерфейсе для тестирования работы нового функционала. Например можно
95 | использовать такое начальное состояние.
96 |
97 | ```bash
98 | state = {
99 | contacts: [
100 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
101 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
102 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
103 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
104 | ],
105 | filter: '',
106 | name: '',
107 | number: ''
108 | }
109 | ```
110 |
111 | ## Шаг 4
112 |
113 | Если твое приложение реализовано в одном компоненте ``, выполни
114 | рефакторинг, выделив подходящие части в отдельные компоненты. В состоянии
115 | корневого компонента `` останутся только свойства `contacts` и `filter`.
116 |
117 | ```bash
118 | state = {
119 | contacts: [],
120 | filter: ''
121 | }
122 | ```
123 |
124 | Достаточно выделить четыре компонента: форма добавления контактов, список
125 | контактов, элемент списка контактов и фильтр поиска.
126 |
127 | После рефакторинга корневой компонент приложения будет выглядеть так.
128 |
129 | ```jsx
130 |
131 | Phonebook
132 | Contacts
135 | ` powinien wyglądać następująco, nie należy dodawać nowych właściwości.
24 |
25 | ```bash
26 | state = {
27 | contacts: [],
28 | name: ''
29 | }
30 | ```
31 |
32 | Każdy kontakt powinien być obiektem z właściwościami `name` i `id`. Do generowania identyfikatorów wykorzystaj dowolną pasującą paczkę, na przykład [nanoid](https://www.npmjs.com/package/nanoid). Po tym kroku aplikacja powinna wyglądać mniej więcej tak.
33 |
34 | 
35 |
36 | ## Krok 2
37 |
38 | Rozszerz funkcjonalność aplikacji, pozwalając użytkownikom dodawać numery telefonów. W tym celu dodaj do formularza `` oraz właściwość dla przechowywania jego wartości w stanie.
39 |
40 | ```bash
41 | state = {
42 | contacts: [],
43 | name: '',
44 | number: ''
45 | }
46 | ```
47 |
48 | Wykorzystaj układ input z wmontowaną walidacją numeru kontaktu.
49 |
50 | ```html
51 |
58 | ```
59 |
60 | Po tym kroku aplikacja powinna działać mniej więcej tak.
61 |
62 | 
63 |
64 | ## Krok 3
65 |
66 | Dodaj pole wyszukiwania, które można wykorzystać do filtrowania listy kontaktów po nazwie.
67 |
68 | - Pole wyszukiwania to input bez formularza, którego wartość zapisuje się w stanie (kontrolowany element).
69 | - Logika filtrowania powinna być niewrażliwa na wielkość liter.
70 |
71 | ```bash
72 | state = {
73 | contacts: [],
74 | filter: '',
75 | name: '',
76 | number: ''
77 | }
78 | ```
79 |
80 | 
81 |
82 | Gdy pracujemy nad nową funkcjonalnością, wygodne może być twarde zakodowanie niektórych danych w stanie. Sprawi to, że nie będziemy musieli ręcznie wprowadzać danych do interfejsu, aby przetestować pracę nowej funkcjonalności. Można na przykład wykorzystać taki stan początkowy.
83 |
84 | ```bash
85 | state = {
86 | contacts: [
87 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
88 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
89 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
90 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
91 | ],
92 | filter: '',
93 | name: '',
94 | number: ''
95 | }
96 | ```
97 |
98 | ## Krok 4
99 |
100 | Jeżeli twoja aplikacja jest realizowana w jednym komponencie ``, wykonaj refaktor, rozdzielając pasujące części do oddzielnych komponentów. W stanie głównego komponentu `` zostaną tylko właściwości `contacts` i `filter`.
101 |
102 | ```bash
103 | state = {
104 | contacts: [],
105 | filter: ''
106 | }
107 | ```
108 | Wystarczy wydzielić cztery komponenty: formularz dodania kontaktów, listę kontaktów, element listy kontaktów i filtr wyszukiwania.
109 |
110 | Po refaktorze źródłowy komponent aplikacji będzie wyglądał tak.
111 |
112 | ```jsx
113 |
114 | Phonebook
115 | Contacts
118 | `, обов'язково повинен бути наступного вигляду, додавати нові властивості не можна.
24 |
25 | ```bash
26 | state = {
27 | contacts: [],
28 | name: ''
29 | }
30 | ```
31 |
32 | Кожен контакт повинен бути об'єктом з властивостями `name` та `id`. Для генерації ідентифікаторів використовуй будь-який відповідний пакет, наприклад [nanoid](https://www.npmjs.com/package/nanoid). Після завершення цього кроку, застосунок повинен виглядати приблизно так.
33 |
34 | 
35 |
36 | ## Крок 2
37 |
38 | Розшир функціонал застосунку, дозволивши користувачам додавати номери телефонів. Для цього додай `` у форму і властивість для зберігання його значення в стані.
39 |
40 | ```bash
41 | state = {
42 | contacts: [],
43 | name: '',
44 | number: ''
45 | }
46 | ```
47 |
48 | Використовуй цю розмітку інпуту з вбудованою валідацією для номеру контакту.
49 |
50 | ```html
51 |
58 | ```
59 |
60 | Після завершення цього кроку, застосунок повинен виглядати приблизно так.
61 |
62 | 
63 |
64 | ## Крок 3
65 |
66 | Додай поле пошуку, яке можна використовувати для фільтрації списку контактів за ім'ям.
67 |
68 | - Поле пошуку – це інпут без форми, значення якого записується у стан (контрольований елемент).
69 | - Логіка фільтрації повинна бути нечутливою до регістру.
70 |
71 | ```bash
72 | state = {
73 | contacts: [],
74 | filter: '',
75 | name: '',
76 | number: ''
77 | }
78 | ```
79 |
80 | 
81 |
82 | Коли ми працюємо над новим функціоналом, буває зручно жорстко закодувати деякі дані у стан. Це позбавить необхідності вручну вводити дані в інтерфейсі для тестування роботи нового функціоналу. Наприклад, можна використовувати такий початковий стан.
83 |
84 | ```bash
85 | state = {
86 | contacts: [
87 | {id: 'id-1', name: 'Rosie Simpson', number: '459-12-56'},
88 | {id: 'id-2', name: 'Hermione Kline', number: '443-89-12'},
89 | {id: 'id-3', name: 'Eden Clements', number: '645-17-79'},
90 | {id: 'id-4', name: 'Annie Copeland', number: '227-91-26'},
91 | ],
92 | filter: '',
93 | name: '',
94 | number: ''
95 | }
96 | ```
97 |
98 | ## Крок 4
99 |
100 | Якщо твій застосунок реалізований в одному компоненті ``, виконай рефакторинг, виділивши відповідні частини в окремі компоненти. У стані кореневого компонента `` залишаться тільки властивості `contacts` і `filter`.
101 |
102 | ```bash
103 | state = {
104 | contacts: [],
105 | filter: ''
106 | }
107 | ```
108 |
109 | Достатньо виділити чотири компоненти: форма додавання контактів, список контактів, елемент списку контактів та фільтр пошуку.
110 |
111 | Після рефакторингу кореневий компонент програми виглядатиме так.
112 |
113 | ```jsx
114 |
115 | Phonebook
116 | Contacts
119 | `, ``, ``,
10 | ``, `
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 |
| Type | 31 |Amount | 32 |Currency | 33 |
|---|---|---|
| Invoice | 39 |125 | 40 |USD | 41 |
| Withdrawal | 44 |85 | 45 |USD | 46 |
| Type | 25 |Amount | 26 |Currency | 27 |
|---|---|---|
| Invoice | 33 |125 | 34 |USD | 35 |
| Withdrawal | 38 |85 | 39 |USD | 40 |
| Type | 25 |Amount | 26 |Currency | 27 |
|---|---|---|
| Invoice | 33 |125 | 34 |USD | 35 |
| Withdrawal | 38 |85 | 39 |USD | 40 |
131 |
138 | ```
139 |
140 | ## Шаг 5
141 |
142 | Запрети пользователю возможность добавлять контакты, имена которых уже есть в
143 | телефонной книге. При попытке выполнить такое действие выведи `alert` с
144 | предупреждением.
145 |
146 | 
147 |
148 | ## Шаг 6
149 |
150 | Расширь функционал приложения, позволив пользователю удалять ранее сохраненные
151 | контакты.
152 |
153 | 
154 |
--------------------------------------------------------------------------------
/homework-02/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 | Napisz aplikację do przechowywania kontaktów w książce telefonicznej.
6 |
7 | ## Krok 1
8 |
9 | Aplikacja powinna składać się z formularza i listy kontaktów. W tym kroku zrealizuj dodanie nazwy kontaktu i wyświetlanie listy kontaktów. Aplikacja nie powinna zapisywać kontaktów między różnymi sesjami (aktualizacja strony).
10 |
11 | Wykorzystaj układ input z wmontowaną walidacją nazwy kontaktu.
12 |
13 |
14 | ```html
15 |
22 | ```
23 | Stan przechowywany w komponencie rodzicu `Phonebook
132 |Contacts
135 |
114 |
121 | ```
122 |
123 | ## Krok 5
124 |
125 | Wyłącz użytkownikowi możliwość dodawania kontaktów, których nazwy są już w książce telefonicznej. W razie próby wykonania takiego działania, pokaż `alert` z ostrzeżeniem.
126 |
127 | 
128 |
129 | ## Krok 6
130 |
131 | Rozszerz funkcjonalność aplikacji, pozwalając użytkownikowi usuwać wcześniej zapisane kontakty.
132 |
133 | 
134 |
--------------------------------------------------------------------------------
/homework-02/phonebook/README.ua.md:
--------------------------------------------------------------------------------
1 | **Читати іншими мовами: [Русский](README.md), [Українська](README.ua.md).**
2 |
3 | # Телефонна книга
4 |
5 | Напиши застосунок зберігання контактів телефонної книги.
6 |
7 | ## Крок 1
8 |
9 | Застосунок повинен складатися з форми і списку контактів. На поточному кроці реалізуй додавання імені контакту та відображення списку контактів. Застосунок не повинен зберігати контакти між різними сесіями (оновлення сторінки).
10 |
11 | Використовуйте цю розмітку інпуту з вбудованою валідацією для імені контакту.
12 |
13 | ```html
14 |
21 | ```
22 |
23 | Стан, що зберігається в батьківському компоненті `Phonebook
115 |Contacts
118 |
115 |
122 | ```
123 |
124 | ## Крок 5
125 |
126 | Заборони користувачеві можливість додавати контакти, імена яких вже присутні у телефонній книзі. При спробі виконати таку дію виведи `alert` із попередженням.
127 |
128 | 
129 |
130 | ## Крок 6
131 |
132 | Розшир функціонал застосунку, дозволивши користувачеві видаляти раніше збережені контакти.
133 |
134 | 
135 |
--------------------------------------------------------------------------------
/homework-02/phonebook/mockup/step-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/phonebook/mockup/step-1.png
--------------------------------------------------------------------------------
/homework-02/phonebook/mockup/step-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/phonebook/mockup/step-2.png
--------------------------------------------------------------------------------
/homework-02/phonebook/mockup/step-3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/phonebook/mockup/step-3.gif
--------------------------------------------------------------------------------
/homework-02/phonebook/mockup/step-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/phonebook/mockup/step-5.png
--------------------------------------------------------------------------------
/homework-02/phonebook/mockup/step-6.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/phonebook/mockup/step-6.gif
--------------------------------------------------------------------------------
/homework-02/phonebook/mockup/step-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goitacademy/react-homework/f14f6046b30d8655c83fbef4dde622d6eb111b8b/homework-02/phonebook/mockup/step-6.png
--------------------------------------------------------------------------------
/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.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-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-03/image-finder/README.md:
--------------------------------------------------------------------------------
1 | **Читать на других языках: [Русский](README.md), [Українська](README.ua.md).**
2 |
3 | # Поиск изображений
4 |
5 | Напиши приложение поиска изображений по ключевому слову. Превью рабочего
6 | приложения
7 | [смотри по ссылке](https://drive.google.com/file/d/1oXCGyiq4uKwW0zzraZLKk4lh3voBlBzZ/view?usp=sharing).
8 |
9 | Создай компоненты `