MGC-JUL-24 | Syed Arslan Haider| React-Router|WEEK3

[SyedArslanHaider]

Pull Request Title: Add React Router, Links, and Adjust Design

Description:

1. Integrated React Router to enable navigation between different pages.
2. Added routes for TaskManager, and AddToTask.
3. Implemented links for seamless navigation.
4. Adjusted design elements for improved user experience.

[aniolg]

Well done @SyedArslanHaider!
Your React Router implementation is just what we expect! The layout is perfect.

If you have time, try to apply the commented changes to apply the conventions of the library. This will structure better your project and make it more scalable.

📄 You can find the React Routing conventions here:

https://reactrouter.com/how-to/file-route-conventions#basic-routes

📄 Don't miss checking all the mentioned concepts of the class on the official React Router documentation:

https://reactrouter.com/start/library/routing

⚠️ Remember to follow the conventions for having an organized and readable code.

See you. Great work!

[aniolg]

The implementation is good and works as expected. But the library has a specific NavLink component with more advanced features.

📄 If you are keen to learn more about these advanced features, you can consult the React Router documentation: https://reactrouter.com/start/library/navigating#navlink

[aniolg]

This component is a Layout now. The implementation is alright!

But could be nice trying to follow the conventions and relocate this file to the pages folder.

The recommendation from React Router library is set a name with an underscore sign in the begging of the file name of the layout component. Also recommend using a specific naming for the different page component files.

An example of can we name our pages directory is the following:

 src/
├── pages/
│   ├── _task-dashboard.add-task.jsx // This is your AddToTask page component (your current TaskManager.jsx file)
│   ├── _task-dashboard.task-manager.jsx // This is your TaskManager page component (your current TaskManager.jsx file)
│   └── _task-dashboard.jsx // This is your navigation bar layout component (your current App.jsx file)

📄 You can find more information about React Router convention in the official documentation: https://reactrouter.com/how-to/file-route-conventions#nested-layouts-without-nested-urls