React.js: Data Flow Inside of Application

Name: React.js: Data Flow Inside of Application
Author: Tony Davydets

Learn the routing and navigation inside a React web application

Preview the first lesson free — get full access to all 1 lessons.

Course: On-Demand

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.

Provider : Tony Davydets 1 Lesson · 13m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This course covers essential concepts related to routing and navigation in a React web application. You will learn how to handle different routes and create links to navigate between pages. Additionally, you will learn about the Context API and how to create custom hooks.

Routing and navigation are essential parts of any web application and React provides tools to make this process easy and intuitive. You will learn how to create a routing system for your application using React Router. You will learn how to define different routes for different pages, how to use link components to navigate between pages, and how to pass parameters through URLs.

Passing data between components can become tedious as your application grows, especially if you must pass data through multiple layers of components. In this module, you will learn how to create and use the Context API to share data across your application easily. You will also learn how to create custom hooks with the Context API, which can simplify the process of passing data throughout the application.

Lastly, you will be introduced to a suggested folder structure for organizing your React application. You will learn how to organize your components, styles, and utilities into separate directories, which can make your code more manageable and easier to navigate.

What You'll Learn

Navigate React web applications using React Router
Define different routes for different pages and create links to navigate between them
Pass parameters through URLs to move data between pages
Use the Context API to share data across your application
Create custom hooks with the Context API to simplify passing data
Organize components, styles, and utilities into a suggested folder structure

Key Takeaways

Routing and navigation are essential parts of any web application, and React provides tools to make the process easy and intuitive.
React Router lets you build a routing system that defines routes, uses link components for navigation, and passes parameters through URLs.
The Context API shares data across an application without passing it through multiple layers of components.
Custom hooks built with the Context API simplify passing data throughout the application.
A suggested folder structure that separates components, styles, and utilities makes code more manageable and easier to navigate.

Frequently Asked Questions

What does this course cover?

It covers routing and navigation in a React web application, including handling routes and creating links with React Router, using the Context API to share data, creating custom hooks with the Context API, and a suggested folder structure for organizing your application.

What will I learn about managing data flow in React?

You will learn how to pass data between components using the Context API to share data across your application easily, and how to create custom hooks with the Context API to simplify passing data throughout the application.

How is navigation handled in this course?

You will learn to create a routing system using React Router, define different routes for different pages, use link components to navigate between pages, and pass parameters through URLs.

What lessons are included in this course?

The course includes three lessons: Multiple Components, Routing, and Navigation; Application Folder Structure; and Passing Data and Custom Hooks With Context API.

What skills are associated with this course?

Associated skills include Create React App, Flux (React.js), React JSX, React VR, React.js (JavaScript library), and WebMethods Flow.