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

React homework template

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

Книга контактов

Добавь в приложение «Книга контактов» возможность регистрации, логина и обновления пользователя, а также работу с приватной коллекцией контактов.

Бэкенд

Для этого задания есть готовый бэкенд. Ознакомься с документацией. Он поддерживает все необходимые операции с коллекцией контактов, а так же регистрацию, логин и обновление пользователя при помощи JWT. Используй его вместо твоего бэкенда созданного через сервис mockapi.io.

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

Добавь маршрутизацию с библиотекой React Router. В приложении должно быть несколько страниц:

• /register - публичный маршрут регистрации нового пользователя с формой
• /login - публичный маршрут логина существующего пользователя с формой
• /contacts - приватный маршрут для работы со списком контактов пользователя Добавь компонент навигации Navigation со ссылками для перехода по маршрутам.

Меню пользователя

Создай компонент UserMenu, отображающий почту пользователя и кнопку выхода из учетной записи. Вот как может выглядеть его разметка.

<div>
  <p>mango@mail.com</p>
  <button>Logout</button>
</div>

Стилизация

Это финальная версия приложения, поэтому поработай над оформлением интерфейса. Можно использовать библиотеку стилизации или компонентов, например Chakra UI или Material UI.

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

1. Убедись что на компьютере установлена LTS-версия Node.js. Скачай и установи её если необходимо.
2. Клонируй этот репозиторий.
3. Измени имя папки с react-homework-template на имя своего проекта.
4. Создай новый пустой репозиторий на GitHub.
5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием по инструкции.
6. Установи базовые зависимости проекта командой npm install.
7. Запусти режим разработки, выполнив команду npm start.
8. Перейди в браузере по адресу 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. В противном случае, в логе выполнения скрипта будет указано в чем проблема.