Task 4 : React Router with CSS Styling

[yogeshtakeo]

Objective:

To gain proficiency in implementing routing functionality in React applications using React Router, and to integrate CSS styling mechanisms learned from previous tasks to enhance the user interface.

Task Description:

Part 1: Setting Up React Router

1. Installation and Setup:

   • Install React Router in your React project using npm or yarn.
   • Set up basic routing structure in your application.

2. Creating Route Components:

   • Create multiple React components representing different pages or views of your application.
   • Define routes for each component using React Router's <Route> component.

Part 2: Implementing Routing Functionality

3. Navigation Bar Creation:

   • Design and implement a navigation bar using CSS, incorporating styling techniques learned from previous tasks.
   • Include navigation links corresponding to different routes in your application.

4. Routing Integration:

   • Integrate the navigation links with React Router by wrapping them with <Link> components.
   • Ensure that clicking on each navigation link navigates the user to the corresponding route/component.

Part 3: Styling and Enhancements

5. Page Styling:

   • Apply CSS styling to each route/component to enhance its visual appearance.
   • Utilize CSS properties such as margin, padding, width, height, font styling, and animations to create visually appealing UI elements.

6. Dynamic Styling Based on Route:

   • Implement dynamic styling changes based on the active route.
   • Apply different styles to the navigation links or components based on whether they are currently active or not.

Part 4: Testing and Refinement

7. Testing Navigation:

   • Test the navigation functionality by clicking on different links in the navigation bar.
   • Ensure that the application navigates to the corresponding routes/components without errors.

8. User Experience Enhancement:

   • Evaluate the overall user experience of navigating through the application.
   • Refine CSS styling and routing implementation to optimize user interaction and visual appeal.

Submission Guidelines:

• Create a React project folder containing your implementation.
• Include code files for React components, CSS stylesheets, and any other relevant assets.
• Provide documentation or a README file explaining the project structure, routing setup, and CSS styling choices.
• Submit your project folder or GitHub repository link for evaluation.

Tips:

• Refer to React Router documentation and tutorials for guidance on setting up routing in React applications.
• Use CSS Flexbox or Grid layout for creating responsive and flexible UI designs.
• Experiment with CSS animations and transitions to add subtle visual effects and improve user engagement.

[satshree]

[sonamLama22]

Task 4 Sonam

https://github.com/yogeshtakeo/BFS_45_Repositary/tree/sonam-task4

art-gallery.webm

[sherpa2025]

Nima Task 4 Repo--> https://github.com/yogeshtakeo/BFS_45_Repositary/tree/nima-task4

[gsajan21]

https://github.com/yogeshtakeo/BFS_45_Repositary/tree/sajan-task4

[dhawasangbolama2]

https://github.com/yogeshtakeo/BFS_45_Repositary/tree/dhawa-task4

[aashirwad43]