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

• Створений репозиторій 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.

Опис компонента <Profile>

Компонент повинен приймати кілька пропсів з інформацією про користувача:

• 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.

Опис компонента <FriendList>

Компонент повинен приймати один проп friends – масив об'єктів друзів.

Компонент повинен створювати DOM наступної структури.

<ul class="friend-list">
  <!-- Довільна кіл-сть FriendListItem -->
</ul>

Опис компонента <FriendListItem>

Компонент повинен приймати кілька пропів:

• 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>

Необхідно створити компонент <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} />;

React homework template

Этот проект был создан при помощи 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.

Подготовка к работе

1. Убедись что на компьютере установлена LTS-версия Node.js. Скачай и установи её если необходимо.
2. Установи базовые зависимости проекта командой npm install.
3. Запусти режим разработки, выполнив команду npm start.
4. Перейди в браузере по адресу 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>

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

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