React.js: Data Flow Inside of Application

Transcript of the free preview lesson. Remaining lessons unlock with the full course.

Hello, my name is Tony and in these lessons, we will talk about data flow inside of an application, folder structure and custom hooks with context API. In this lesson, we will talk about multiple components routing and navigation. Let's take a look at the application. You can add tasks here one by one, check them off and delete them. And there's a counter underneath that keeps account for us. So far, everything has been served up for us by a single component and that component used to be housed in the app. So now, our app looks a little different. We see that right now this is available for us at slash agenda. And if we go here, we get this minimal little page just to illustrate the point that says welcome to my app. So, how we're doing that is we are using a react component provided to us by react router dump called browser router or router. This is the nomenclature for it. Router is the very top component, routes are immediately underneath. Now here once again, we are exporting browser router. You can do this to remove confusion. This effectively gives us the same thing. So, the browser router is the very top component, routes is immediately underneath. And individual routes are here is a single route component. So, what is going on inside of this single component that points each individual path to some kind of a component that serves this route. So, the path is first. So, for slash agenda, when this path is exact, the element we are using to output for this route is this agenda element right here. Let's take a look at it. It's basically what we had in the app component before. We moved it out to be its own component. These come as props. So, we are passing them from the app component and the rest is as it used to be before. So, there are no changes to this part. We are doing the same thing here. Only we are not passing any props here whatsoever because this is a very, very simple component that just basically says welcome to my app in the middle of the screen. But we also have the ability to do something pretty neat here. So, so far we have been using exact paths. But we also have the ability to use wildcards. So, for example, if we wanted every request to slash tasks slash anything to be redirected to slash agenda, this is how we would go about this. We would use the route component. The paths would be slash tasks slash star. So, star is, of course, a wildcard for anything following the slash tasks path or part of the path rather. And we are going to use navigate, which is a special element that we are also transporting from react or outer dumb. And we are going to use this navigate to navigate to slash agenda. Let's see how that works. So, if we were to go to and literally anything here, we are going to be redirected to agenda. Now, of course, in a professional organization, this is going to get a lot more scaled up. But basically, what you are going to see is going to be some kind of a variation of what we've just looked at. But once again, scaled up to a professional scale in a real world environment. In our next lesson, we are going to take a look at proper application folder structure. Thank you for watching.