Skip to content

Commit 185094c

Browse files
Miro-wqMiro-wq
authored
Initial commit
0 parents  commit 185094c

30 files changed

+25555
-0
lines changed

‎.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
charset = utf-8
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.github/workflows/deploy.yml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: Build and deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
jobs:
8+
build-and-deploy:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Checkout 🛎️
12+
uses: actions/checkout@v2.3.1
13+
14+
- name: Install, lint, build 🔧
15+
run: |
16+
npm install
17+
npm run lint:js
18+
npm run build
19+
20+
- name: Deploy 🚀
21+
uses: JamesIves/github-pages-deploy-action@4.1.0
22+
with:
23+
branch: gh-pages
24+
folder: build

‎.gitignore

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
#Junk
4+
.vscode/
5+
.idea/
6+
7+
# dependencies
8+
/node_modules
9+
/.pnp
10+
.pnp.js
11+
12+
# testing
13+
/coverage
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
.env.local
21+
.env.development.local
22+
.env.test.local
23+
.env.production.local
24+
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*

‎.prettierrc.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": true,
7+
"trailingComma": "es5",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"arrowParens": "avoid",
11+
"proseWrap": "always"
12+
}

‎README.RO.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Model pentru un proiect React
2+
3+
Acest proiect a fost creat cu ajutorul
4+
[Create React App](https://github.com/facebook/create-react-app). Pentru prezentări
5+
și configurarea de funcții suplimentare
6+
[consultă documentația](https://facebook.github.io/create-react-app/docs/getting-started).
7+
8+
## Crearea unui repository în baza modelului
9+
10+
Utilizează acest repository al organizației GoIT ca model pentru crearea unui repository
11+
pentru proiectul tău. Pentru a face acest lucru, dă click pe "Use this template" și selectează opțiunea
12+
`Create a new repository`, după cum se prezintă în imagine.
13+
14+
![Creating repo from a template step 1](./assets/template-step-1.png)
15+
16+
Următorul pas va deschide pagina de creare a unui nou repository. Completează câmpul
17+
pentru numele acestuia, asigură-te că repository-ul este public, apoi dă click pe `Create repository from template`.
18+
19+
![Creating repo from a template step 2](./assets/template-step-2.png)
20+
21+
Odată ce repository-ul a fost creat, trebuie să accesezi setările repository-ului creat în fila `Settings > Actions > General`, după cum se prezintă în imagine.
22+
23+
![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png)
24+
25+
După ce ai derulat până la sfârșitul paginii, în secțiunea `Workflow permissions`, selectează `Read and write permissions`, (Permisiuni de citire și scriere) și bifează caseta. Acest lucru
26+
este necesar pentru a automatiza procesul de lansare a proiectului.
27+
28+
![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png)
29+
30+
Avei acum un repository personal de proiecte, cu o structură de fișiere și foldere.
31+
32+
Lucrează apoi cu acesta așa cum ai face-o cu orice alt repository personal,
33+
clonează-l pe computerul tău, scrie cod, confirmă-l și încarcă-l pe
34+
GitHub.
35+
36+
## Pregătirea pentru muncă
37+
38+
1. Asigură-te că ai versiunea LTS a Node.js instalată pe computerul personal.
39+
[Descarcă și instalează](https://nodejs.org/en/) dacă este necesar.
40+
2. Instalează dependențele de bază ale proiectului cu comanda `npm install`.
41+
3. Pornește modul de dezvoltare utilizând comanda `npm start`.
42+
4. Accesează [http://localhost:3000](http://localhost:3000) în browser-ul tău.
43+
Această pagină se va reîncărca automat după salvarea modificărilor în fișierele proiectului.
44+
45+
## Deploy
46+
47+
Versiunea de producție a proiectului va trece automat prin procesul de linting, va fi asamblată și implementată pe GitHub Pages, în ramura `gh-pages`, de fiecare dată când ramura `main` este actualizată. De exemplu, după un push direct sau o cerere de pull-request acceptată.
48+
49+
Pentru a face acest lucru, trebuie să editeezi câmpul "homepage" din fișierul package.json, înlocuind "your_username" și "your_repo_name" cu detaliile tale, apoi să trimiți aceste modificări pe GitHub.
50+
51+
json
52+
"homepage": "https://your_username.github.io/your_repo_name/"
53+
54+
În continuare, mergi la setările repository-ului GitHub (`Settings` > `Pages`) și setează distribuirea versiunii de producție a fișierelor în folderul `/root` al ramurii `gh-pages`, dacă acest lucru nu a fost făcut în mod automat.
55+
56+
![GitHub Pages settings](./assets/repo-settings.png)
57+
58+
### Deployment status
59+
60+
Starea de implementare a celui mai recent commit este afișat printr-o iconiță lângă ID-ului acestuia.
61+
62+
- **Galben** - proiectul este în curs de asamblare și de implementare.
63+
- **Verde** - implementarea a fost finalizată cu succes.
64+
- **Roșu** - a apărut o eroare în timpul procesului de linting, asamblării sau implementării.
65+
66+
Pentru a obține informații mai detaliate despre starea implementării, poți da click pe iconița corespunzătoare și apoi accesează link-ul "Details" din fereastra pop-up care se deschide.
67+
68+
![Deployment status](./assets/deploy-status.png)
69+
70+
### Pagina live
71+
72+
După un anumit interval de timp, de obicei câteva minute, poți vizualiza pagina live la adresa indicată în proprietatea "homepage" editată. De exemplu, iată un link către versiunea live pentru acest repository:
73+
[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).
74+
75+
Dacă se deschide o pagină goală, asigură-te că în fila "Console" nu există erori legate de căi greșite către fișierele CSS și JS ale proiectului (**Eroare 404**). Cel mai probabil, valoarea proprietății "homepage" din fișierul package.json este incorectă.
76+
77+
### Rutarea
78+
79+
Dacă aplicația utilizează biblioteca react-router-dom pentru rutare,
80+
trebuie să configurezi suplimentar componenta `<BrowserRouter>`, trecând în prop-ul "basename" numele exact al repository-ului tău. Bara oblică la începutul șirului este obligatorie.
81+
82+
jsx
83+
<BrowserRouter basename="/your_repo_name">
84+
<App />
85+
</BrowserRouter>
86+
87+
88+
## Cum funcționează
89+
90+
![How it works](./assets/how-it-works.png)
91+
92+
1. După fiecare "push" în ramura `main` a repository-ului GitHub, se va crea un fișier special script (GitHub Action) din fișierul `.github/workflows/deploy.yml`.
93+
2. Toate fișierele din repository sunt copiate pe server, unde proiectul este inițializat, este efectuat linting-ul și asamblarea înainte de implementare.
94+
3. Dacă toți pașii sunt finalizați cu succes, versiunea asamblată în producție a fișierelor proiectului este trimisă în ramura `gh-pages`. În caz contrar, în jurnalul (log) de execuție al scriptului vor fi indicate problemele întâlnite.

‎README.en.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# React homework template
2+
3+
This project was created with
4+
[Create React App](https://github.com/facebook/create-react-app). To get
5+
acquainted and configure additional features
6+
[refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started).
7+
8+
## Creating a repository by template
9+
10+
Use this GoIT repository as a template for creating a repository
11+
of your project. To use it just tap the `«Use this template»` button and choose
12+
`«Create a new repository»` option, as you can see on the image below.
13+
14+
![Creating repo from a template step 1](./assets/template-step-1.png)
15+
16+
The page for creating a new repository will open on the next step. Fill out
17+
the Name field and make sure the repository is public, then click
18+
`«Create repository from template»` button.
19+
20+
![Creating repo from a template step 2](./assets/template-step-2.png)
21+
22+
You now have a personal project repository, having a repository-template file
23+
and folder structure. After that, you can work with it as you would with any
24+
other private repository: clone it on your computer, write code, commit, and
25+
send it to GitHub.
26+
27+
## Preparing for coding
28+
29+
1. Make sure you have an LTS version of Node.js installed on your computer.
30+
[Download and install](https://nodejs.org/en/) if needed.
31+
2. Install the project's base dependencies with the `npm install` command.
32+
3. Start development mode by running the `npm start` command.
33+
4. Go to [http://localhost:3000](http://localhost:3000) in your browser. This
34+
page will automatically reload after saving changes to the project files.
35+
36+
## Deploy
37+
38+
The production version of the project will automatically be linted, built, and
39+
deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch
40+
is updated. For example, after a direct push or an accepted pull request. To do
41+
this, you need to edit the `homepage` field in the `package.json` file,
42+
replacing `your_username` and `your_repo_name` with your own, and submit the
43+
changes to GitHub.
44+
45+
```json
46+
"homepage": "https://your_username.github.io/your_repo_name/"
47+
```
48+
49+
Next, you need to go to the settings of the GitHub repository (`Settings` >
50+
`Pages`) and set the distribution of the production version of files from the
51+
`/root` folder of the `gh-pages` branch, if this was not done automatically.
52+
53+
![GitHub Pages settings](./assets/repo-settings.png)
54+
55+
### Deployment status
56+
57+
The deployment status of the latest commit is displayed with an icon next to its
58+
ID.
59+
60+
- **Yellow color** - the project is being built and deployed.
61+
- **Green color** - deployment completed successfully.
62+
- **Red color** - an error occurred during linting, build or deployment.
63+
64+
More detailed information about the status can be viewed by clicking on the
65+
icon, and in the drop-down window, follow the link `Details`.
66+
67+
![Deployment status](./assets/deploy-status.png)
68+
69+
### Live page
70+
71+
After some time, usually a couple of minutes, the live page can be viewed at the
72+
address specified in the edited `homepage` property. For example, here is a link
73+
to a live version for this repository
74+
[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).
75+
76+
If a blank page opens, make sure there are no errors in the `Console` tab
77+
related to incorrect paths to the CSS and JS files of the project (**404**). You
78+
most likely have the wrong value for the `homepage` property in the
79+
`package.json` file.
80+
81+
### Routing
82+
83+
If your application uses the `react-router-dom` library for routing, you must
84+
additionally configure the `<BrowserRouter>` component by passing the exact name
85+
of your repository in the `basename` prop. Slashes at the beginning and end of
86+
the line are required.
87+
88+
```jsx
89+
<BrowserRouter basename="/your_repo_name/">
90+
<App />
91+
</BrowserRouter>
92+
```
93+
94+
## How it works
95+
96+
![How it works](./assets/how-it-works.png)
97+
98+
1. After each push to the `main` branch of the GitHub repository, a special
99+
script (GitHub Action) is launched from the `.github/workflows/deploy.yml`
100+
file.
101+
2. All repository files are copied to the server, where the project is
102+
initialized and linted and built before deployment.
103+
3. If all steps are successful, the built production version of the project
104+
files is sent to the `gh-pages` branch. Otherwise, the script execution log
105+
will indicate what the problem is.

‎README.es.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# React homework template
2+
3+
Este proyecto fue creado con la ayuda de
4+
[Create React App](https://github.com/facebook/create-react-app).
5+
[Consulte la documentación](https://facebook.github.io/create-react-app/docs/getting-started)
6+
para familiarizarse con las funciones opcionales y configurarlas.
7+
8+
## Crear un repositorio desde una plantilla
9+
10+
Usa este repositorio de la organización GoIT como plantilla para crear el repositorio de tu proyecto.
11+
Para hacer esto, haz clic en `«Use this template»` y selecciona la opción
12+
`«Create a new repository»`, tal como se muestra en la imagen.
13+
14+
![Creating repo from a template step 1](./assets/template-step-1.png)
15+
16+
Para el siguiente paso deberás abrir la página para crear un nuevo repositorio.
17+
Ponle nombre, asegúrate de que el repositorio sea público y haz clic en el botón
18+
`«Create repository from template»`.
19+
20+
![Creating repo from a template step 2](./assets/template-step-2.png)
21+
22+
Ahora ya tienes un repositorio de proyecto personal, junto a una estructura de
23+
archivos y carpetas del repositorio de plantillas. Luego trabaja con esto, así
24+
como con cualquier otro repositorio personal, realiza una copia en tu computadora
25+
y súbelo a GitHub.
26+
27+
## Prepararse para el trabajo
28+
29+
1. Asegúrate de que la versión LTS de Node.js está instalada en tu computador.
30+
[Descárguela e instálela](https://nodejs.org/en/) de ser necesario.
31+
2. Instala las dependencias base del proyecto con el comando `npm install`.
32+
3. Inicia el modo de desarrollo ejecutando el comando `npm start`.
33+
4. En tu navegador, ve a la dirección
34+
[http://localhost:3000](http://localhost:3000). Esta página se recargará
35+
automáticamente después de guardar los cambios en los archivos del proyecto.
36+
37+
## Implementación
38+
39+
La versión de producción del proyecto se verificará, compilará y desplegará
40+
automáticamente en GitHub Pages, en la rama `gh-pages`, cada vez que se
41+
actualice la rama `main`. Por ejemplo, después de un Push directo o de una
42+
Pool-request aceptada. Para ello, edita el campo `homepage` del archivo
43+
`package.json`, sustituyendo `your_username` y `your_repo_name` por los tuyos
44+
propios, y envía los cambios a GitHub.
45+
46+
```json
47+
"homepage": "https://your_username.github.io/your_repo_name/"
48+
```
49+
50+
A continuación, ve a la configuración del repositorio de GitHub (`Settings` >
51+
`Pages`) y selecciona distribuir la versión de producción de los archivos desde
52+
la carpeta `/root` de la rama `gh-pages`, si no se ha hecho automáticamente.
53+
54+
![GitHub Pages settings](./assets/repo-settings.png)
55+
56+
### Estado de la implantación
57+
58+
El estado del último commit se indica con un icono junto al ID del commit.
59+
60+
- **Color amarillo** - el proyecto está compilado e implementado.
61+
- **Color verde** - La implementación se completó con éxito.
62+
- **Color rojo** - Se ha producido un error durante la verificación, la
63+
compilación o la implementación
64+
65+
Se puede ver información de estado más detallada haciendo clic en el icono y en
66+
la ventana desplegable del enlace `Detalles`.
67+
68+
![Deployment status](./assets/deploy-status.png)
69+
70+
### Página activa
71+
72+
Después de un tiempo, normalmente un par de minutos, la página real se puede ver
73+
en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí está
74+
el enlace a la versión activa de este repositorio
75+
[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).
76+
77+
Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña
78+
`Console` relacionados con rutas incorrectas de archivos CSS y JS del proyecto
79+
(**404**). Probablemente tienes un valor incorrecto para la propiedad `homepage`
80+
en el archivo `package.json`.
81+
82+
### Enrutamiento
83+
84+
Si la aplicación utiliza la librería `react-router-dom` para el enrutamiento, el
85+
componente `<BrowserRouter>` debe ser configurado adicionalmente pasando en la
86+
prop `basename`, el nombre exacto de tu repositorio. Las barras inclinadas al
87+
principio y al final de la cadena son obligatorias.
88+
89+
```jsx
90+
<BrowserRouter basename="/your_repo_name/">
91+
<App />
92+
</BrowserRouter>
93+
```
94+
95+
## ¿Cómo funciona?
96+
97+
![How it works](./assets/how-it-works.png)
98+
99+
1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un
100+
script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`.
101+
2. Todos los archivos del repositorio se copian en el servidor, donde el
102+
proyecto se inicializa, se verifica y se compila antes de ser implementado.
103+
3. Si todos los pasos tienen éxito, la versión de producción compilada de los
104+
archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el
105+
registro de ejecución del script indicará cuál es el problema.

0 commit comments

Comments
 (0)