Routing | Mastering React: An In-Depth Zero to Hero Video Series

Summary

In 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

00:00

📚 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.

05:02

🛠 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.

Keywords

💡React JS

React JS is a popular open-source JavaScript library used for building user interfaces, particularly for single-page applications. It is maintained by Facebook and a community of individual developers and companies. In the video, React JS is the main technology being taught, with the series aimed at beginners who want to learn to build applications from scratch.

💡Routing

Routing in the context of web development refers to the process of directing users to different pages or views within an application based on their actions or requests. In the video, routing is a key topic discussed, especially for single-page applications, where it allows for changing the content dynamically without refreshing the entire page.

💡Single Page Application (SPA)

A Single Page Application is a web application that loads a single HTML page and dynamically updates that page as the user interacts with the app. In the video, the contrast between traditional multi-page applications and SPAs is highlighted, emphasizing the importance of routing in SPAs to provide a seamless user experience without page reloads.

💡React Router DOM

React Router DOM is a standard library used for routing in React applications. It allows developers to create a more flexible and user-friendly navigation system within their applications. In the video, the instructor demonstrates how to use React Router DOM to implement routing in a React application.

💡Components

In React, a component is a reusable piece of code that can be used to build the user interface. Components can be class-based or functional, and they can manage their own state or props. The video script mentions components like the 'Header' and 'App', which are used to structure the application and implement routing.

💡State and Props

State and props are fundamental to React for managing and passing data within components. State is an object that holds information about the component, while props are the values passed from a parent component to a child component. The video discusses how state and props can be used to control the visibility of content, although it points out that this alone is not sufficient for proper routing.

💡Conditional Rendering

Conditional rendering in React is a technique used to render different components or elements based on certain conditions. It is a way to control what is displayed on the screen. The video script uses conditional rendering as an example of how content can be shown or hidden without changing the URL or refreshing the page.

💡URL Parameters

URL parameters are values that are passed along with the URL in a web application. They can be used to pass data between pages or to identify specific resources. In the video, the concept of passing parameters through routes is introduced, showing how to use them to pass an 'id' parameter to a component.

💡Link Component

The Link component from React Router DOM is used to create links that navigate to different routes within the application. It replaces the traditional anchor tag and is used to handle navigation without a page refresh. The video demonstrates how to use the Link component to create navigation links that change the URL when clicked.

💡useParams Hook

The useParams hook from React Router DOM is used to access the parameters from the URL in a functional component. It allows developers to extract and use URL parameters within their components. In the video, useParams is used to retrieve an 'id' parameter from the URL and display it in the 'About' component.

💡Hardcoded JSON

A hardcoded JSON is a static representation of data in the form of a JSON object, often used for demonstration or testing purposes. In the video, the instructor suggests using a hardcoded JSON to simulate a list of users and fetch user details based on an 'id' passed through the route.

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.