diff --git a/README.en.md b/README.en.md deleted file mode 100644 index dce5bf9..0000000 --- a/README.en.md +++ /dev/null @@ -1,105 +0,0 @@ -# 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). - -## Создание репозитория по шаблону - -Используй этот репозиторий организации 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) - -Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок -репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, -клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на -GitHub. - -## Подготовка к работе - -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 `` 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 - - - -``` - -## 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. diff --git a/README.es.md b/README.es.md deleted file mode 100644 index f43c000..0000000 --- a/README.es.md +++ /dev/null @@ -1,105 +0,0 @@ -# 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. - -## Создание репозитория по шаблону - -Используй этот репозиторий организации 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) - -Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок -репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, -клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на -GitHub. - -## Подготовка к работе - -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 `` 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 - - - -``` - -## ¿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. diff --git a/README.pl.md b/README.pl.md deleted file mode 100644 index be1f226..0000000 --- a/README.pl.md +++ /dev/null @@ -1,117 +0,0 @@ -**Read in other languages: [rosyjski](README.md), [polski](README.pl.md).** - -# React homework template - -Ten projekt został stworzony przy pomocy -[Create React App](https://github.com/facebook/create-react-app). W celu -zapoznania się z konfiguracją dodatkowych opcji -[zobacz dokumentację](https://facebook.github.io/create-react-app/docs/getting-started). - -## Utworzenie repozytorium zgodnie z szablonem - -Wykorzystaj to repozytorium organizacji GoIT jako szablon do utworzenia -repozytorium własnego projektu. W tym celu kliknij na przycisk -`"Use this template"` i wybierz opcję `"Create a new repository"`, jak pokazano -na rysunku. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -W następnym kroku otworzy się strona utworzenia nowego repozytorium. Wypełnij -pole nazwy i upewnij się, że repozytorium jest publiczne, a następnie kliknij na -przycisk `"Create repository from template"`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -Po utworzeniu repozytorium, należy przejść do jego ustawień w zakładce `Settings` > `Actions` > `General`, jak pokazano na rysunku. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -Przescrolluj stronę do samego końca, w sekcji `«Workflow permissions»` wybierz opcję `«Read and write permissions»` i zaznacz pole w checkboksie. Jest to niezbędne do automatyzacji procesu deploymentu projektu. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Teraz masz własne repozytorium projektu, ze strukturą folderów i plików jak w -szablonie. Pracuj z nim jak z innymi repozytoriami, klonuj je na swój komputer, -pisz kod, rób commity i wysyłaj na GitHub. - -## Przygotowanie do pracy - -1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. - [Ściągnij i zainstaluj](https://nodejs.org/en/), jeżeli trzeba. -2. Utwórz bazowe zależności projektu przy pomocy polecenia `npm install`. -3. Włącz tryb pracy, wykonując polecenie `npm start`. -4. Przejdź w przeglądarce pod adres - [http://localhost:3000](http://localhost:3000). Ta strona będzie - automatycznie przeładowywać się po zapisaniu zmian w plikach projektu. - -## Deployment - -Produkcyjna wersja projektu będzie automatycznie poddana pracy lintera, budowana -i deployowana na GitHub Pages, w gałęzi `gh-pages` za każdym razem, gdy -aktualizuje się gałąź `main`, na przykład po bezpośrednim pushu lub przyjętym -pull requeście. W tym celu należy w pliku `package.json` zredagować pole -`homepage`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i -wysłać zmiany do GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" -``` - -Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) -i wydystrybuować wersję produkcyjną plików z folderu `/root` gałęzi `gh-pages`, -jeśli nie zostało to wykonane automatycznie. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Status deploymentu - -Status deploymentu ostatniego commitu wyświetla się jako ikona obok jego -identyfikatora. - -- **Żółty kolor** - wykonuje się zbudowanie i deployment projektu. -- **Zielony kolor** - deploymnt zakończył się sukcesem. -- **Czerwony kolor** - podczas pracy lintera, budowania lub deploymentu wystąpił - błąd. - -Bardziej szczegółowe informacje o statusie można zobaczyć po kliknięciu na -ikonkę i przejściu w wyskakującym oknie do odnośnika `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Deployowana strona - -Po jakimś czasie, zazwyczaj kilku minut, zdeployowaną stronę będzie można -zobaczyć pod adresem wskazanym w zredagowanej właściwości `homepage`. Tutaj na -przykład znajduje się odnośnik do zdeployowanej strony w wersji dla tego -repozytorium -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma -błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu -(**404**). Najprawdopodobniej wprowadzona została niewłaściwa wartość -właściwości `homepage` w pliku `package.json`. - -### Trasowanie - -Jeżeli aplikacja wykorzystuje bibliotekę `react-router-dom` dla trasowania, -należy uzupełniająco skonfigurować komponent ``, przekazując w -propsie `basename` dokładną nazwę twojego repozytorium. Slash na początku i na -końcu łańcucha jest obowiązkowy. - -```jsx - - - -``` - -## Jak to działa - -![How it works](./assets/how-it-works.png) - -1. Po każdym pushu do gałęzi `main` repozytorium GitHub, uruchamia się specjalny - skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. -2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt zostaje - zainicjowany i przechodzi pracę lintera oraz zbudowanie przed deploymentem. -3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna - plików projektu wysyłana jest do gałęzi `gh-pages`. W przeciwnym razie, w - logu wykonania skryptu zostanie wskazane z czym jest problem. diff --git a/public/favicon-icon.png b/public/favicon-icon.png new file mode 100644 index 0000000..af7460e Binary files /dev/null and b/public/favicon-icon.png differ diff --git a/public/index.html b/public/index.html index ea02e97..32ecada 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + - React App + Phonebook