{"id":20121041,"url":"https://github.com/veronika-chenko/practice-react","last_synced_at":"2026-04-09T20:12:56.276Z","repository":{"id":62146975,"uuid":"553582388","full_name":"Veronika-chenko/practice-react","owner":"Veronika-chenko","description":"practicing different React.js concepts","archived":false,"fork":false,"pushed_at":"2023-01-06T13:23:50.000Z","size":5192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T07:22:46.629Z","etag":null,"topics":["react","react-router","styled-components"],"latest_commit_sha":null,"homepage":"https://veronika-chenko.github.io/practice-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Veronika-chenko.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-18T12:44:35.000Z","updated_at":"2023-05-15T12:31:37.000Z","dependencies_parsed_at":"2023-02-06T04:16:30.396Z","dependency_job_id":null,"html_url":"https://github.com/Veronika-chenko/practice-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Veronika-chenko%2Fpractice-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Veronika-chenko%2Fpractice-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Veronika-chenko%2Fpractice-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Veronika-chenko%2Fpractice-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Veronika-chenko","download_url":"https://codeload.github.com/Veronika-chenko/practice-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241564715,"owners_count":19982997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","styled-components"],"created_at":"2024-11-13T19:25:44.466Z","updated_at":"2026-04-09T20:12:56.244Z","avatar_url":"https://github.com/Veronika-chenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React homework template\n\nThis project was created with\n[Create React App](https://github.com/facebook/create-react-app). \nTo get acquainted and configure additional features\n[refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\n## Preparing a new project\n\n1. Make sure you have an LTS version of Node.js installed on your computer.\n   [Download and install](https://nodejs.org/en/) if needed.\n2. Clone this repository.\n3. Change the folder name from `react-homework-template` to the name of your project.\n4. Create a new empty GitHub repository.\n5. Open the project in VSCode, launch the terminal and link the project to the GitHub repository \n  [according to the instructions] (https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories #changing-a-remote-repositorys-url).\n6. Install the project's base dependencies with the `npm install` command.\n7. Start development mode by running the `npm start` command.\n8. Go to [http://localhost:3000](http://localhost:3000) in your browser.\n This page will automatically reload after saving changes to the project files.\n\n## Deploy\n\nThe production version of the project will automatically be linted, built, \nand deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` \nbranch is updated. For example, after a direct push or an accepted pull request. \nTo do this, you need to edit the `homepage` field in the `package.json` file, \nreplacing `your_username` and `your_repo_name` with your own, and submit the \nchanges to GitHub.\n\n```json\n\"homepage\": \"https://your_username.github.io/your_repo_name/\"\n```\n\nNext, you need to go to the settings of the GitHub repository (`Settings` \u003e `Pages`) \nand set the distribution of the production version of files from the `/root` \nfolder of the `gh-pages` branch, if this was not done automatically.\n\n![GitHub Pages settings](./assets/repo-settings.png)\n\n### Deployment status\n\nThe deployment status of the latest commit is displayed with an icon next to its ID.\n\n- **Yellow color** - the project is being built and deployed.\n- **Green color** - deployment completed successfully.\n- **Red color** - an error occurred during linting, build or deployment.\n\nMore detailed information about the status can be viewed by clicking on the icon, \nand in the drop-down window, follow the link `Details`.\n\n![Deployment status](./assets/status.png)\n\n### Live page\nAfter some time, usually a couple of minutes, the live page can be viewed at the address \nspecified in the edited `homepage` property. For example, here is a link to a live version for this repository\n[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).\n\nIf a blank page opens, make sure there are no errors in the `Console` tab related \nto incorrect paths to the CSS and JS files of the project (**404**). You most likely \nhave the wrong value for the `homepage` property in the `package.json` file.\n\n### Routing\nIf your application uses the `react-router-dom` library for routing, you must \nadditionally configure the `\u003cBrowserRouter\u003e` component by passing the exact name \nof your repository in the `basename` prop. Slashes at the beginning and end of \nthe line are required.\n\n```jsx\n\u003cBrowserRouter basename=\"/your_repo_name/\"\u003e\n  \u003cApp /\u003e\n\u003c/BrowserRouter\u003e\n```\n\n## How it works\n\n![How it works](./assets/how-it-works.png)\n\n1. After each push to the `main` branch of the GitHub repository, a special script \n  (GitHub Action) is launched from the `.github/workflows/deploy.yml` file.\n2. All repository files are copied to the server, where the project is initialized \n  and linted and built before deployment.\n3. If all steps are successful, the built production version of the project files is \n  sent to the `gh-pages` branch. Otherwise, the script execution log will indicate \n  what the problem is.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveronika-chenko%2Fpractice-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fveronika-chenko%2Fpractice-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveronika-chenko%2Fpractice-react/lists"}