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

Let’s develop an in-depth understanding of `react-router` by building a simple React application to maintain a **contact list**.

# Creating a React app

In this lesson, we’ll use CRA (key: Create React App) to create a React app, but this is only one of several ways to develop one. The CRA template provides a development environment where we don’t have to configure different build tools. It’s best for building a single-page application, and it provides a friendly development environment and production optimization.

For those who are interested in more details on how CRA provides the above benefits, its official documentation can be found
 [here](https://create-react-app.dev/docs/getting-started). Other build tools, like Vite or Parcel, are also available.

 Use the following command in the terminal widget below to create a React app with CRA:

  `npx create-react-app contact-list`

 If CRA isn’t installed already, then it will ask permission to install it. Type y to give the permission.

Once it downloads the required files, open the project directory by typing the following command:

  `cd contact-list`

To see a list of files and folders, type `ls` or `dir`.

Learn to install react-router in a React application.

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

Creating a React App and Installing react-router

Creating a React app