Part 1: Reconfiguring the App

Setup and Getting Started

• Accept the assignment on GitHub Classroom.
• Clone the repository to your local machine.
• You will find it already setup with the Rock Paper Scissors Game.
• Install the dependencies by running npm install.
• Start the development server by running npm run dev.

Housekeeping

• Create a new folder for the different pages of the app.
  • You can call it pages, routes, views, or anything else you prefer and makes sense.
• Move the game components to a rps folder, then move that folder to the new folder.

Create a Home Page Component

• Create a new file HomePage.js in the routes folder.
• Create a functional component HomePage in the HomePage.js file.
  • For now, it can just be a simple heading and a paragraph.
  • Feel free to get fancy and creative with the content.

Create a Navigation Component

• Create a new folder for the different components of the app.
  • You can call it components, common, shared, or anything else you prefer and makes sense.
• Create a new file Navigation.js in the components folder.
• This components will serve as the navigation bar for the app.
• To start, this can just be a simple unordered list with a few list items.
  • Each list item will be a link to a different page of the app.
  • For now, you can just have a link to the home page.

Install and Setup React Router

• Install the react-router-dom package by running npm install react-router-dom.
• In the main.js file, you can replace the App component with a <RouterProvider> component.
• In the RouterProvider component, you'll need to provide the routes.
• You'll need to use the createBrowserRouter function from react-router-dom to define the routes.
• Setup the routes for the home page and the rock-paper-scissors game.

Update the Navigation Component

• Update the Navigation component to use the Link component from react-router-dom.
• The links should point to the home page and the rock-paper-scissors game.