- Створений репозиторій
goit-react-hw-01-components
. - Компоненти всіх завдань рендеряться на одній сторінці, всередині спільного
контейнера – кореневого компонента
<App>
. - При здачі домашньої роботи є посилання на репозиторій з вихідним кодом проекту.
- В шапці репозиторія є посилання на живу сторінку на
GitHub pages
. - Під час відвідування робочої сторінки (GitHub pages) завдання, в консолі відсутні помилки та попередження.
- Для кожного компонента є окрема папка з файлом React-компонента і файлом стилів.
- Для компонентів описані
propTypes
. - Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
- Імена компонентів зрозумілі та описові.
- JS-код чистий і зрозумілий, використовується
Prettier
. - Стилізація виконана
CSS-модулями
абоStyled Components
, тому класи в результуючому DOM відрізнятимуться від прикладів. - Достатньо базової стилізації застосунку, насамперед він повинен працювати, а вже потім бути гарним. Приділяй 20% часу на CSS і 80% на JS.
Необхідно створити компонент <Profile>
, за допомогою якого ми могли б
відображати інформацію про користувача соціальної мережі. Дані про користувача
лежать у файлі user.json.
Компонент повинен приймати кілька пропсів з інформацією про користувача:
username
— ім'я користувачаtag
— тег в соціальній мережі без@
location
— місто і країнаavatar
— посилання на зображенняstats
— об'єкт з інформацією про активності
Компонент повинен створювати DOM елемент наступної структури.
<div class="profile">
<div class="description">
<img
src="https://cdn-icons-png.flaticon.com/512/1077/1077012.png"
alt="User avatar"
class="avatar"
/>
<p class="name">Petra Marica</p>
<p class="tag">@pmarica</p>
<p class="location">Salvador, Brasil</p>
</div>
<ul class="stats">
<li>
<span class="label">Followers</span>
<span class="quantity">1000</span>
</li>
<li>
<span class="label">Views</span>
<span class="quantity">2000</span>
</li>
<li>
<span class="label">Likes</span>
<span class="quantity">3000</span>
</li>
</ul>
</div>
import user from 'путь/к/user.json;
<Profile
username={user.username}
tag={user.tag}
location={user.location}
avatar={user.avatar}
stats={user.stats}
/>
Створити компонент <Statistics>
, який би відображав статистику з переданих
пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування
веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про
статистику лежать у файлі data.json.
Компонент повинен приймати два пропи title
і stats
, в яких вказується
заголовок та об'єкт статистики.
title
– не обов'язковий, і якщо він не переданий, не повинна рендеритись розмітка заголовка<h2>
.stats
– масив об'єктів, що містять інформацію про елемент статистики. Може мати довільну кількість елементів.- Колір фону елемента статистики в оформленні можна пропустити або створити функцію для генерації випадкового кольору.
Компонент повинен створювати DOM елемент наступної структури.
<section class="statistics">
<h2 class="title">Upload stats</h2>
<ul class="stat-list">
<li class="item">
<span class="label">.docx</span>
<span class="percentage">4%</span>
</li>
<li class="item">
<span class="label">.mp3</span>
<span class="percentage">14%</span>
</li>
<li class="item">
<span class="label">.pdf</span>
<span class="percentage">41%</span>
</li>
<li class="item">
<span class="label">.mp4</span>
<span class="percentage">12%</span>
</li>
</ul>
</section>
import data from '/путь/к/data.json';
<Statistics title="Upload stats" stats={data} />;
<Statistics stats={data} />;
Необхідно створити компонент <FriendList>
, за допомогою якого ми могли б
відображати інформацію про друзів користувача. Інформація про друзів
зберігається у файлі friends.json.
Компонент повинен приймати один проп friends
– масив об'єктів друзів.
Компонент повинен створювати DOM наступної структури.
<ul class="friend-list">
<!-- Довільна кіл-сть FriendListItem -->
</ul>
Компонент повинен приймати кілька пропів:
avatar
– посилання на аватарname
– ім'я другаisOnline
– буль, що сигналізує про стан друга: в мережі або ні.
Залежно від пропа isOnline
, повинен змінюватися колір фону span.status
. Це
можна зробити за допомогою різних CSS-класів або Styled Components.
Компонент повинен створювати DOM наступної структури.
<li class="item">
<span class="status"></span>
<img class="avatar" src="" alt="User avatar" width="48" />
<p class="name"></p>
</li>
import friends from 'путь/к/friends.json';
<FriendList friends={friends} />,
Необхідно створити компонент історії транзакцій в особистому кабінеті інтернет-банку.
Дані для списку доступні у форматі JSON у файлі transactions.json. Це масив об'єктів, кожен об'єкт описує одну транзакцію з наступними властивостями:
id
— унікальний ідентифікатор транзакціїtype
— тип транзакціїamount
- сума транзакціїcurrency
- тип валюти
Необхідно створити компонент <TransactionHistory>
, який приймає один проп
items
– масив об'єктів транзакцій з transactions.json
. Компонент створює
розмітку таблиці. Кожна транзакція – це рядок таблиці. У прикладі наведена
розмітка двох транзакцій.
<table class="transaction-history">
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>Invoice</td>
<td>125</td>
<td>USD</td>
</tr>
<tr>
<td>Withdrawal</td>
<td>85</td>
<td>USD</td>
</tr>
</tbody>
</table>
import transactions from 'путь/к/transactions.json';
<TransactionHistory items={transactions} />;
Цей проект був створений за допомогою Create React App. Для знайомства і налаштування додаткових можливостей звернися до документації.
Використовуй цей репозиторій організації GoIT як шаблон для створення репозиторію
свого проєкта. Для цього натисни на кнопку «Use this template»
і вибери опцію
«Create a new repository»
, як показано на зображенні.
На наступному кроці відкриється сторінка створення нового репозиторію. Заповни поле
його імені, переконайся що репозиторій публічний, після чого натисни кнопку
«Create repository from template»
.
Після того як репозиторій буде створено, необхідно перейти в налаштування
створеного репозиторію на вкладку Settings
> Actions
> General
як
показано на зображенні.
Проскроливши сторінку до самого кінця, у секції «Workflow permissions»
вибери
опцію «Read and write permissions»
і постав галочку в чекбоксі. Це
необхідно для автоматизації процесу деплою проєкту.
Тепер у тебе є особистий репозиторій проекту, зі структурою файлів і папок репозиторію-шаблону. Далі працюй із ним як із будь-яким іншим особистим репозиторієм, клонуй його собі на комп'ютер, пиши код, роби комміти і відправляй їх на GitHub.
- Переконайся що на комп'ютері встановлено LTS-версія Node.js. Завантаж і встанови її якщо необхідно.
- Встанови базові залежності проєкту командою
npm install
. - Запусти режим розробки, виконавши команду
npm start
. - Перейди в браузері за адресою http://localhost:3000. Ця сторінка буде автоматично перезавантажуватися після збереження змін у файлах проєкту.
Продакшн версія проєкту буде автоматично проходити лінтинг, збиратися і
деплоїтися на 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
. В іншому випадку, в лозі виконання скрипта буде вказано в чому проблема.