Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skycooper/reactrouterwebpage
Project aims to create a Web Page with Router.
https://github.com/skycooper/reactrouterwebpage
private-route react react-hooks react-router
Last synced: about 1 month ago
JSON representation
Project aims to create a Web Page with Router.
- Host: GitHub
- URL: https://github.com/skycooper/reactrouterwebpage
- Owner: SkyCooper
- Created: 2022-10-26T11:57:09.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-01T19:53:48.000Z (about 2 years ago)
- Last Synced: 2023-07-05T15:50:53.583Z (over 1 year ago)
- Topics: private-route, react, react-hooks, react-router
- Language: JavaScript
- Homepage: https://cooper-reactrouterpage.netlify.app/
- Size: 7.86 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project : Web Page with React Router
## Check The Live Website ➡️ [Live Website](https://cooper-reactrouterpage.netlify.app/)
## Visualization of the Website
## Description
Project aims to create a Web Page with Router.
## Learning Outcomes
At the end of the project, you will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Project(folder)
|
|----README.md
├── public
│ └── index.html
├── src
│ ├── assets.js
│ │ └── images
│ ├── components
│ │ ├── Footer.js
│ │ ├── Card.js
│ │ └── Navbar.js
│ ├── pages
│ │ ├── Home.js
│ │ ├── About.js
│ │ ├── Services.js
│ │ ├── Html.js
│ │ ├── Css.js
│ │ └── Logo.js
│ ├── router
│ │ └── AppRouter.js│
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
```
### Dependencies
### Overview
I mastered HTML & CSS & JS & ReactJS features in this project.
You can see the visual representation of the website above.
## Notes
- Step 1: Create React App using `yarn create react-app web-page-with-router` or `npx create-react-app web-page-with-router`.
- Step 2: Build Web Page using ReactJS, react-router and useHistory.
- Step 3: Push your application into your own public repo on Github.
- Step 4: Add project gif to your project and README.md file.
- 💡 You can add additional functionalities and design to your app.
## Resources
- 🔥 You can use [`react-router`](https://reactrouter.com/en/main) for your own work.
## Support
Open an Issue, I will check it a soon as possible 👀
Don't forget to start the repo ⭐
# ⌛ Happy Coding ✍