diff --git a/README.en.md b/README.en.md index bb9444897..71291ea61 100644 --- a/README.en.md +++ b/README.en.md @@ -1,3 +1,5 @@ +**Read in other languages: [Українська](README.md), [Polska](README.pl.md), [English](README.en.md), [Española](README.es.md), [Русский](README.ru.md).** + # React homework template This project was created with diff --git a/README.es.md b/README.es.md index d9613e128..8e7a16b93 100644 --- a/README.es.md +++ b/README.es.md @@ -1,3 +1,5 @@ +**Read in other languages: [Українська](README.md), [Polska](README.pl.md), [English](README.en.md), [Española](README.es.md), [Русский](README.ru.md).** + # React homework template Este proyecto fue creado con la ayuda de diff --git a/README.md b/README.md index 0c9fdc9e0..d77ac7a4b 100644 --- a/README.md +++ b/README.md @@ -1,76 +1,53 @@ -**Read in other languages: [Русский](README.md), [Polska](README.pl.md), -[English](README.en.md), [Spanish](README.es.md).** +**Read in other languages: [Українська](README.md), [Polska](README.pl.md), [English](README.en.md), [Española](README.es.md), [Русский](README.ru.md).** # React homework template -Этот проект был создан при помощи -[Create React App](https://github.com/facebook/create-react-app). Для знакомства -и настройки дополнительных возможностей -[обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). - -## Подготовка нового проекта - -1. Убедись что на компьютере установлена LTS-версия Node.js. - [Скачай и установи](https://nodejs.org/en/) её если необходимо. -2. Клонируй этот репозиторий. -3. Измени имя папки с `react-homework-template` на имя своего проекта. -4. Создай новый пустой репозиторий на GitHub. -5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием - [по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). -6. Установи базовые зависимости проекта командой `npm install`. -7. Запусти режим разработки, выполнив команду `npm start`. -8. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). - Эта страница будет автоматически перезагружаться после сохранения изменений в - файлах проекта. +Цей проект було створено за допомогою [Create React App](https://github.com/facebook/create-react-app). Для знайомства та налаштування додаткових можливостей [звертайся до документації](https://facebook.github.io/create-react-app/docs/getting-started). + +## Підготовка нового проекту + +1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js. [Скачай та встанови](https://nodejs.org/en/) її якщо необхідно. +2. Клонуй цей репозиторій. +3. Зміни ім'я папки з `react-homework-template` на ім'я свого проекту. +4. Створи новий порожній репозиторій на GitHub. +5. Відкрий проект у VSCode, запусти термінал та зв'яжи проект з GitHub-репозиторієм [за інструкцією](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). +6. Встанови базові залежності проекту командою `npm install`. +7. Запусти режим розробки, виконавши команду `npm start`. +8. Перейди в браузері за адресою [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/status.png) -### Живая страница +### Жива сторінка -Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть -по адресу указанному в отредактированном свойстве `homepage`. Например, вот -ссылка на живую версию для этого репозитория -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). +Через деякий час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за адресою вказаною у відредагованій властивості `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 @@ -78,14 +55,10 @@ ``` -## Как это работает +## Як це працює ![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`. В іншому випадку, у лозі виконання скрипту буде вказано в чому проблема. diff --git a/README.pl.md b/README.pl.md index 23eb01339..17ca05966 100644 --- a/README.pl.md +++ b/README.pl.md @@ -1,4 +1,4 @@ -**Read in other languages: [rosyjski](README.md), [polski](README.pl.md).** +**Read in other languages: [Українська](README.md), [Polska](README.pl.md), [English](README.en.md), [Española](README.es.md), [Русский](README.ru.md).** # React homework template diff --git a/README.ru.md b/README.ru.md new file mode 100644 index 000000000..719dbe591 --- /dev/null +++ b/README.ru.md @@ -0,0 +1,64 @@ +**Read in other languages: [Українська](README.md), [Polska](README.pl.md), [English](README.en.md), [Española](README.es.md), [Русский](README.ru.md).** + +# React homework template + +Этот проект был создан при помощи [Create React App](https://github.com/facebook/create-react-app). Для знакомства и настройки дополнительных возможностей [обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). + +## Подготовка нового проекта + +1. Убедись что на компьютере установлена LTS-версия Node.js. [Скачай и установи](https://nodejs.org/en/) её если необходимо. +2. Клонируй этот репозиторий. +3. Измени имя папки с `react-homework-template` на имя своего проекта. +4. Создай новый пустой репозиторий на GitHub. +5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием [по инструкции](https://docs.github.com/en/get-started/getting-started-with-gitmanaging-remote-repositories#changing-a-remote-repositorys-url). +6. Установи базовые зависимости проекта командой `npm install`. +7. Запусти режим разработки, выполнив команду `npm start`. +8. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). Эта страница будет автоматически перезагружаться после сохранения изменений в файлах проекта. + +## Деплой + +Продакшн версия проекта будет автоматически проходить линтинг, собираться и деплоиться на 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 Pages settings](./assets/repo-settings.png) + +### Статус деплоя + +Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. + +- **Желтый цвет** - выполняется сборка и деплой проекта. +- **Зеленый цвет** - деплой завершился успешно. +- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. + +Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в выпадающем окне перейти по ссылке `Details`. + +![Deployment status](./assets/status.png) + +### Живая страница + +Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть по адресу указанному в отредактированном свойстве `homepage`. Например, вот ссылка на живую версию для этого репозитория [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). + +Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее всего у тебя неправильное значение свойства `homepage` в файле `package.json`. + +### Маршрутизация + +Если приложение использует библиотеку `react-router-dom` для маршрутизации, необходимо дополнительно настроить компонент ``, передав в пропе `basename` точное название твоего репозитория. Слеши в начале и конце строки обязательны. + +```jsx + + + +``` + +## Как это работает + +![How it works](./assets/how-it-works.png) + +1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. +2. Все файлы репозитория копируются на сервер, где проект инициализируется и проходит линтинг и сборку перед деплоем. +3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта отправляется в ветку `gh-pages`. В противном случае, в логе выполнения скрипта будет указано в чем проблема.