Критерії приймання

Загалом добре, але тріши бідше уваги проптайпам: не сюди описуєте, не всюди вазуєте на обов'язковий характер, не всюди утчнюєте струтуру/вміст масива.

Створені репозиторії goit-react-hw-03-phonebook і goit-react-hw-03-image-finder

При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку проектів на GitHub Pages.

У стані компонентів зберігається мінімально необхідний набір даних, решта обчислюється

Під час запуску коду завдання в консолі відсутні помилки та попередження.

Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів

Для компонентів описані propTypes

Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.

Імена компонентів зрозумілі та описові

JS-код чистий і зрозумілий, використовується Prettier.

Стилізація виконана CSS-модулями або Styled Components.

1 - Книга контактів

2 - Пошук зображень

Напиши застосунок пошуку зображень за ключовим словом. Прев'ю робочого застосунку дивись за посиланням.

Створи компоненти , , , , і . Готові стилі компонентів можна взяти у файлі styles.css і підправити під себе, якщо потрібно.

component preview Інструкція Pixabay API

Зареєструйся та отримай приватний ключ доступу. Для HTTP-запитів використовуй публічний сервіс пошуку зображень Pixabay.

URL-рядок HTTP-запиту.

https://pixabay.com/api/?q=cat&page=1&key=your_key&image_type=photo&orientation=horizontal&per_page=12

Pixabay API підтримує пагінацію, за замовчуванням параметр page дорівнює 1. Нехай у відповіді надходить по 12 об'єктів, встановлено в параметрі per_page. Не забудь, що під час пошуку за новим ключовим словом, необхідно скидати значення page до 1.

У відповіді від апі приходить масив об'єктів, в яких тобі цікаві лише наступні властивості. id - унікальний ідентифікатор webformatURL - посилання на маленьке зображення для списку карток largeImageURL - посилання на велике зображення для модального вікна

Опис компонента Компонент приймає один проп onSubmit – функцію для передачі значення інпута під час сабміту форми. Створює DOM-елемент наступної структури.

<input
  class="input"
  type="text"
  autocomplete="off"
  autofocus
  placeholder="Search images and photos"
/>

Опис компонента Список карток зображень. Створює DOM-елемент наступної структури.

Опис компонента Компонент елемента списку із зображенням. Створює DOM-елемент наступної структури.

Опис компонента При натисканні на кнопку Load more повинна довантажуватись наступна порція зображень і рендеритися разом із попередніми. Кнопка повинна рендеритися лише тоді, коли є якісь завантажені зображення. Якщо масив зображень порожній, кнопка не рендериться.

Опис компонента Компонент спінера відображається, доки відбувається завантаження зображень. Використовуйте будь-який готовий компонент, наприклад react-loader-spinner або будь-який інший.

Опис компонента Під час кліку на елемент галереї повинно відкриватися модальне вікно з темним оверлеєм і відображатися велика версія зображення. Модальне вікно повинно закриватися по натисканню клавіші ESC або по кліку на оверлеї.

Зовнішній вигляд схожий на функціонал цього VanillaJS-плагіна, тільки замість білого модального вікна рендериться зображення (у прикладі натисніть Run). Анімацію робити не потрібно!

############################################################################################ ############################################################################################

Read in other languages: Русский, Polska.

React homework template

Этот проект был создан при помощи Create React App. Для знакомства и настройки дополнительных возможностей обратись к документации.

Подготовка нового проекта

Убедись что на компьютере установлена LTS-версия Node.js. Скачай и установи её если необходимо.
Склонируй этот репозиторий.
Измени имя папки с react-homework-template на имя своего проекта.
Создай новый пустой репозиторий на GitHub.
Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием по инструкции.
Установи базовые зависимости проекта командой npm install.
Запусти режим разработки, выполнив команду npm start.
Перейди в браузере по адресу http://localhost:3000. Эта страница будет автоматически перезагружаться после сохранения изменений в файлах проекта.

Деплой

Для настройки деплоя проекта необходимо выполнить несколько дополнительных шагов по настройке твоего репозитория. Зайди во вкладку Settings и в подсекции Actions выбери выбери пункт General.

Пролистай страницу до последней секции, в которой выбери опции как на следующем изображении и нажми Save. Без этих настроек у сборки будет недостаточно прав для автоматизации процесса деплоя.

Продакшн версия проекта будет автоматически проходить линтинг, собираться и деплоиться на GitHub Pages, в ветку gh-pages, каждый раз когда обновляется ветка main. Например, после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле package.json отредактировать поле homepage, заменив your_username и your_repo_name на свои, и отправить изменения на GitHub.

"homepage": "https://your_username.github.io/your_repo_name/"

Далее необходимо зайти в настройки GitHub-репозитория (Settings > Pages) и выставить раздачу продакшн версии файлов из папки /root ветки gh-pages, если это небыло сделано автоматически.

Статус деплоя

Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.

Желтый цвет - выполняется сборка и деплой проекта.
Зеленый цвет - деплой завершился успешно.
Красный цвет - во время линтинга, сборки или деплоя произошла ошибка.

Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в выпадающем окне перейти по ссылке Details.

Живая страница

Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть по адресу указанному в отредактированном свойстве homepage. Например, вот ссылка на живую версию для этого репозитория https://goitacademy.github.io/react-homework-template.

Если открывается пустая страница, убедись что во вкладке Console нет ошибок связанных с неправильными путями к CSS и JS файлам проекта (404). Скорее всего у тебя неправильное значение свойства homepage в файле package.json.

Маршрутизация

Если приложение использует библиотеку react-router-dom для маршрутизации, необходимо дополнительно настроить компонент <BrowserRouter>, передав в пропе basename точное название твоего репозитория. Слеши в начале и конце строки обязательны.

<BrowserRouter basename="/your_repo_name/">
  <App />
</BrowserRouter>

Как это работает

После каждого пуша в ветку main GitHub-репозитория, запускается специальный скрипт (GitHub Action) из файла .github/workflows/deploy.yml.
Все файлы репозитория копируются на сервер, где проект инициализируется и проходит линтинг и сборку перед деплоем.
Если все шаги прошли успешно, собранная продакшн версия файлов проекта отправляется в ветку gh-pages. В противном случае, в логе выполнения скрипта будет указано в чем проблема.

evglitik/goit-react-hw-06-phonebook