Conceptual Exercise

Answer the following questions below:

• What is the purpose of the React Router?

  • The purpose of React Router is to enable navigation between different views or pages in a React application, while maintaining a Single Page Application (SPA) experience.

• What is a single page application?

  • A Single Page Application (SPA) is a web app that loads a single HTML page and dynamically updates content as the user interacts with the app. SPAs provide a smoother user experience because they don't require reloading the entire page for navigation or data updates.

• What are some differences between client side and server side routing?

  • Client-side routing: Handles navigation entirely in the browser without sending requests to the server, leading to faster transitions between pages. The content is dynamically loaded via JavaScript.
  • Server-side routing: Requires the browser to request the server for new HTML pages on each navigation, leading to full page reloads. It is typically slower but can be better for SEO.

• What are two ways of handling redirects with React Router? When would you use each?

  1. <Navigate /> Component: Used within components to redirect the user programmatically based on conditions like authentication.

  2. <Redirect /> in Route (v5): Used in route definitions to automatically redirect users based on their path. In v6, this is achieved through Navigate.

  3. You'd use <Navigate /> when you need conditional, programmatic navigation, and <Redirect /> when you want static redirects based on URL patterns.

• What are two different ways to handle page-not-found user experiences using React Router?

  1. Catch-all Route: A route like * can be used as a catch-all to render a 404 page if none of the other routes match.
  2. Redirecting to a custom 404 page: When a non-matching route is accessed, you can use <Navigate /> to redirect the user to a specific 404 page.

• How do you grab URL parameters from within a component using React Router?

  • You can grab URL parameters using the useParams() hook. This hook returns an object of key-value pairs representing the dynamic parts of the URL.

• What is context in React? When would you use it?

  • React Context is a way to share values (like global state) between components without passing props down manually through every level of the component tree. You'd use context to avoid "prop drilling," when a piece of data needs to be accessible to many nested components.

• Describe some differences between class-based components and function components in React.

  • Class-based components: Use ES6 class syntax and were traditionally used to manage state and lifecycle methods before hooks were introduced.
  • Function components: Simpler, stateless components before hooks. With hooks, function components can now manage state and lifecycle events, making them the preferred approach.

• What are some of the problems that hooks were designed to solve?

  • Hooks were introduced to address the limitations of class-based components, such as:
    • The complexity of managing state and lifecycle methods in large components.
    • The difficulty of reusing stateful logic across components.
    • The need for simpler, more readable components that still maintain access to features like state, side-effects, and context.