Критерії приймання
Загалом добре, але тріши бідше уваги проптайпам: не сюди описуєте, не всюди вазуєте на обов'язковий характер, не всюди утчнюєте струтуру/вміст масива.
Створені репозиторії goit-react-hw-03-phonebook і goit-react-hw-03-image-finder
При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку проектів на GitHub Pages.
У стані компонентів зберігається мінімально необхідний набір даних, решта обчислюється
Під час запуску коду завдання в консолі відсутні помилки та попередження.
Для кожного компонента є окрема папка з файлом React-компонента та файлом стилів
Для компонентів описані propTypes
Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
Імена компонентів зрозумілі та описові
JS-код чистий і зрозумілий, використовується Prettier.
Стилізація виконана CSS-модулями або Styled Components.
1 - Книга контактів
Напиши застосунок пошуку зображень за ключовим словом. Прев'ю робочого застосунку дивись за посиланням.
Створи компоненти , , , , і . Готові стилі компонентів можна взяти у файлі styles.css і підправити під себе, якщо потрібно.
component preview Інструкція Pixabay API
Зареєструйся та отримай приватний ключ доступу. Для HTTP-запитів використовуй публічний сервіс пошуку зображень Pixabay.
URL-рядок HTTP-запиту.
Pixabay API підтримує пагінацію, за замовчуванням параметр page дорівнює 1. Нехай у відповіді надходить по 12 об'єктів, встановлено в параметрі per_page. Не забудь, що під час пошуку за новим ключовим словом, необхідно скидати значення page до 1.
У відповіді від апі приходить масив об'єктів, в яких тобі цікаві лише наступні властивості. id - унікальний ідентифікатор webformatURL - посилання на маленьке зображення для списку карток largeImageURL - посилання на велике зображення для модального вікна
Опис компонента Компонент приймає один проп onSubmit – функцію для передачі значення інпута під час сабміту форми. Створює DOM-елемент наступної структури.
Search<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.
Этот проект был создан при помощи 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
. В противном случае, в логе выполнения скрипта будет указано в чем проблема.