Gain insights into React Router v6, learn types of routes, navigation, private routes, page animations, and code-splitting. Create dynamic, multi-page React apps through hands-on projects.

Frontend Development with React Router v6.png

react.tar.gz

Installing-React-Router

React JS is the most popular JavaScript framework for building interactive UIs. A React application typically consists of various views. A developer must provide convenient and familiar navigation between these views. React Router is a library that enables easy implementation of this navigation. 

This course will introduce you to the React Router basics, its routes, and its components. You'll learn different types of routes and how to apply navigation in a React app. You'll also learn advanced concepts related to routing and implement them in a React application. You'll also create an authentication app by implementing private and protected routes. You'll also learn to add animation while changing pages and improve the performance of your application by code-splitting.

By the end of this course, you’ll be able to create multi-page dynamic React applications using a React Router by doing a hands-on project. This knowledge will help you greatly in your journey to becoming a frontend/full-stack developer.

Getting Started with React Router v6

# Introduction

In this project, we’ll create a small authentication application. Using this application, a user can log in, log out, and view their profile. We’ll use Context API to store the user’s data and authentication state. We’ll also restrict unauthenticated users from accessing private components, and we’ll learn more about private and restricted routes along the way. A set of instructions and hints will be provided to help build this application.

# Project setup

Here, we’ve created a React app using #key# CRA: create-react-app #key# and installed the `react-router-dom` package. We can also use build tools like `Vite` or `Parcel`. Let’s open the `src/pages` folder from the coding widget in the app preview section.

The `Dashboard`, `Home`, and `profile` components contain simple text, while the `Login.js` file contains a form with one input and a submit button. When clicked,  the submit button calls the `handleSubmit` function, which logs the input value or displays an error to the user if there is no input value. The `App.css` file contains all the required styling for this application.

# Adding dummy data

We’ve created a fake database that contains user details, such as ID, name, and email. Open the `FakeData.js` file from the components folder or check out the following code snippet to view this database.

Let’s open the `FakeData.js` file from the following coding widget. In this file, we’ve declared an array of objects named `users` starting on line 1. Each user has a first name, a last name, an email address, and an ID. At the end of this file, we’ve defined a function called `getAllUsers` that returns this array. 

# App preview

Run the following coding widget and see the output. Click on the URL next to “Your app can be found at:” to open the application in a new tab.

Learn to create a React app using CRA and configure it for our project.

Introduction

Getting Started

Routing

Navigation

Advanced Routing

Advanced Navigation/Links

Project: Authentication App

Bonus React Topics: Page Transitions and Code Splitting

What’s Next?

React Router Fundamentals

Project Setup and Initialization

Introduction