Hands-On React Router

Hands-On React Router

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 1h 40m | 365 MB

Implement routing by creating and configuring routes in web and native apps using React Router components

React Router is a frontend package that listens to changes in your URL and keeps your application in-sync by rendering the corresponding view components. It enables you to build a single-page web application that incorporates navigation without refreshing the page when the user navigates to it.

In this course, you will be introduced to React Router and create your first route using this React component. You will configure your routes by passing parameters and creating nested routes. By working with various React Router components, you will master their various configuration options and learn how to use the Redirect and Switch components.

By the end of this course, you will be ready to work with React Router and make routing configurations in a server-side, rendered React application.

Learn

  • Explore React Router components and utilize them effectively in your React applications
  • Bootstrap your React Router application using create-react-app and use npm to install commands so that you can start coding your application logic right away
  • Best practices and techniques that will make your React Router app secure and bug-free
  • Route server-rendered and client-rendered web apps so that you can adjust to both paradigms and decide what is best for your application
  • Route in both web and native applications so you can appreciate their differences and similarities and develop both application types
  • Integrate React Router into your app so you are prepared to develop scenarios and systems using this architecture
Table of Contents

Introduction to React Router
1 The Course Overview
2 What Is React Router
3 Adding Routing Using React Router
4 URL Parameters with React Router
5 Nested Routes
6 How to Parse Query Parameters

React Router Fundamentals
7 Render Catch All Routes
8 Conditionally Render Component
9 Redirecting to Another Page

Implement Dynamic and Secure Routing
10 What Is a Higher-Order Component
11 Creating HOC for Authenticated Routing
12 User Login
13 User Logout

Integrate React Router with Redux
14 What Is Redux
15 Creating Store and Reducers
16 Integrating Routing Logic to Redux App

Building Sidebar and Preventing Route Transition
17 Ambiguous Routes
18 Building Sidebar with React Router
19 Preventing Route Transition

Code Splitting and Route Config
20 Defining Declarative Routes
21 Code Splitting