Використовуй цей шаблон React-проекту як стартову точку своєї програми.
- Створений репозиторій 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 'path/to/user.json;
<Profile
username={user.username}
tag={user.tag}
location={user.location}
avatar={user.avatar}
stats={user.stats}
/>
Створити компонент <Statistics>, який би відображав статистику з переданих пропсів. Наприклад, завантаження у хмару за типом файлів, відвідування веб-сторінки користувачами різних країн, фінансові витрати тощо. Дані про статистику лежать у файлі data.json.
Опис компонента <Statistics>
Компонент повинен приймати два пропи title і stats, в яких вказується заголовок та об'єкт статистики.
- title – не обов'язковий, і якщо він не переданий, не повинна рендеритись розмітка заголовка .
- 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 '/path/to/data.json';
<Statistics title="Upload stats" stats={data} />
<Statistics stats={data} />
Необхідно створити компонент <FriendList>, за допомогою якого ми могли б відображати інформацію про друзів користувача. Інформація про друзів зберігається у файлі friends.json.
Опис компонента <FriendList>
Компонент повинен приймати один проп 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 'path/to/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>
<TransactionHistory items={transactions} />;