├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json ├── 404.html └── index.html ├── assets ├── deploy-status.png ├── how-it-works.png ├── repo-settings.png ├── template-step-1.png ├── template-step-2.png ├── gh-actions-perm-1.png └── gh-actions-perm-2.png ├── jsconfig.json ├── uk_translation.yml ├── .editorconfig ├── .prettierrc.json ├── src ├── index.js ├── components │ └── App.jsx └── index.css ├── .gitignore ├── .github └── workflows │ └── deploy.yml ├── package.json ├── README.en.md ├── README.es.md ├── README.md ├── README.RO.md └── README.pl.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /assets/deploy-status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/deploy-status.png -------------------------------------------------------------------------------- /assets/how-it-works.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/how-it-works.png -------------------------------------------------------------------------------- /assets/repo-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/repo-settings.png -------------------------------------------------------------------------------- /assets/template-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/template-step-1.png -------------------------------------------------------------------------------- /assets/template-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/template-step-2.png -------------------------------------------------------------------------------- /assets/gh-actions-perm-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/gh-actions-perm-1.png -------------------------------------------------------------------------------- /assets/gh-actions-perm-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-90/HEAD/assets/gh-actions-perm-2.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /uk_translation.yml: -------------------------------------------------------------------------------- 1 | files: 2 | - source: /react-homework-template/blob/main/README.md 3 | translation: react-homework-template/%two_letters_code%/%original_file_name% 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 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 13 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 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 | } 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { App } from 'components/App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | export const App = () => { 2 | return ( 3 |
13 | React 90 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 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* 28 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import-normalize; /* bring in normalize.css styles */ 2 | 3 | body { 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 6 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 7 | sans-serif; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | } 11 | 12 | code { 13 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 14 | monospace; 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 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 25 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-homework-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://luxplanjay.github.io/react-90/", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.3", 8 | "@testing-library/react": "^12.1.4", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^18.1.0", 11 | "react-dom": "^18.1.0", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject", 20 | "lint:js": "eslint src/**/*.{js,jsx}" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Single Page Apps for GitHub Pages 6 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 58 | 59 | 60 | 61 | 62 |
63 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 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 `` 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 | 90 | 91 | 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. 106 | -------------------------------------------------------------------------------- /README.es.md: -------------------------------------------------------------------------------- 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 `` 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 | 91 | 92 | 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. 106 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React homework template 2 | 3 | Этот проект был создан при помощи 4 | [Create React App](https://github.com/facebook/create-react-app). Для знакомства 5 | и настройки дополнительных возможностей 6 | [обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). 7 | 8 | ## Создание репозитория по шаблону 9 | 10 | Используй этот репозиторий организации GoIT как шаблон для создания репозитория 11 | своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию 12 | `«Create a new repository»`, как показано на изображении. 13 | 14 | ![Creating repo from a template step 1](./assets/template-step-1.png) 15 | 16 | На следующем шаге откроется страница создания нового репозитория. Заполни поле 17 | его имени, убедись что репозиторий публичный, после чего нажми кнопку 18 | `«Create repository from template»`. 19 | 20 | ![Creating repo from a template step 2](./assets/template-step-2.png) 21 | 22 | После того как репозиторий будет создан, необходимо перейти в настройки 23 | созданного репозитория на вкладку `Settings` > `Actions` > `General` как 24 | показано на изображении. 25 | 26 | ![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) 27 | 28 | Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери 29 | опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это 30 | необходимо для автоматизации процесса деплоя проекта. 31 | 32 | ![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) 33 | 34 | Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок 35 | репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, 36 | клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на 37 | GitHub. 38 | 39 | ## Подготовка к работе 40 | 41 | 1. Убедись что на компьютере установлена LTS-версия Node.js. 42 | [Скачай и установи](https://nodejs.org/en/) её если необходимо. 43 | 2. Установи базовые зависимости проекта командой `npm install`. 44 | 3. Запусти режим разработки, выполнив команду `npm start`. 45 | 4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). 46 | Эта страница будет автоматически перезагружаться после сохранения изменений в 47 | файлах проекта. 48 | 49 | ## Деплой 50 | 51 | Продакшн версия проекта будет автоматически проходить линтинг, собираться и 52 | деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется 53 | ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого 54 | необходимо в файле `package.json` отредактировать поле `homepage`, заменив 55 | `your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. 56 | 57 | ```json 58 | "homepage": "https://your_username.github.io/your_repo_name/" 59 | ``` 60 | 61 | Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и 62 | выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если 63 | это небыло сделано автоматически. 64 | 65 | ![GitHub Pages settings](./assets/repo-settings.png) 66 | 67 | ### Статус деплоя 68 | 69 | Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. 70 | 71 | - **Желтый цвет** - выполняется сборка и деплой проекта. 72 | - **Зеленый цвет** - деплой завершился успешно. 73 | - **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. 74 | 75 | Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в 76 | выпадающем окне перейти по ссылке `Details`. 77 | 78 | ![Deployment status](./assets/deploy-status.png) 79 | 80 | ### Живая страница 81 | 82 | Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть 83 | по адресу указанному в отредактированном свойстве `homepage`. Например, вот 84 | ссылка на живую версию для этого репозитория 85 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 86 | 87 | Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок 88 | связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее 89 | всего у тебя неправильное значение свойства `homepage` в файле `package.json`. 90 | 91 | ### Маршрутизация 92 | 93 | Если приложение использует библиотеку `react-router-dom` для маршрутизации, 94 | необходимо дополнительно настроить компонент ``, передав в пропе 95 | `basename` точное название твоего репозитория. Слеш в начале строки обязателен. 96 | 97 | ```jsx 98 | 99 | 100 | 101 | ``` 102 | 103 | ## Как это работает 104 | 105 | ![How it works](./assets/how-it-works.png) 106 | 107 | 1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный 108 | скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. 109 | 2. Все файлы репозитория копируются на сервер, где проект инициализируется и 110 | проходит линтинг и сборку перед деплоем. 111 | 3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта 112 | отправляется в ветку `gh-pages`. В противном случае, в логе выполнения 113 | скрипта будет указано в чем проблема. 114 | -------------------------------------------------------------------------------- /README.RO.md: -------------------------------------------------------------------------------- 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 ``, trecând în prop-ul "basename" numele exact al repository-ului tău. Bara oblică la începutul șirului este obligatorie. 81 | 82 | jsx 83 | 84 | 85 | 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. 95 | -------------------------------------------------------------------------------- /README.pl.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [rosyjski](README.md), [polski](README.pl.md).** 2 | 3 | # React homework template 4 | 5 | Ten projekt został stworzony przy pomocy 6 | [Create React App](https://github.com/facebook/create-react-app). W celu 7 | zapoznania się z konfiguracją dodatkowych opcji 8 | [zobacz dokumentację](https://facebook.github.io/create-react-app/docs/getting-started). 9 | 10 | ## Utworzenie repozytorium zgodnie z szablonem 11 | 12 | Wykorzystaj to repozytorium organizacji GoIT jako szablon do utworzenia 13 | repozytorium własnego projektu. W tym celu kliknij na przycisk 14 | `"Use this template"` i wybierz opcję `"Create a new repository"`, jak pokazano 15 | na rysunku. 16 | 17 | ![Creating repo from a template step 1](./assets/template-step-1.png) 18 | 19 | W następnym kroku otworzy się strona utworzenia nowego repozytorium. Wypełnij 20 | pole nazwy i upewnij się, że repozytorium jest publiczne, a następnie kliknij na 21 | przycisk `"Create repository from template"`. 22 | 23 | ![Creating repo from a template step 2](./assets/template-step-2.png) 24 | 25 | Po utworzeniu repozytorium, należy przejść do jego ustawień w zakładce `Settings` > `Actions` > `General`, jak pokazano na rysunku. 26 | 27 | ![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) 28 | 29 | 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. 30 | 31 | ![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) 32 | 33 | Teraz masz własne repozytorium projektu, ze strukturą folderów i plików jak w 34 | szablonie. Pracuj z nim jak z innymi repozytoriami, klonuj je na swój komputer, 35 | pisz kod, rób commity i wysyłaj na GitHub. 36 | 37 | ## Przygotowanie do pracy 38 | 39 | 1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. 40 | [Ściągnij i zainstaluj](https://nodejs.org/en/), jeżeli trzeba. 41 | 2. Utwórz bazowe zależności projektu przy pomocy polecenia `npm install`. 42 | 3. Włącz tryb pracy, wykonując polecenie `npm start`. 43 | 4. Przejdź w przeglądarce pod adres 44 | [http://localhost:3000](http://localhost:3000). Ta strona będzie 45 | automatycznie przeładowywać się po zapisaniu zmian w plikach projektu. 46 | 47 | ## Deployment 48 | 49 | Produkcyjna wersja projektu będzie automatycznie poddana pracy lintera, budowana 50 | i deployowana na GitHub Pages, w gałęzi `gh-pages` za każdym razem, gdy 51 | aktualizuje się gałąź `main`, na przykład po bezpośrednim pushu lub przyjętym 52 | pull requeście. W tym celu należy w pliku `package.json` zredagować pole 53 | `homepage`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i 54 | wysłać zmiany do GitHub. 55 | 56 | ```json 57 | "homepage": "https://your_username.github.io/your_repo_name/" 58 | ``` 59 | 60 | Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) 61 | i wydystrybuować wersję produkcyjną plików z folderu `/root` gałęzi `gh-pages`, 62 | jeśli nie zostało to wykonane automatycznie. 63 | 64 | ![GitHub Pages settings](./assets/repo-settings.png) 65 | 66 | ### Status deploymentu 67 | 68 | Status deploymentu ostatniego commitu wyświetla się jako ikona obok jego 69 | identyfikatora. 70 | 71 | - **Żółty kolor** - wykonuje się zbudowanie i deployment projektu. 72 | - **Zielony kolor** - deploymnt zakończył się sukcesem. 73 | - **Czerwony kolor** - podczas pracy lintera, budowania lub deploymentu wystąpił 74 | błąd. 75 | 76 | Bardziej szczegółowe informacje o statusie można zobaczyć po kliknięciu na 77 | ikonkę i przejściu w wyskakującym oknie do odnośnika `Details`. 78 | 79 | ![Deployment status](./assets/deploy-status.png) 80 | 81 | ### Deployowana strona 82 | 83 | Po jakimś czasie, zazwyczaj kilku minut, zdeployowaną stronę będzie można 84 | zobaczyć pod adresem wskazanym w zredagowanej właściwości `homepage`. Tutaj na 85 | przykład znajduje się odnośnik do zdeployowanej strony w wersji dla tego 86 | repozytorium 87 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 88 | 89 | Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma 90 | błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu 91 | (**404**). Najprawdopodobniej wprowadzona została niewłaściwa wartość 92 | właściwości `homepage` w pliku `package.json`. 93 | 94 | ### Trasowanie 95 | 96 | Jeżeli aplikacja wykorzystuje bibliotekę `react-router-dom` dla trasowania, 97 | należy uzupełniająco skonfigurować komponent ``, przekazując w 98 | propsie `basename` dokładną nazwę twojego repozytorium. Slash na początku i na 99 | końcu łańcucha jest obowiązkowy. 100 | 101 | ```jsx 102 | 103 | 104 | 105 | ``` 106 | 107 | ## Jak to działa 108 | 109 | ![How it works](./assets/how-it-works.png) 110 | 111 | 1. Po każdym pushu do gałęzi `main` repozytorium GitHub, uruchamia się specjalny 112 | skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. 113 | 2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt zostaje 114 | zainicjowany i przechodzi pracę lintera oraz zbudowanie przed deploymentem. 115 | 3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna 116 | plików projektu wysyłana jest do gałęzi `gh-pages`. W przeciwnym razie, w 117 | logu wykonania skryptu zostanie wskazane z czym jest problem. 118 | --------------------------------------------------------------------------------