Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Router (v6) - The Complete Guide
Rating: 4.3 out of 5(25 ratings)
1,334 students

React Router (v6) - The Complete Guide

Master React Router API with practical best practices. Learn component-based routing, authentication scenarios, and more
Last updated 7/2023
English

What you'll learn

  • Understanding the basic concepts of React Router
  • Master Nested Routes in React Router by learning how to define child routes and use components for your nested routes
  • Develop Protected Routes by learning how to protect some routes with authentication patterns
  • Fetch data from Rest-API endpoints by using React Router API features
  • Learn best practices in navigation between different paths of your application with relative and absolute navigation techniques
  • Build dynamic routes and implement navigation based on data coming from backend server
  • Learn how to pass parameters and use them in your components using URL Parameters in React Router
  • Learn advanced concepts and practices such as navigation deltas, passing state with navigation and domain-driven routing

Course content

6 sections35 lectures3h 34m total length
  • Introduction2:06

    Master react router v6 by building a real world online bookshop single page app, exploring component-based routing, protected routes, dynamic and nested routing, url parameters, and crud operations.

  • Requirements1:04

    Gain basic knowledge in react.js and JavaScript, install Node.js and npm, manage dependencies, and use VS Code to edit and run the course code.

  • React Project Setup2:43

    Set up a React project with Node.js, npx create-react-app, install dependencies via npm install, and run npm start to explore React Router v6 and frontend-backend communication using a proxy.

  • Server Demo Walk-through2:44

Requirements

  • Basic knowledge in ReactJS

Description

Welcome to the only Udemy course teaching React Router from zero to mastery!

In this course I teach you everything you need to know about React Router v6 as a react developer by building a real-life project from the ground up. With this course you will master all the complex React routing concepts with concrete real-life examples as we move on a full-stack building an online book shop single page application.

I will walk you beyond the information that you can find in the documentations and blogs and teach you industrial best practices with real-world scenarios that do make sense for you and level up your skills as a React developer for real.

You will learn how to implement different types of component-based routing into your application along with other scenarios such as protected routes and authentication.

Most of the resources out there, only mention React router as a side-tool in their courses but in this course all the materials are meant to teach you the React router API with all the best practices and some of the hidden tips that I learned the hard way in my career life as a React developer, to prepare you for developing your React projects as an expert.

First we explore the basic concepts such as declaring a path, adding some styles based on the active path and how to deal with 404 routes.

Then we move on to learning navigation and using elements such Link and Navlink in React Router v6.

After that we touch on advanced topics in React routing including nested routing, dynamic routing, fetching data based on URL parameters and more.

Finally, we implement a complete set of CRUD operations against a backend server to experiment all the React routing features related to CRUD operations and see a lot of routing best practices for enhancing our data fetching and CRUD operations.

So, hopefully I will see you in the course to start leveling up your React Routing Skills.

Who this course is for:

  • React developers looking to learn or level up their current knowledge in React Router API
  • Front-end Developers
  • Developers looking to learn React