Course Content

Expert React

1. React Key Concepts

Course Overview React Component Approaches to Styling in React Apps React Hooks React Context Local Development Environment

2. React Router

Fundamentals of Routing Get Started with React Router Basic Routing Lazy Loading Navigation Routes Basic Concepts Sum Up Challenge: Route Basic Concepts Query String Modify Query String React Router Section Sum Up

3. Redux Toolkit

Introduction to Redux Getting Started with Redux Toolkit Real Deal Store Actions Reducer Involve Redux into React Challenge Time Challenge: Store Challenge: Actions Challenge: Reducer Challenge: Involve Redux into React Redux Toolkit Section Sum Up

4. Formik

Powerful Form Library for React Get Started with Formik Custom Formik Hook Involve Formik into React component Add Initial Values Form Submission Form Validation Challenge Overview Challenge: useFormik Hook Challenge: Binding Formik with React Component Challenge: Add Initial Values Challenge: Form Submission Challenge: Validation Formik Section Sum Up

5. Jest

Introduction to Testing in React Get Started with Jest Create the Jest Test File First Test Case Second Test Case Challenge: Third Test Case Jest Section Sum Up

6. Next Steps

What is next?

Expert React

Challenge: Route Basic Concepts

Note
All challenges may appear broken by default since they contain whitespace sections where you need to input the necessary code. Once you correctly fill in these whitespace sections, the completed code will be displayed on the live page.

Task 1

Your task is to enhance the app by implementing routing and navigation functionality. The app has two main views: the home page (HomePage component) and the products page (ProductsPage component).

To complete this task, follow these steps:

Wrap the root component (App) with the BrowserRouter component to enable routing functionality.
Import the HomePage and ProductsPage components using the lazy function from React, ensuring they are imported dynamically.
Inside the App component, use the Suspense component to display a loading fallback while the views are being loaded. Utilize the Loader component for this purpose.
Define the routes using the Route component within the Routes component, mapping each route path to the corresponding component.
- Set the / path to lead to the HomePage` component.
- Set the /products path to lead to the ProductsPage component.
In the NavBar component, create links to the corresponding routes using the Link or NavLink components.

Ensure that your implementation allows users to navigate between the home and products pages seamlessly. Test the app thoroughly to verify the navigation and functionality.

Hint

1. In the index.js file, import the BrowserRouter component from the React Router library and use it to wrap the root component, enabling routing functionality.

2. To implement lazy-loading, import the lazy function from the React library.

3. Import the Suspense component from the React library to add a fallback to the app. Set the fallback prop to a value that will be shown while any view is loading.

4. Use the Route and Routes components from the React Router library to specify routes for the app.

5. When setting a path, use the path prop in the Route component. Make sure all Route components are wrapped with the Routes component.

6. To create navigation between pages, utilize the Link or NavLink components from the React Router library. Set the to prop with the corresponding path values.

Solution

Everything was clear?

Section 2. Chapter 7