├── .editorconfig ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .prettierrc.json ├── README.en.md ├── README.es.md ├── README.md ├── README.pl.md ├── assets ├── how-it-works.png ├── repo-settings.png └── status.png ├── jsconfig.json ├── package-lock.json ├── package.json ├── public ├── 404.html ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── components └── App.jsx ├── index.css └── index.js /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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). 5 | To get acquainted and configure additional features 6 | [refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started). 7 | 8 | ## Preparing a new project 9 | 10 | 1. Make sure you have an LTS version of Node.js installed on your computer. 11 | [Download and install](https://nodejs.org/en/) if needed. 12 | 2. Clone this repository. 13 | 3. Change the folder name from `react-homework-template` to the name of your project. 14 | 4. Create a new empty GitHub repository. 15 | 5. Open the project in VSCode, launch the terminal and link the project to the GitHub repository 16 | [according to the instructions] (https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories #changing-a-remote-repositorys-url). 17 | 6. Install the project's base dependencies with the `npm install` command. 18 | 7. Start development mode by running the `npm start` command. 19 | 8. Go to [http://localhost:3000](http://localhost:3000) in your browser. 20 | This page will automatically reload after saving changes to the project files. 21 | 22 | ## Deploy 23 | 24 | The production version of the project will automatically be linted, built, 25 | and deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` 26 | branch is updated. For example, after a direct push or an accepted pull request. 27 | To do this, you need to edit the `homepage` field in the `package.json` file, 28 | replacing `your_username` and `your_repo_name` with your own, and submit the 29 | changes to GitHub. 30 | 31 | ```json 32 | "homepage": "https://your_username.github.io/your_repo_name/" 33 | ``` 34 | 35 | Next, you need to go to the settings of the GitHub repository (`Settings` > `Pages`) 36 | and set the distribution of the production version of files from the `/root` 37 | folder of the `gh-pages` branch, if this was not done automatically. 38 | 39 | ![GitHub Pages settings](./assets/repo-settings.png) 40 | 41 | ### Deployment status 42 | 43 | The deployment status of the latest commit is displayed with an icon next to its ID. 44 | 45 | - **Yellow color** - the project is being built and deployed. 46 | - **Green color** - deployment completed successfully. 47 | - **Red color** - an error occurred during linting, build or deployment. 48 | 49 | More detailed information about the status can be viewed by clicking on the icon, 50 | and in the drop-down window, follow the link `Details`. 51 | 52 | ![Deployment status](./assets/status.png) 53 | 54 | ### Live page 55 | After some time, usually a couple of minutes, the live page can be viewed at the address 56 | specified in the edited `homepage` property. For example, here is a link to a live version for this repository 57 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 58 | 59 | If a blank page opens, make sure there are no errors in the `Console` tab related 60 | to incorrect paths to the CSS and JS files of the project (**404**). You most likely 61 | have the wrong value for the `homepage` property in the `package.json` file. 62 | 63 | ### Routing 64 | If your application uses the `react-router-dom` library for routing, you must 65 | additionally configure the `` component by passing the exact name 66 | of your repository in the `basename` prop. Slashes at the beginning and end of 67 | the line are required. 68 | 69 | ```jsx 70 | 71 | 72 | 73 | ``` 74 | 75 | ## How it works 76 | 77 | ![How it works](./assets/how-it-works.png) 78 | 79 | 1. After each push to the `main` branch of the GitHub repository, a special script 80 | (GitHub Action) is launched from the `.github/workflows/deploy.yml` file. 81 | 2. All repository files are copied to the server, where the project is initialized 82 | and linted and built before deployment. 83 | 3. If all steps are successful, the built production version of the project files is 84 | sent to the `gh-pages` branch. Otherwise, the script execution log will indicate 85 | what the problem is. 86 | -------------------------------------------------------------------------------- /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). [Consulte la documentación](https://facebook.github.io/create-react-app/docs/getting-started) para familiarizarse con las funciones opcionales y configurarlas. 5 | 6 | ## Preparación de un nuevo proyecto 7 | 8 | 1. Asegúrate de que la versión LTS de Node.js está instalada en tu computador. 9 | [Descárguela e instálela](https://nodejs.org/en/) de ser necesario. 10 | 2. Clona este repositorio. 11 | 3. Cambia el nombre de la carpeta `react-homework-template` por el nombre de tu proyecto. 12 | 4. Crea un nuevo repositorio vacío en GitHub. 13 | 5. Abre el proyecto en VSCode, ejecuta el terminal y enlaza el proyecto con el repositorio de GitHub 14 | [como se indica](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 15 | 6. Instala las dependencias base del proyecto con el comando `npm install`. 16 | 7. Inicia el modo de desarrollo ejecutando el comando `npm start`. 17 | 8. En tu navegador, ve a la dirección [http://localhost:3000](http://localhost:3000). 18 | Esta página se recargará automáticamente después de guardar los cambios en los archivos del proyecto. 19 | 20 | ## Implementación 21 | 22 | La versión de producción del proyecto se verificará, compilará y desplegará 23 | automáticamente en GitHub Pages, en la rama `gh-pages`, cada vez que se actualice 24 | la rama `main`. Por ejemplo, después de un Push directo o de una Pool-request 25 | aceptada. Para ello, edita el campo `homepage` del archivo `package.json`, 26 | sustituyendo `your_username` y `your_repo_name` por los tuyos propios, y envía 27 | los cambios a GitHub. 28 | 29 | ```json 30 | "homepage": "https://your_username.github.io/your_repo_name/" 31 | ``` 32 | 33 | A continuación, ve a la configuración del repositorio de GitHub (`Settings` > 34 | `Pages`) y selecciona distribuir la versión de producción de los archivos desde la 35 | carpeta `/root` de la rama `gh-pages`, si no se ha hecho automáticamente. 36 | 37 | ![GitHub Pages settings](./assets/repo-settings.png) 38 | 39 | ### Estado de la implantación 40 | 41 | El estado del último commit se indica con un icono junto al ID del commit. 42 | 43 | - **Color amarillo** - el proyecto está compilado e implementado. 44 | - **Color verde** - La implementación se completó con éxito. 45 | - **Color rojo** - Se ha producido un error durante la verificación, la compilación o la implementación 46 | 47 | Se puede ver información de estado más detallada haciendo clic en el icono y 48 | en la ventana desplegable del enlace `Detalles`. 49 | 50 | ![Deployment status](./assets/status.png) 51 | 52 | ### Página activa 53 | 54 | Después de un tiempo, normalmente un par de minutos, la página real se puede ver 55 | en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí está 56 | el enlace a la versión activa de este repositorio 57 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 58 | 59 | Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña 60 | `Console` relacionados con rutas incorrectas de archivos CSS y JS del proyecto 61 | (**404**). Probablemente tienes un valor incorrecto para la propiedad `homepage` 62 | en el archivo `package.json`. 63 | 64 | ### Enrutamiento 65 | 66 | Si la aplicación utiliza la librería `react-router-dom` para el enrutamiento, 67 | el componente `` debe ser configurado adicionalmente pasando en 68 | la prop `basename`, el nombre exacto de tu repositorio. Las barras inclinadas 69 | al principio y al final de la cadena son obligatorias. 70 | 71 | ```jsx 72 | 73 | 74 | 75 | ``` 76 | 77 | ## ¿Cómo funciona? 78 | 79 | ![How it works](./assets/how-it-works.png) 80 | 81 | 1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un 82 | script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`. 83 | 2. Todos los archivos del repositorio se copian en el servidor, donde el 84 | proyecto se inicializa, se verifica y se compila antes de ser implementado. 85 | 3. Si todos los pasos tienen éxito, la versión de producción compilada de los 86 | archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el 87 | registro de ejecución del script indicará cuál es el problema. 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Русский](README.md), [Polska](README.pl.md), 2 | [English](README.en.md), [Spanish](README.es.md).** 3 | 4 | # React homework template 5 | 6 | Этот проект был создан при помощи 7 | [Create React App](https://github.com/facebook/create-react-app). Для знакомства 8 | и настройки дополнительных возможностей 9 | [обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). 10 | 11 | ## Подготовка нового проекта 12 | 13 | 1. Убедись что на компьютере установлена LTS-версия Node.js. 14 | [Скачай и установи](https://nodejs.org/en/) её если необходимо. 15 | 2. Клонируй этот репозиторий. 16 | 3. Измени имя папки с `react-homework-template` на имя своего проекта. 17 | 4. Создай новый пустой репозиторий на GitHub. 18 | 5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием 19 | [по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 20 | 6. Установи базовые зависимости проекта командой `npm install`. 21 | 7. Запусти режим разработки, выполнив команду `npm start`. 22 | 8. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). 23 | Эта страница будет автоматически перезагружаться после сохранения изменений в 24 | файлах проекта. 25 | 26 | ## Деплой 27 | 28 | Продакшн версия проекта будет автоматически проходить линтинг, собираться и 29 | деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется 30 | ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого 31 | необходимо в файле `package.json` отредактировать поле `homepage`, заменив 32 | `your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. 33 | 34 | ```json 35 | "homepage": "https://your_username.github.io/your_repo_name/" 36 | ``` 37 | 38 | Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и 39 | выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если 40 | это небыло сделано автоматически. 41 | 42 | ![GitHub Pages settings](./assets/repo-settings.png) 43 | 44 | ### Статус деплоя 45 | 46 | Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. 47 | 48 | - **Желтый цвет** - выполняется сборка и деплой проекта. 49 | - **Зеленый цвет** - деплой завершился успешно. 50 | - **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. 51 | 52 | Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в 53 | выпадающем окне перейти по ссылке `Details`. 54 | 55 | ![Deployment status](./assets/status.png) 56 | 57 | ### Живая страница 58 | 59 | Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть 60 | по адресу указанному в отредактированном свойстве `homepage`. Например, вот 61 | ссылка на живую версию для этого репозитория 62 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 63 | 64 | Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок 65 | связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее 66 | всего у тебя неправильное значение свойства `homepage` в файле `package.json`. 67 | 68 | ### Маршрутизация 69 | 70 | Если приложение использует библиотеку `react-router-dom` для маршрутизации, 71 | необходимо дополнительно настроить компонент ``, передав в пропе 72 | `basename` точное название твоего репозитория. Слеши в начале и конце строки 73 | обязательны. 74 | 75 | ```jsx 76 | 77 | 78 | 79 | ``` 80 | 81 | ## Как это работает 82 | 83 | ![How it works](./assets/how-it-works.png) 84 | 85 | 1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный 86 | скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. 87 | 2. Все файлы репозитория копируются на сервер, где проект инициализируется и 88 | проходит линтинг и сборку перед деплоем. 89 | 3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта 90 | отправляется в ветку `gh-pages`. В противном случае, в логе выполнения 91 | скрипта будет указано в чем проблема. 92 | -------------------------------------------------------------------------------- /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 ustawieniami dodatkowych opcji 8 | [zobacz dokumentację](https://facebook.github.io/create-react-app/docs/getting-started). 9 | 10 | ## Przygotowanie nowego projektu 11 | 12 | 1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. 13 | [Ściągnij i zainstaluj](https://nodejs.org/en/), jeżeli trzeba. 14 | 2. Sklonuj to repozytorium. 15 | 3. Zmień nazwę folderu z `react-homework-template` na nazwę swojego projektu. 16 | 4. Utwórz nowe, puste repozytorium na GitHub. 17 | 5. Otwórz projekt w VSCode, włącz terminal i połącz projekt z repozytorium 18 | GitHub 19 | [zgodnie z instrukcją](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 20 | 6. Utwórz bazowe zależności projektu przy pomocy polecenia `npm install`. 21 | 7. Włącz tryb pracy, wykonując polecenie `npm start`. 22 | 8. Przejdź w przeglądarce pod adres 23 | [http://localhost:3000](http://localhost:3000). Ta strona będzie 24 | automatycznie przeładowywać się po zapisaniu zmian w plikach projektu. 25 | 26 | ## Deployment 27 | 28 | Produkcyjna wersja projektu będzie automatycznie poddana pracy lintera, budowana 29 | i deployowana na GitHub Pages, w gałęzi `gh-pages` za każdym razem, gdy 30 | aktualizuje się gałąź `main`, na przykład po bezpośrednim pushu lub przyjętym 31 | pull requeście. W tym celu należy w pliku `package.json` zredagować pole 32 | `homepage`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i 33 | wysłać zmiany do GitHub. 34 | 35 | ```json 36 | "homepage": "https://your_username.github.io/your_repo_name/" 37 | ``` 38 | 39 | Następnie należy przejść do ustawień repozytorium GitHub (`Settings` > `Pages`) 40 | i wydystrybuować wersję produkcyjną plików z folderu `/root` gałęzi `gh-pages`, 41 | jeśli nie zostało to wykonane automatycznie. 42 | 43 | ![GitHub Pages settings](./assets/repo-settings.png) 44 | 45 | ### Status deploymentu 46 | 47 | Status deploymentu ostatniego commitu wyświetla się jako ikona obok jego 48 | identyfikatora. 49 | 50 | - **Żółty kolor** - wykonuje się zbudowanie i deployment projektu. 51 | - **Zielony kolor** - deploymnt zakończył się sukcesem. 52 | - **Czerwony kolor** - podczas pracy lintera, budowania lub deploymentu wystąpił 53 | błąd. 54 | 55 | Bardziej szczegółowe informacje o statusie można zobaczyć po kliknięciu na 56 | ikonkę i przejściu w wyskakującym oknie do odnośnika `Details`. 57 | 58 | ![Deployment status](./assets/status.png) 59 | 60 | ### Deployowana strona 61 | 62 | Po jakimś czasie, zazwyczaj kilku minut, zdeployowaną stronę będzie można 63 | zobaczyć pod adresem wskazanym w zredagowanej właściwości `homepage`. Tutaj na 64 | przykład znajduje się odnośnik do zdeployowanej strony w wersji dla tego 65 | repozytorium 66 | [https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). 67 | 68 | Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma 69 | błędów związanych z nieprawidłowymi ścieżkami do plików CSS i JS projektu 70 | (**404**). Najprawdopodobniej wprowadzona została niewłaściwa wartość 71 | właściwości `homepage` w pliku `package.json`. 72 | 73 | ### Trasowanie 74 | 75 | Jeżeli aplikacja wykorzystuje bibliotekę `react-router-dom` dla trasowania, 76 | należy uzupełniająco skonfigurować komponent ``, przekazując w 77 | propsie `basename` dokładną nazwę twojego repozytorium. Slash na początku i na 78 | końcu łańcucha jest obowiązkowy. 79 | 80 | ```jsx 81 | 82 | 83 | 84 | ``` 85 | 86 | ## Jak to działa 87 | 88 | ![How it works](./assets/how-it-works.png) 89 | 90 | 1. Po każdym pushu do gałęzi `main` repozytorium GitHub, uruchamia się specjalny 91 | skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. 92 | 2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt zostaje 93 | zainicjowany i przechodzi pracę lintera oraz zbudowanie przed deploymentem. 94 | 3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna 95 | plików projektu wysyłana jest do gałęzi `gh-pages`. W przeciwnym razie, w 96 | logu wykonania skryptu zostanie wskazane z czym jest problem. 97 | -------------------------------------------------------------------------------- /assets/how-it-works.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-5n/1b518b18aa0831d26dfb5c80f9a429c0a7488759/assets/how-it-works.png -------------------------------------------------------------------------------- /assets/repo-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-5n/1b518b18aa0831d26dfb5c80f9a429c0a7488759/assets/repo-settings.png -------------------------------------------------------------------------------- /assets/status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-5n/1b518b18aa0831d26dfb5c80f9a429c0a7488759/assets/status.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-homework-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://goitacademy.github.io/react-homework-template/", 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/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-5n/1b518b18aa0831d26dfb5c80f9a429c0a7488759/public/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-5n/1b518b18aa0831d26dfb5c80f9a429c0a7488759/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/react-5n/1b518b18aa0831d26dfb5c80f9a429c0a7488759/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | export const App = () => { 2 | return ( 3 |
13 | React homework template 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------