DJS08 Project Brief: React Router

🎥 INSERT LOOM PRESENTATION LINK: [Here]

After cloning the repo, run npm install to install the dependencies

Are you ready to get stuck into some React Router? For this challenge, you are required to code along with the lecturer from this lesson on Scrimba V1 VanLife Project Bootstrapping or on Scrimba V2 click the link here VanLife Project Bootstrapping

The starter code has all the CSS styling required for the project; you will just need to link the corresponding classes as you code along. Jump into the start code here: GitHub Repository.

The focus for this project will be to understand routing and present your code. Along with your code, you will need to submit a recorded presentation talking through the presentation points included below.

React Routing Presentation Talking Points

For your recorded presentation, you will be discussing key concepts related to React Router, an essential tool for building single-page applications. To illustrate your understanding, address the following three questions in your presentation. These questions are designed to test your knowledge of the content from the "Advanced React Routing" Van Life Project, including setup, functionality, and application of React Router.

Question 1: Explain the Setup and Basic Configuration of React Router

Key Points to Cover:

• What is the purpose of using React Router in a React application?
• How do you set up React Router using BrowserRouter as shown in the lessons?
• Describe the role of the <Routes> and <Route> components in defining the navigation structure.

Question 2: Application of Route Parameters and Nested Routes

Key Points to Cover:

• Explain what route parameters are and how they are used in React Router, including the use of useParams() to access these parameters.
• Discuss the concept of nested routes as introduced in the lessons. What are nested routes, and how do they benefit the structure of a React application?
• Provide an example, such as the configuration for nested routes in the VanLife project.

Question 3: Implementation of Navigation Controls and Dynamic Linking

Key Points to Cover:

• How does the <Link> component enhance navigation within a React application?
• Describe the use of NavLink for active styling. What makes NavLink different from the basic Link component?
• Discuss the use of search parameters and the useSearchParams hook to dynamically filter content, as seen in the VanLife project challenges.

Be prepared to provide code snippets and real-world application examples from your Van Life Project to support your explanations.

Make sure to submit your project to the DJS08 Project Tab on the LMS. Include a link to your Loom Presentation in your README.