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

# What’s next?

Now that you’ve reached the end of this course, we recommend that you practice by building more projects to solidify your understanding of all the concepts you’ve learned.

While this course provides a solid foundation, there’s always more to learn. A good place to start is to choose from the project ideas below and start building them.


# Project ideas for `react-router`

Use the features of `react-router` to build the following projects:


## Quiz app

A quiz app contains components such as questions and responses. Create a quiz app that, instead of rendering every question on a single page, uses `react-router` to load each question individually when the user clicks on the next question button.


## Authentication with admin panel

We have already created a simple authentication app as part of this course. Take it to the next level by implementing an admin panel component that only an administrator or a particular user can access. You may also want to implement role-based authentication.
## Dashboard application


Create a dashboard with multiple pages that loads different components on each page. You can add components like the user’s profile and settings.


## Movie finder

Create an application that allows people to search for movies using public APIs. When the user clicks on any movie from the search result, redirect them to a component containing the movie’s details. This app can use many `react-router` features, such as search parameters and navigation.


## Project showcase

Create a showcase for your projects. Add hashtags to each project so that when someone clicks on those hashtags, they can see all the projects that contain similar hashtags.

## Storytelling website

Create a website that tells a story. Load chapters on different routes and make them interactive by adding elements such as transition animations, images, and modal components.


## Crypto directory

Create a website that contains information about the most famous cryptocurrencies, and implement searching and filtering functionalities. Show user-specific information about crypto in the modal components.

Use these projects to get comfortable with your newfound React skills. The more projects you build, the better you will understand how these systems work. Get creative and use all the `react-router` features to create a project that you can showcase in your portfolio. 

Solidify these new concepts by implementing an independent 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 Ideas for Practice

What’s next?