react hook

.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/checkout@v2.3.1
+
+      - name: Install, lint, build 🔧
+        run: |
+          npm install
+          npm run lint:js
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@4.1.0
+        with:
+          branch: gh-pages
+          folder: build

.gitignore

@@ -1,130 +1,27 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+#Junk
+.vscode/
+.idea/
 
-# Optional REPL history
-.node_repl_history
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Output of 'npm pack'
-*.tgz
+# testing
+/coverage
 
-# Yarn Integrity file
-.yarn-integrity
+# production
+/build
 
-# dotenv environment variable files
-.env
+# misc
+.DS_Store
+.env.local
 .env.development.local
 .env.test.local
 .env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
 
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+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.