From 2d8d218096465fae3acbeaa43ca565260b7733da Mon Sep 17 00:00:00 2001 From: Sofiia-Tkachenko <115155782+Sofiia-Tkachenko@users.noreply.github.com> Date: Thu, 1 Feb 2024 12:49:23 +0200 Subject: [PATCH] Update README.md translate into ukr --- README.md | 119 +++++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index af1f02c93..aae7282fd 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,97 @@ # React homework template -Этот проект был создан при помощи -[Create React App](https://github.com/facebook/create-react-app). Для знакомства -и настройки дополнительных возможностей -[обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). +Цей проект був створений за допомогою +[Create React App](https://github.com/facebook/create-react-app). Для знайомства +і налаштування додаткових можливостей +[звернися до документації](https://facebook.github.io/create-react-app/docs/getting-started). -## Создание репозитория по шаблону +## Створення репозиторію за шаблоном -Используй этот репозиторий организации GoIT как шаблон для создания репозитория -своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию -`«Create a new repository»`, как показано на изображении. +Використовуй цей репозиторій організації GoIT як шаблон для створення репозиторію +свого проєкта. Для цього натисни на кнопку `«Use this template»` і вибери опцію +`«Create a new repository»`, як показано на зображенні. ![Creating repo from a template step 1](./assets/template-step-1.png) -На следующем шаге откроется страница создания нового репозитория. Заполни поле -его имени, убедись что репозиторий публичный, после чего нажми кнопку +На наступному кроці відкриється сторінка створення нового репозиторію. Заповни поле +його імені, переконайся що репозиторій публічний, після чого натисни кнопку `«Create repository from template»`. ![Creating repo from a template step 2](./assets/template-step-2.png) -После того как репозиторий будет создан, необходимо перейти в настройки -созданного репозитория на вкладку `Settings` > `Actions` > `General` как -показано на изображении. +Після того як репозиторій буде створено, необхідно перейти в налаштування +створеного репозиторію на вкладку `Settings` > `Actions` > `General` як +показано на зображенні. ![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) -Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери -опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это -необходимо для автоматизации процесса деплоя проекта. +Проскроливши сторінку до самого кінця, у секції `«Workflow permissions»` вибери +опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це +необхідно для автоматизації процесу деплою проєкту. ![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) -Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок -репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, -клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на +Тепер у тебе є особистий репозиторій проекту, зі структурою файлів і папок +репозиторію-шаблону. Далі працюй із ним як із будь-яким іншим особистим репозиторієм, +клонуй його собі на комп'ютер, пиши код, роби комміти і відправляй їх на GitHub. -## Подготовка к работе +## Підготовка до роботи -1. Убедись что на компьютере установлена LTS-версия Node.js. - [Скачай и установи](https://nodejs.org/en/) её если необходимо. -2. Установи базовые зависимости проекта командой `npm install`. -3. Запусти режим разработки, выполнив команду `npm start`. -4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). - Эта страница будет автоматически перезагружаться после сохранения изменений в - файлах проекта. +1. Переконайся що на комп'ютері встановлено LTS-версія Node.js. + [Завантаж і встанови](https://nodejs.org/en/) її якщо необхідно. +2. Встанови базові залежності проєкту командою `npm install`. +3. Запусти режим розробки, виконавши команду `npm start`. +4. Перейди в браузері за адресою [http://localhost:3000](http://localhost:3000). + Ця сторінка буде автоматично перезавантажуватися після збереження змін у файлах проєкту. ## Деплой -Продакшн версия проекта будет автоматически проходить линтинг, собираться и -деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется -ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого -необходимо в файле `package.json` отредактировать поле `homepage`, заменив -`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. +Продакшн версія проєкту буде автоматично проходити лінтинг, збиратися і +деплоїтися на GitHub Pages, у гілку `gh-pages`, щоразу, коли оновлюється +гілка `main`. Наприклад, після прямого пушу або прийнятого пул-реквесту. Для цього +необхідно у файлі `package.json` відредагувати поле `homepage`, замінивши +`your_username` і `your_repo_name` на свої, і відправити зміни на GitHub. ```json "homepage": "https://your_username.github.io/your_repo_name/" ``` -Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и -выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если -это небыло сделано автоматически. +Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) і +виставити роздачу продакшн-версії файлів із папки `/root` гілки `gh-pages`, якщо +це не було зроблено автоматично. ![GitHub Pages settings](./assets/repo-settings.png) ### Статус деплоя -Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. +Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора. -- **Желтый цвет** - выполняется сборка и деплой проекта. -- **Зеленый цвет** - деплой завершился успешно. -- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. +- **Жовтий колір** - виконується збірка і деплой проєкту. +- **Зелений колір** - деплой завершився успішно. +- **Червоний колір** - під час лінтингу, сборки або деплою сталася помилка. -Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в -выпадающем окне перейти по ссылке `Details`. +Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і +у вікні, що випадає, перейти за посиланням `Details`. ![Deployment status](./assets/deploy-status.png) -### Живая страница +### Жива сторінка -Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть -по адресу указанному в отредактированном свойстве `homepage`. Например, вот -ссылка на живую версию для этого репозитория +Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися +за адресою, вказаною у відредагованій властивості `homepage`. Наприклад, ось +посилання на живу версію для цього репозиторію [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). -Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок -связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее -всего у тебя неправильное значение свойства `homepage` в файле `package.json`. +Якщо відкривається порожня сторінка, переконайся, що у вкладці `Console` немає помилок +пов'язаних із неправильними шляхами до CSS і JS файлів проєкту (**404**). Швидше +за все у тебе неправильне значення властивості `homepage` у файлі `package.json`. -### Маршрутизация +### Маршрутизація -Если приложение использует библиотеку `react-router-dom` для маршрутизации, -необходимо дополнительно настроить компонент ``, передав в пропе -`basename` точное название твоего репозитория. Слеш в начале строки обязателен. +Якщо додаток використовує бібліотеку `react-router-dom` для маршрутизації, +необхідно додатково налаштувати компонент ``, передавши у пропе +`basename` точну назву твого репозиторію. Слеш на початку рядка обов'язковий. ```jsx @@ -100,14 +99,14 @@ GitHub. ``` -## Как это работает +## Як це працює ![How it works](./assets/how-it-works.png) -1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный - скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. -2. Все файлы репозитория копируются на сервер, где проект инициализируется и - проходит линтинг и сборку перед деплоем. -3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта - отправляется в ветку `gh-pages`. В противном случае, в логе выполнения - скрипта будет указано в чем проблема. +1. Після кожного пушу в гілку `main` GitHub-репозиторія, запускається спеціальний + скрипт (GitHub Action) з файла `.github/workflows/deploy.yml`. +2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується і + проходить лінтинг і збірку перед деплоєм. +3. Якщо всі кроки пройшли успішно, зібрана продакшн-версія файлів проєкту + відправляється в гілку `gh-pages`. В іншому випадку, в лозі виконання + скрипта буде вказано в чому проблема.