This repository has been archived by the owner on Aug 30, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 325
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
62 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,113 +1,113 @@ | ||
# React homework template | ||
|
||
Этот проект был создан при помощи | ||
[Create React App](https://github.com/facebook/create-react-app). Для знакомства | ||
и настройки дополнительных возможностей | ||
[обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). | ||
Acest proiect a fost creat cu ajutorul | ||
[Create React App](https://github.com/facebook/create-react-app). Pentru prezentări | ||
și configurarea de funcții suplimentare | ||
[consultați documentația](https://facebook.github.io/create-react-app/docs/getting-started). | ||
|
||
## Создание репозитория по шаблону | ||
## Crearea unui depozit dintr-un șablon | ||
|
||
Используй этот репозиторий организации GoIT как шаблон для создания репозитория | ||
своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию | ||
`«Create a new repository»`, как показано на изображении. | ||
Utilizați acest depozit al organizației GoIT ca model pentru crearea unui depozit | ||
pentru proiectul dumneavoastră. Pentru a face acest lucru, faceți clic pe `"Use this template"` și selectați opțiunea | ||
`"Create a new repository"`, așa cum se arată în imagine. | ||
|
||
![Creating repo from a template step 1](./assets/template-step-1.png) | ||
|
||
На следующем шаге откроется страница создания нового репозитория. Заполни поле | ||
его имени, убедись что репозиторий публичный, после чего нажми кнопку | ||
Următorul pas va deschide pagina de creare a unui nou depozit. Completați câmpul | ||
numele acestuia, asigurați-vă că depozitul este public, apoi faceți clic pe | ||
`«Create repository from template»`. | ||
|
||
![Creating repo from a template step 2](./assets/template-step-2.png) | ||
|
||
После того как репозиторий будет создан, необходимо перейти в настройки | ||
созданного репозитория на вкладку `Settings` > `Actions` > `General` как | ||
показано на изображении. | ||
Odată ce depozitul a fost creat, trebuie să accesați setările | ||
ale depozitului creat în fila `Settings` > `Actions` > `General`, așa cum urmează | ||
prezentată în imagine. | ||
|
||
![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) | ||
|
||
Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери | ||
опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это | ||
необходимо для автоматизации процесса деплоя проекта. | ||
După ce ați derulat până la sfârșitul paginii, în secțiunea "Workflow permissions", selectați | ||
Read and write permissions" (Permisiuni de citire și scriere) și bifați caseta de selectare. Acest lucru | ||
este necesară pentru a automatiza procesul de desfășurare a proiectului. | ||
|
||
![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) | ||
|
||
Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок | ||
репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, | ||
клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на | ||
Aveți acum un depozit personal de proiecte, cu o structură de fișiere și dosare | ||
a depozitului de șabloane. Lucrați apoi cu acesta așa cum ați face-o cu orice alt depozit personal, | ||
clonați-l pe computerul dumneavoastră, scrieți codul, confirmați-l și încărcați-l pe | ||
GitHub. | ||
|
||
## Подготовка к работе | ||
## Pregătirea pentru muncă | ||
|
||
1. Убедись что на компьютере установлена LTS-версия Node.js. | ||
[Скачай и установи](https://nodejs.org/en/) её если необходимо. | ||
2. Установи базовые зависимости проекта командой `npm install`. | ||
3. Запусти режим разработки, выполнив команду `npm start`. | ||
4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). | ||
Эта страница будет автоматически перезагружаться после сохранения изменений в | ||
файлах проекта. | ||
1. Asigurați-vă că aveți versiunea LTS a Node.js instalată pe computerul dumneavoastră. | ||
[Descărcați-o și instalați-o](https://nodejs.org/en/) dacă este necesar. | ||
2. Instalați dependențele de bază ale proiectului cu ajutorul comenzii `npm install`. | ||
3. Porniți modul de dezvoltare prin rularea comenzii `npm start`. | ||
4. Accesați [http://localhost:3000](http://localhost:3000) în browserul dumneavoastră. | ||
Această pagină se va reîncărca automat după salvarea modificărilor aduse la | ||
fișiere de proiect. | ||
|
||
## Деплой | ||
## Deploy | ||
|
||
Продакшн версия проекта будет автоматически проходить линтинг, собираться и | ||
деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется | ||
ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого | ||
необходимо в файле `package.json` отредактировать поле `homepage`, заменив | ||
`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. | ||
Versiunea de producție a proiectului va fi automat legată, construită și | ||
distribuită pe GitHub Pages, în ramura `gh-pages`, de fiecare dată când se va lansa proiectul. | ||
ramura `main` este actualizată. De exemplu, după un push direct sau o cerere de pool-request acceptată. Pentru a face acest lucru | ||
În fișierul `package.json`, editați câmpul `homepage` înlocuind | ||
`your_username` și `your_repo_name` cu numele dvs. propriu și trimiteți modificările la GitHub. | ||
|
||
```json | ||
"homepage": "https://your_username.github.io/your_repo_name/" | ||
``` | ||
|
||
Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и | ||
выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если | ||
это небыло сделано автоматически. | ||
În continuare, mergeți la setările depozitului GitHub (`Settings` > `Pages`) și | ||
Setați să distribuiți versiunea de producție a fișierelor în folderul `/root` al ramurii `gh-pages`, dacă | ||
acest lucru nu a fost făcut în mod automat. | ||
|
||
![GitHub Pages settings](./assets/repo-settings.png) | ||
|
||
### Статус деплоя | ||
### Deployment status | ||
|
||
Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. | ||
Starea de implementare a ultimei comenzi este indicată de o pictogramă în dreptul ID-ului său. | ||
|
||
- **Желтый цвет** - выполняется сборка и деплой проекта. | ||
- **Зеленый цвет** - деплой завершился успешно. | ||
- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. | ||
- **Galben** - Proiectul este în curs de construire și de desfășurare. | ||
- **Verde** - Implementarea s-a finalizat cu succes. | ||
- **Roșu** - A apărut o eroare în timpul legării, construirii sau desfășurării. | ||
|
||
Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в | ||
выпадающем окне перейти по ссылке `Details`. | ||
Informații mai detaliate privind starea pot fi vizualizate făcând clic pe pictogramă, iar în fereastra | ||
clic pe link-ul `Details` din fereastra derulantă. | ||
|
||
![Deployment status](./assets/deploy-status.png) | ||
|
||
### Живая страница | ||
### Pagina live | ||
|
||
Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть | ||
по адресу указанному в отредактированном свойстве `homepage`. Например, вот | ||
ссылка на живую версию для этого репозитория | ||
După un timp, de obicei câteva minute, pagina live poate fi vizualizată. | ||
la adresa specificată în proprietatea `homepage` editată. De exemplu, iată | ||
link către versiunea live pentru acest depozit | ||
[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). | ||
|
||
Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок | ||
связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее | ||
всего у тебя неправильное значение свойства `homepage` в файле `package.json`. | ||
Dacă se deschide o pagină goală, asigurați-vă că nu există erori în fila `Console`. | ||
asociate cu căi de acces incorecte la fișierele CSS și JS ale proiectului (**404**). Cel mai probabil | ||
Probabil că aveți o valoare greșită pentru proprietatea `homepage` din fișierul `package.json`. | ||
|
||
### Маршрутизация | ||
### Rutarea | ||
|
||
Если приложение использует библиотеку `react-router-dom` для маршрутизации, | ||
необходимо дополнительно настроить компонент `<BrowserRouter>`, передав в пропе | ||
`basename` точное название твоего репозитория. Слеш в начале строки обязателен. | ||
Dacă aplicația utilizează biblioteca `react-router-dom` pentru rutare, | ||
Trebuie să configurați suplimentar componenta `<BrowserRouter>`` prin trecerea în prop | ||
`basename` numele exact al depozitului dumneavoastră. O bară oblică la începutul liniei este obligatorie. | ||
|
||
```jsx | ||
<BrowserRouter basename="/your_repo_name"> | ||
<App /> | ||
</BrowserRouter> | ||
``` | ||
|
||
## Как это работает | ||
## Cum funcționează | ||
|
||
![How it works](./assets/how-it-works.png) | ||
|
||
1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный | ||
скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. | ||
2. Все файлы репозитория копируются на сервер, где проект инициализируется и | ||
проходит линтинг и сборку перед деплоем. | ||
3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта | ||
отправляется в ветку `gh-pages`. В противном случае, в логе выполнения | ||
скрипта будет указано в чем проблема. | ||
1. După fiecare "push" către ramura `main` a depozitului GitHub, se va crea un fișier special | ||
script (GitHub Action) din fișierul `.github/workflows/deploy.yml`. | ||
2. Toate fișierele din depozit sunt copiate pe server, unde proiectul este inițializat și | ||
inițializează și îl construiește înainte de a fi implementat. | ||
3. Dacă toți pașii sunt reușiți, versiunea de producție asamblată a fișierelor proiectului | ||
este trimisă la ramura `gh-pages`. În caz contrar, jurnalul de execuție al scriptului | ||
scriptului va indica care este problema. |