Welcome back.
In this video, let's get started with react router dom.
I have created fresh react application with a default component and this is what you see.
So here, let's do some housekeeping here.
So inside the app, let's remove every code inside.
And now let's add h one and let's call it as we act.
Rooter done.
Good.
And let's remove the CSV file also from here.
So the next step is that let's install the react router.
So back to my terminal here and let me open an instance of my terminal and let's go ahead and then install
the package.
If you go to the website, so let's click on familiar with React Router Dom and let's go ahead and install
the exact version and that is React Router Dom, Act Virgin six.
So let's copy this one.
And now back to our terminal.
Make sure that you install the exact version.
So let's hit enter.
Great.
So let's clear the console and now let's restart our server because we have installed a new package.
Great.
So let's collapse this one and now let's get going.
So here we are going to create a couple of components.
So inside the SABC, let's create one folder and call this one as component.
We are going to have four components.
So here we go.
The first one is going to be about two GHz.
And for this I'm going to scaffold the component using an extension called React Redux.
If you search for React Redux, this is the extension that I'm going to use to scaffold react component.
So now here we go.
Let me close this one and also close this one also.
So when I make use of our AFC, I'm going to have functional component and here let me have a parent
dev or it can be a fragment.
And for each one, I'm going to call this one as about as page and let me add P tab.
And for this P, I'm going to add some text inside.
So I'll pay some dummy text inside here and I'm good to go.
So the next component is going to be the admin page, so I can copy this one and then paste it and change
this one to admin.
Meaning is for admin only at main page.
Great.
So let me change this one to admin page and you're going to be protected.
So let's rename this one back to admin page.
Then the next component is going to be contact us.
So here is going to be contact.
So here let's be name this one back to contact and let's change the H one.
Sorry.
Supposed to be h one here guys.
So here is going to be as a contact and let me get back to the about.
It's going to be h one likewise.
I mean, it's going to be h one.
The next component that you are going to create is called off root, meaning that we are going to use
that component to protect a component.
And I will show you as we move on.
So let's copy this one.
And here, let's rename this one as of round great.
And let's rename this one to off.
Root.
Now we have the component ready, the next video.
Let's go ahead and then configure our application to use React Router Dom.