Project : Web Page with React Router

Check The Live Website ➡️ Live Website

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

• react-router-dom@6.3

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 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 ✍