Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+charset = utf-8
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/deploy.yml

@@ -0,0 +1,24 @@
+name: Build and deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+
+      - name: Install, lint, build 🔧
+        run: |
+          npm install
+          npm run lint:js
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: build

.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+#Junk
+.vscode/
+.idea/
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

README.en.md

@@ -0,0 +1,105 @@
+# React homework template
+
+This project was created with
+[Create React App](https://github.com/facebook/create-react-app). To get
+acquainted and configure additional features
+[refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+## Creating a repository by template
+
+Use this GoIT repository as a template for creating a repository
+of your project. To use it just tap the `«Use this template»` button and choose
+`«Create a new repository»` option, as you can see on the image below.
+
+![Creating repo from a template step 1](./assets/template-step-1.png)
+
+The page for creating a new repository will open on the next step. Fill out
+the Name field and make sure the repository is public, then click
+`«Create repository from template»` button.
+
+![Creating repo from a template step 2](./assets/template-step-2.png)
+
+You now have a personal project repository, having a repository-template file 
+and folder structure. After that, you can work with it as you would with any 
+other private repository: clone it on your computer, write code, commit, and 
+send it to GitHub.
+
+## Preparing for coding
+
+1. Make sure you have an LTS version of Node.js installed on your computer.
+   [Download and install](https://nodejs.org/en/) if needed.
+2. Install the project's base dependencies with the `npm install` command.
+3. Start development mode by running the `npm start` command.
+4. Go to [http://localhost:3000](http://localhost:3000) in your browser. This
+   page will automatically reload after saving changes to the project files.
+
+## Deploy
+
+The production version of the project will automatically be linted, built, and
+deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch
+is updated. For example, after a direct push or an accepted pull request. To do
+this, you need to edit the `homepage` field in the `package.json` file,
+replacing `your_username` and `your_repo_name` with your own, and submit the
+changes to GitHub.
+
+```json
+"homepage": "https://your_username.github.io/your_repo_name/"
+```
+
+Next, you need to go to the settings of the GitHub repository (`Settings` >
+`Pages`) and set the distribution of the production version of files from the
+`/root` folder of the `gh-pages` branch, if this was not done automatically.
+
+![GitHub Pages settings](./assets/repo-settings.png)
+
+### Deployment status
+
+The deployment status of the latest commit is displayed with an icon next to its
+ID.
+
+- **Yellow color** - the project is being built and deployed.
+- **Green color** - deployment completed successfully.
+- **Red color** - an error occurred during linting, build or deployment.
+
+More detailed information about the status can be viewed by clicking on the
+icon, and in the drop-down window, follow the link `Details`.
+
+![Deployment status](./assets/deploy-status.png)
+
+### Live page
+
+After some time, usually a couple of minutes, the live page can be viewed at the
+address specified in the edited `homepage` property. For example, here is a link
+to a live version for this repository
+[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).
+
+If a blank page opens, make sure there are no errors in the `Console` tab
+related to incorrect paths to the CSS and JS files of the project (**404**). You
+most likely have the wrong value for the `homepage` property in the
+`package.json` file.
+
+### Routing
+
+If your application uses the `react-router-dom` library for routing, you must
+additionally configure the `<BrowserRouter>` component by passing the exact name
+of your repository in the `basename` prop. Slashes at the beginning and end of
+the line are required.
+
+```jsx
+<BrowserRouter basename="/your_repo_name/">
+  <App />
+</BrowserRouter>
+```
+
+## How it works
+
+![How it works](./assets/how-it-works.png)
+
+1. After each push to the `main` branch of the GitHub repository, a special
+   script (GitHub Action) is launched from the `.github/workflows/deploy.yml`
+   file.
+2. All repository files are copied to the server, where the project is
+   initialized and linted and built before deployment.
+3. If all steps are successful, the built production version of the project
+   files is sent to the `gh-pages` branch. Otherwise, the script execution log
+   will indicate what the problem is.

README.es.md

@@ -0,0 +1,105 @@
+# React homework template
+
+Este proyecto fue creado con la ayuda de
+[Create React App](https://github.com/facebook/create-react-app).
+[Consulte la documentación](https://facebook.github.io/create-react-app/docs/getting-started)
+para familiarizarse con las funciones opcionales y configurarlas.
+
+## Crear un repositorio desde una plantilla
+
+Usa este repositorio de la organización GoIT como plantilla para crear el repositorio de tu proyecto. 
+Para hacer esto, haz clic en `«Use this template»` y selecciona la opción
+`«Create a new repository»`, tal como se muestra en la imagen.
+
+![Creating repo from a template step 1](./assets/template-step-1.png)
+
+Para el siguiente paso deberás abrir la página para crear un nuevo repositorio. 
+Ponle nombre, asegúrate de que el repositorio sea público y haz clic en el botón
+`«Create repository from template»`.
+
+![Creating repo from a template step 2](./assets/template-step-2.png)
+
+Ahora ya tienes un repositorio de proyecto personal, junto a una estructura de 
+archivos y carpetas del repositorio de plantillas. Luego trabaja con esto, así 
+como con cualquier otro repositorio personal, realiza una copia en tu computadora 
+y súbelo a GitHub.
+
+## Prepararse para el trabajo
+
+1. Asegúrate de que la versión LTS de Node.js está instalada en tu computador.
+   [Descárguela e instálela](https://nodejs.org/en/) de ser necesario.
+2. Instala las dependencias base del proyecto con el comando `npm install`.
+3. Inicia el modo de desarrollo ejecutando el comando `npm start`.
+4. En tu navegador, ve a la dirección
+   [http://localhost:3000](http://localhost:3000). Esta página se recargará
+   automáticamente después de guardar los cambios en los archivos del proyecto.
+
+## Implementación
+
+La versión de producción del proyecto se verificará, compilará y desplegará
+automáticamente en GitHub Pages, en la rama `gh-pages`, cada vez que se
+actualice la rama `main`. Por ejemplo, después de un Push directo o de una
+Pool-request aceptada. Para ello, edita el campo `homepage` del archivo
+`package.json`, sustituyendo `your_username` y `your_repo_name` por los tuyos
+propios, y envía los cambios a GitHub.
+
+```json
+"homepage": "https://your_username.github.io/your_repo_name/"
+```
+
+A continuación, ve a la configuración del repositorio de GitHub (`Settings` >
+`Pages`) y selecciona distribuir la versión de producción de los archivos desde
+la carpeta `/root` de la rama `gh-pages`, si no se ha hecho automáticamente.
+
+![GitHub Pages settings](./assets/repo-settings.png)
+
+### Estado de la implantación
+
+El estado del último commit se indica con un icono junto al ID del commit.
+
+- **Color amarillo** - el proyecto está compilado e implementado.
+- **Color verde** - La implementación se completó con éxito.
+- **Color rojo** - Se ha producido un error durante la verificación, la
+  compilación o la implementación
+
+Se puede ver información de estado más detallada haciendo clic en el icono y en
+la ventana desplegable del enlace `Detalles`.
+
+![Deployment status](./assets/deploy-status.png)
+
+### Página activa
+
+Después de un tiempo, normalmente un par de minutos, la página real se puede ver
+en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí está
+el enlace a la versión activa de este repositorio
+[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).
+
+Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña
+`Console` relacionados con rutas incorrectas de archivos CSS y JS del proyecto
+(**404**). Probablemente tienes un valor incorrecto para la propiedad `homepage`
+en el archivo `package.json`.
+
+### Enrutamiento
+
+Si la aplicación utiliza la librería `react-router-dom` para el enrutamiento, el
+componente `<BrowserRouter>` debe ser configurado adicionalmente pasando en la
+prop `basename`, el nombre exacto de tu repositorio. Las barras inclinadas al
+principio y al final de la cadena son obligatorias.
+
+```jsx
+<BrowserRouter basename="/your_repo_name/">
+  <App />
+</BrowserRouter>
+```
+
+## ¿Cómo funciona?
+
+![How it works](./assets/how-it-works.png)
+
+1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un
+   script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`.
+2. Todos los archivos del repositorio se copian en el servidor, donde el
+   proyecto se inicializa, se verifica y se compila antes de ser implementado.
+3. Si todos los pasos tienen éxito, la versión de producción compilada de los
+   archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el
+   registro de ejecución del script indicará cuál es el problema.