Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.1 Introduction

Routing is a key concept in single-page applications. In this lesson I'll introduce React Router, the de facto routing solution for React. Later on, if you continue with this course, I'll show you how to use React Router to set up routes, navigate between them, and also provide nested visual containment for React components.

1.How It Works: React Router
2 lessons, 15:19

Free Lesson

How It Works: React Router

1.1 Introduction

[SOUND] >> Hello, everyone. Welcome to this Coffee Break Course on React Router. My name is Pavan Podila, and in this course we'll take a quick tour of how the React Router works. We'll start off with the basic concepts of React Router such as routes, URLs, and of course route configuration. We'll then jump into a sample application consisting of a dashboard, categories, and products that will see all these concepts in action. We'll build a sample app using webpack, babble, and the ES2015 syntax. We'll gradually build up the route configuration, starting with the main dashboard route and adding more route for categories, products, and reviews. We'll also make use of some router API to creatively configure the links to different routes, re-route component, and receive some parameters, and these can handle inside the component render function. We'll leverage this functionality and change the way we render different components. As we create nested routes, we'll also look at the concept of visual containment, which allows us to create a visual hierarchy of the components. All in all, we'll be covering a variety of concepts. So join me as a take a quick tour of React Router.

Back to the top