Routing | Mastering React: An In-Depth Zero to Hero Video Series
Summary
TLDRIn this React JS tutorial, the instructor introduces routing in single-page applications, explaining its necessity for navigating without page refreshes. The video contrasts traditional multi-page navigation with React's dynamic content rendering and then demonstrates how to implement routing using the 'react-router-dom' library. The instructor guides viewers through setting up routes, linking navigation, and passing parameters. The session concludes with a challenge to create an app routing to user detail pages, hinting at advanced routing topics for future videos.
Takeaways
- 🎓 This video is part of a 'React JS - Zero to Hero' series aimed at beginners learning React JS from scratch.
- 📝 The previous video focused on form handling in React, while this video tackles the topic of routing in React applications.
- 🌐 Routing is crucial for single-page applications (SPAs) as it directs users to different pages based on their actions or requests without full page reloads.
- 🔗 The presenter demonstrates the difference between traditional multi-page applications and SPAs, highlighting how SPAs do not refresh the page but initially lack URL changes and browser history functionality.
- 🛠️ To implement routing in React, third-party libraries like 'react-router-dom' are used, as React does not have a built-in routing solution.
- 🛑 The video shows how to install 'react-router-dom' and use it to wrap components within a 'BrowserRouter' for basic routing functionality.
- 🔄 The 'Routes' and 'Route' components from 'react-router-dom' are used to define paths and associate them with corresponding components.
- 🔑 The video explains how to handle initial page loads by setting a default route and how to create navigation links using the 'Link' component.
- 🚧 Advanced routing concepts like route parameters, nested routes, protected routes, and routing with query parameters are mentioned but will be covered in future videos.
- 📌 A practical task is given to the viewers to create an application that routes to a user detail page based on a user ID, hinting at the use of hardcoded JSON data for user information.
Q & A
What is the main topic of discussion in this React JS tutorial video?
-The main topic of discussion in this React JS tutorial video is Routing in React, specifically for single page applications.
Why is routing important in single page applications?
-Routing is important in single page applications because it allows users to be directed to different pages based on their actions or requests without refreshing the page, and it enables the use of browser history features like back and forward buttons.
How does the tutorial demonstrate the need for routing in React applications?
-The tutorial demonstrates the need for routing by comparing a simple HTML application with multiple HTML files to a React application that uses state, props, and conditional rendering without routing, highlighting the lack of URL changes and browser history functionality in the latter.
What is the difference between routing in Angular and React as mentioned in the video?
-In Angular, routing comes as an inbuilt module, whereas in React, developers can either implement their own routing solution or use third-party libraries like React Router.
Which library does the tutorial use to implement routing in a React application?
-The tutorial uses the 'react-router-dom' library to implement routing in a React application.
How does the tutorial suggest adding routing to a React application?
-The tutorial suggests installing the 'react-router-dom' library, wrapping components inside the 'BrowserRouter', creating 'Route' elements with 'path' and 'element' props, and using 'Link' components for navigation.
What is the purpose of the 'path' and 'element' props in a 'Route' component?
-The 'path' prop in a 'Route' component is used to match the URL, and the 'element' prop specifies the component that should be rendered when the path matches the URL.
How can you make a React application show a default component when the application is loaded?
-To show a default component when a React application is loaded, you can add a 'Route' with an empty path ('/') that renders the desired default component.
What does the tutorial suggest to fix non-working navigation links in a React application?
-To fix non-working navigation links in a React application, the tutorial suggests using the 'Link' component from 'react-router-dom' and passing the 'to' prop with the exact path name.
What advanced routing concepts does the tutorial mention will be covered in future videos?
-The tutorial mentions that future videos will cover advanced routing concepts such as route with params, nested routes, protected routes, and routing with query params.
What task does the tutorial assign to the viewers to practice routing in React?
-The tutorial assigns a task to create an application where clicking on a user routes to a user detail page, fetching and displaying information related to that user using a hardcoded JSON and the user ID passed through the route.
Outlines
📚 Introduction to React Routing
This paragraph introduces the topic of routing in React for beginners. It explains the importance of routing in single-page applications (SPAs) and how it directs users to different pages based on their actions or requests. The instructor provides a comparison between a traditional multi-page HTML application and a React application to illustrate the need for routing. They show that without proper routing, the URL does not change, and browser navigation buttons do not work as expected. The paragraph concludes with an introduction to implementing routing using the 'react-router-dom' library, which is a third-party library for handling navigation in React applications.
🛠 Implementing Basic Routing in React
The instructor demonstrates how to implement basic routing in a React application. They guide through the process of installing the 'react-router-dom' library and setting up the router in the application. The explanation includes wrapping components within the 'BrowserRouter', creating route elements with 'path' and 'element' props, and configuring the routes to display different components based on the URL. The paragraph also covers how to handle the initial page load by setting a default route and how to integrate navigation links using the 'Link' component from 'react-router-dom'. The summary emphasizes the simplicity of setting up basic routing in React applications.
🔍 Advanced Routing Concepts in React
In this paragraph, the instructor briefly touches on advanced routing concepts such as route parameters, nested routes, protected routes, and routing with query parameters. They mention that these topics will be covered in a separate video series called 'React JS Hero to Superhero'. The focus then shifts to demonstrating how to pass parameters through routes using a colon syntax. An example is given where an 'id' parameter is passed in the URL, and the 'useParams' hook is used in the 'About' component to access this parameter. The paragraph ends with a task for the viewers to create an application that routes to a user detail page based on a user ID, suggesting the use of a hardcoded JSON for demonstration purposes.
Mindmap
Keywords
💡React JS
💡Routing
💡Single Page Application (SPA)
💡React Router DOM
💡Components
💡State and Props
💡Conditional Rendering
💡URL Parameters
💡Link Component
💡useParams Hook
💡Hardcoded JSON
Highlights
Introduction to React JS Zero to Hero series for beginners.
Explanation of form handling in the previous video.
Introduction to the topic of routing in React.
Definition of routing in single page applications.
Demonstration of a simple HTML application with multiple pages.
Observation of page refresh and URL changes in a non-SPA.
Comparison with a React application using state and props for content display.
Illustration of the need for routing in SPAs with an example using React Router.
Explanation of how routing allows for URL changes and functional back/forward buttons.
Overview of implementing routing in React using react-router-dom.
Instructions on installing react-router-dom using npm.
Code walkthrough of wrapping components in BrowserRouter.
Step-by-step guide to creating routes with path and element props.
Solution to displaying content on application load with a default route.
Integration of Link components from react-router-dom for navigation.
Introduction to advanced routing concepts like route with params, nested routes, and protected routes.
Demonstration of passing parameters through routes using colon syntax.
Tutorial on fetching and displaying user information based on user ID.
Assignment for viewers to create an application routing to user detail pages.
Encouragement to use a hardcoded JSON for user data in the exercise.
Announcement of the next video, which will involve creating a complete application.
Call to action for viewers to like, subscribe, and support the channel.
Transcripts
Hi Friends
Welcome back to React JS - Zero to Hero series.
This series is for beginners who wants to learn React JS from Scratch.
In the last video I have explained about form handling in react.
In this video, I am going to explain about Routing in React.
Let's start.
When comes to single page applications, routing is an important topic.
Routing is a process in which a user is directed to different pages based on their action or
request.
I would like to show you an example, so that you can easily understand the need for routing
in single page applications.
I have created this simple HTML application, in which I have 3 pages.
This is not a single page application and so you can see we have 3 html files.
Let me open this in browser.
And, when I click any of the navigation links, we can see the entire html is getting changed.
Also, every time the page is getting refreshed.
And, we can also see the back and forward buttons are working.
Ok, let me show you another application.
This is a react application.
Here I have tried to replicate the same usecase.
But, I am just hiding and showing different contents using state, props and conditional
rendering.
This time, we can see the page is not refreshing.
But we can also see, the url is not getting changed and so back and forward buttons are
not working.
So, this is not the right solution.
Here comes the need for routing.
Let me show you this one.
This one is implemented using router.
And so, we can see the page is not refreshing, in the mean time, the URL is getting changed
and the back and forward buttons are also working.
This is why we need routing for single page applications.
Now, let me show you how we can implement routing in react applications.
In frameworks like angular, routing is coming as an inbuilt module.
But in react, either we can implement our own routing solution or we can use third party
libraries like react router.
For this demo, I am going to use this react router dom library.
Ok.
Let's start.
I have actually created the same application but in this version, I have not implemented
routing so far.
And so, we can see the navigation links are not working.
Let me explain the code setup quickly.
In index dot js, I am having a header component and app component.
In header component, we can see just the navigation items.
And in app dot js, I am just having the About component.
So, we can see this, but the links are not working.
Let's add routing.
First, we need to install the react router dom library.
We can use npm install react router dom to install this library.
It is installed.
Now, let me start the server and let me go to index dot js.
Here, let me wrap these two components inside browser router.
We can import browser router from react router dom library.
And in app component, first let me delete this hardcoded about component.
And, we are going to create the routes.
For that, first let's have a routes element.
Inside that, let me have a route element.
We can also import routes and route from the react router dom library.
To this route component, we can pass path and element props.
Path is the one which is going to get matched with the URL.
Element is the one where we need to mention the component.
And so, when we enter an URL, based on the matched path, the respective component will
be served.
So, when it is going to be about, let me show the About component, similarly let me create
two more routes and configure the respective path and element.
So, if I change the URL, we can see the respective content.
But, initially when the application is loaded, nothing is showing.
To fix that, we can add another route.
When it is going to be an empty path, we can show the about component.
Like this.
Now, if I load the application, we can see the about page.
Ok, but still the links are not working, because we haven't added any code for that.
So, let me go to the header component and here I can use the link.
We can import the link from react router dom library.
To this link component, I can pass the to props.
I can have the exact path name so that when this link is clicked, url will be changed.
Let me also use link in the other two navigation items.
So now, we can see our navigation is working.
This is how we can implement routing in react applications.
Actually, routing is a big topic.
There are many concepts in routing like route with params, nested routes, protected routes,
routing with query params, etc.
I need to cover each topic in a separate video.
I will do that as part of advanced concept series.
React JS Hero to Superhero.
But for now, let me quickly show you how we can pass params through route.
For that, let me add one more route.
For passing params, we can use colon.
I am going to pass an id param.
So, I can mention like this.
Now in header component, I am going to hardcode an id in the url.
And in about component, I can use useParams and destructure the id from the URL.
And for now, let me show that id here.
And so, when I navigate to about route, we can see the id we passed is showing here.
Hope you understood.
Ok.
Let me give you a task.
You can create an application similar to this.
When you click any user here, you need to route to user detail page.
In which, you can get the user id and fetch the information related to that particular
user and show that in the screen.
Like this.
You can use a hardcoded json to have some users and use the user id to fetch the particular
user.
Try this, if you need the solution code, you can get it from this repo.
The link is also available in the description.
And so, we have covered all the basic concepts in React.
In the next video, using all these concepts we are going to create a complete application.
That's all for today.
Please like this video.
Subscribe to my channel and support me.
Thank you.
Bye.
Ver Más Videos Relacionados
Belajar Laravel 11 | 3. Struktur Folder
Getting Started | Mastering React: An In-Depth Zero to Hero Video Series
What is Single Page Application In React | React Tutorials in Hindi/Urdu
Learn Next.js Parallel Routes In 16 Minutes
The New Way To Create Protected Routes With React Router V6
Conditional Rendering | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)