Transcripts
1. Course Introduction: Hey, there. Welcome
to this course on mastering outing with react, and I'll be your instructor
through the course. I'm super excited to
guide you through this wonderful journey
of react router, which is the good solution for handling navigation in
modern react applications. Now, routing is a
fundamental part today of any web applications
without allowing users to navigate to
different web pages. Like it's unlikely
that you could build a real world production
grade applications. And that is where routing
comes into picture. And that is also why you should learn about
routing today. Now, without a solid
routing system, even the best design apps can feel disorganized and
difficult to use. And that's exactly
what we are going to master in this
particular course. So talking about this course, we are going to cover
an introduction. We are going to do an
introduction to react routing what it is and how
react router works. We'll learn and
understand how we can set up routes in our
react application. We will also learn how
you can add navigation, how you can create
nested routes, and also we will learn
how you can create a 404 page which is a page not found sort of a
message to the user. So that is what we
are going to do. And yes, with this
particular course, you will have a complete
confidence of building multi page applications with react by adding the
functionality of routing, and you will be able to
ensure smooth navigation, providing users with seamless
browsing experience. Now, who is this course for? So this course is perfect for react developers of all levels, whether you are just
starting up with react or whether you are an
advanced react developer. This course is perfect for you because in this
particular course, I have made things very
big enough friendly. So I explain each
and everything, so it's going to be really
a cake walk for you. And if you're advanced
level developer, this course is still the
best because, you know, it's a good refresher for the routing related
concepts and you might pick up something new
from this particular course. So that's what it is. And the way this
course is designed, it is completely hands on. I make sure I code most
of the time and show you different
examples rather than making use of PowerPoint
presentations. So that's the USP
of this course. Now, are you ready to take your react skills
to the next level? Let's dive in and start building dynamic navigation friendly
applications together?
2. Getting Started to Set Up React Project: Hey, there. So now
it's time that we begin creating our
react application, and we're going to do this with the help
of the command line. So first thing first, what I'm going to do is I'm
going to head over or navigate via the command line
into the project folder. Now what I mean by
project folder is it's a folder of
my choice where I wish to have my react
projects organized, okay? So what you can do is you
can head over to the Finder. Like, if you're on Mac, you
can head over to Finder or if you are on
Windows like me, you can head over
to Explorer, right, and create a folder in the
location of your choice, you can call the folder,
whatever you want to. I would name it react. And then from the command line, you can just navigate to the location where you
have created the folder. So I've created
this react folder here at this
particular location, and CD is the command, which is change directory, and it is helping me
navigate or head over to this particular folder or to be in this folder
from Command line. So now I'm in this
particular folder, I'll clear everything else. All right. Now in this
particular folder, I'm going to begin creating
my react application. And for this, I'm going
to make use of NPX, okay? Oops. So I have already created a few react
applications before. So you can see this
suggestion over here, okay, but there's nothing I
can do about the suggestion. Okay? But ignore this
suggestion for now because what this particular
uh terminal does is, whatever it sees
in your history, it just keeps suggesting
you, which is good. Showing you the entire command,
that's completely fine. So NPX I'm going to
make use of NPX, okay? Now, NPX's syntax right. It's used to execute
the node packages, or it is used to
execute the packages. And then we are going to make
use of Create react app. All right. Now what
is Create React app. Create React app is a tool which helps you create the
entire react application. Now, why are we
making use of this? Because the react project has to be organized
in a certain way, it needs to have the SRC folder, it needs to have some files
and all of this come together and they enable you or they enable your application to
work in a seamless right? So you can go and manually
create those files as well, but this is a tool
that enables you to create to create or set up the application structure
in the right way. Okay? And after this,
I'm going to just mention my application name, so I can call it MyRact
app, something like this. Okay? And what I can do is
I can simply press Enter. The moment I press Enter, what this is going to
do is it is going to create a folder in this
particular location. So in this particular
location, it is going to create this folder. Why is it creating a
folder in this location? Because I've navigated to this
folder from the terminal, and this will be the
folder name under which all the files of my react
project will exist. Okay? So you can press Enter, and you should see some sort
of processing happening. So you can see creating
a new react app in this particular location. It is installing some packages, and this might take
a couple of minutes. So it is installing it is also telling you what
it's installing. It's installing
react, react Dom, react scripts and everything,
everything it needs. So we'll wait for a while until this entire process is complete and we see
a confirmation. So I have got the confirmation, and I also got a minor message. Okay. So by the time I
started recording this video, there's a new minor version, it says of NPM
that is available, and it's asking me
if I can upgrade. Okay, so I'll upgrade later. You might not see this, okay, but yeah I'll just
ignore this for now. It's just a upgrade
notification. You can see the
confirmation over here, happy hacking. All right. And if you scroll up over here, you'll see the entire
process of what happened. So we executed
this command here. Oops. Let me scroll up. So we executed this
command over here. Okay? If you come over here, you can see it added
so many packages. It took 36 seconds. If you come here, okay, it has said success created this particular application at this location and
inside that directory. So you need to navigate
to this directory, and inside this, you can run all these commands over here. Okay? Now, once you navigate it has given you ready made
commands like NPM start. It will start at
development server. So the react application
that you've created comes with an embedded
inbilt server. You can run you can
run this command to bundle the application
and into static files, basically for
production deployment, this will start the test
runner in case you want to run test cases, NPM run eject. Okay, this is something
that you can run. So the suggestion is, you can start by executing this over
here. I'll copy this. Okay? I'll paste it over here. I'll head over to
this directory, okay, and then it is
telling you NPM start. Now, this is a command
using which you can start a development server
onto your local machine. So I can run this
command as well, okay? And you could see the
application up and running. So this is the
application, okay? You can see the browser
automatically opened, and you can see, this is the application that
is up and running. Now, this is a server
which is showing you your content or if it is executing your react
application into the browser. Now, any change you
make into the files, you'll see live reloads
happening over here. All right? Now, you can
see the message over here, like you need to edit
this particular file and save to reload. Okay? So this interface is coming in from this
particular file is what it says. And if you click over
here, this is the link to the official website of react. That is what
it has linked to. Okay? So you can go
to that website and check out or read some
stuff as well. All right. But a few things I would
like to mention over here is once you have started
the development server, you can stop it by pressing Control and C on Windows
or Command and C on Mac. Okay? I'm on Windows, so I press Control C, and you can see it terminated
this particular job. And here now come if
you try to refresh, this is not going to work. Okay, because the
server is down, right? Now, in order to get your
server up and running, you need to run NBM start
within this particular folder. Okay? Only then your
server will be up. So while development
while doing development, you can keep the server
on and actually modify the files and save and see
the changes happening live. Okay? Now, I will talk a bit
more about this command. So we created the react app or the entire application using
this particular command. Now you can also add options
over here in the end. Okay? So what you can do is you can make use of
templates over here. Okay? Now, let's say when
you're working with react, you also want to make
use of typescript. Okay? So if you're making
use of typescript, you can add something like this. You can say template over here, and you can say type script. I'm not going to run this, but this is just an
extra information. What this will do is
it will make use of the typescript template to
create your application, and it will add the typescript support right from the start, which is helpful if
you're working on a larger project that can benefit from strict
type checking. All right. So you can make use of this command in
this way, all right. I hope this command is
clear NPX create react tap. So we don't have the
server up and running, but you can now restart
the server again by saying NPM run NPM start. I'm sorry. So it's NPM start,
something like this. And if you start it, it will
again start the server. Allright? So I hope this is useful and I hope you have
been able to follow along.
3. IDE Setup with Visual Studio Code: This is our first react
Based application, which we created, or I should
say we did not create. Okay. So this is automatically generated project using
Create React app. Okay, and it's also giving
us some hint over here. You can edit app dot
qs and safe to reload. Okay? It has a link
to learn react, which will take you to the
official website of react. All right, so far so good. So this is our application up and running. Now,
what do we need to do? We need to start coding
and modifying things. And what are we going
to do for that? We are going to install an IDE, which is the ID
Visual Studio code. Okay. So this is
what it looks like. If you already have it on
the computer well and good, if you don't, then head over
to this official website. It is a free tool, it's free, built on open
source, runs everywhere. Since I'm on Windows,
it's prompting me to download a stable
built for Windows. You can switch to whichever
operating system you need to. But if your operating system
has an installer over here, it is going to automatically. So if you're logging
in from Mac over here, it is going to show
you download from Mac. Okay? So whichever platform
you're opening this from, it is going to show you that button and
you can go through this if you're not aware of
what visual studio code is. But just download and just install it like any
other software program. I have it already installed, so I won't be showing you
the installation steps, but installation steps
are not at all complex. It's very simple and
straightforward.
4. Beginning Our Journey with First Steps: Now, once you have successfully installed
Visual Studio code, you would see a page like this. So if you open
Visual Studio code, for the first time, you'll
see this Welcome page. Now, I have been a visual studio code
user for a while, okay? And you are seeing all
these recent projects. So it's likely that
you won't see the list of recent projects unless
and until you are a user. But since I'm a
user, like I said, I'm seeing the list of
recent projects which I have used or created
in the past. Also, you'll see these
options over here, new file, open file, open folder, clone Git repository,
connect to all of this. It's a very useful tool. Visual Studio code, I
use it all the time. Now to open the project, you know the folder, where
you have created the project. So you can just click over here, Open folder and you can navigate to the folder location where you have
created the project. Alternatively, if for some reason you are
not seeing this, you can go to file
from the menu options here and you can say open
folder. Both are the same. So what I will do is
I'll select Open folder, I'll navigate to the
directory of my choice, and I'll open the
project over here. Now when I selected Open folder, I saw this folder window, which is exploer navigate it to the folder where I've
created the react app. And I'll select this
particular folder. This is my react app project
that we have created. Inside, you'll see a few files, but you need to select
the root folder. I'll say select, and it will open this particular
folder for me. Now I can close this
welcome page over here. Okay? So you can see the project over here on
the left hand side, okay? You can see this entire folder. If you expand this, you'll
see the files within. Okay? So when you executed the command called
Create React app, okay with Create React app, it created all of this for you. Okay? You can manually
create it as well. But as you can imagine,
this is going to be very tedious, right? So that particular tool, Create react app does
the job for you, wherein it sets up the entire
project structure for you. Okay? We'll go through this project structure
soon, but for now, what I would also like
to explain is we have the server up and running
from the terminal. Now, what I can do is I don't need to make use
of an external terminal. Visual Studio code
has a way wherein I can actually have a terminal
within Visual Studio code. This way, I never have to leave Visual Studio code and
switch to a local terminal. Here at the top in the options, I will see terminal over here. You can say new terminal,
and you can see this is an integrated terminal
inside Visual Studio code. And if you say PWD, which is present
working directory, the terminal is
automatically opened in the folder which you have opened inside Visual Studio code,
which is the project folder. So you don't need
to navigate also, you don't need to run command, CD, and all and navigate, this just works like
a local terminal. So here, I can say
NPM start over here. The moment I say,
I'll get an error, you can see, something is
already running on port 3,000. And what is running, our
application itself is running, and it is asking us
whether you want to run the app on
another port instead. I don't want to do
that. I'll say no. Okay, and it will just
stop the execution. Okay? But what I'll do is I'll for shut this server because I no longer want to make
use of an external, you know, external
terminal over here. Okay? I want to stick to the visual studio code
provided terminal, and I'll say pin start, and this should now run the development
server for you. Okay? So this way, what we can do is I'll move this
to a new Window. So here we are in
the new window, and I have Visual Studio code
running in the new window. So this way, I don't have to leave Visual
Studio code ever. I can even minimize this
over here like this. Okay? I can even create
new terminal from here, so you can see plus,
and you can have multiple terminals
running over here. Okay? It's very useful, and this is the reason why. So these kind of tools that
Visual Studio code provides, that is the reason
why it's loved so much in the
developer community. Now, I'll also show you the list of extensions
that I have. So here, if you go to
this extension tab on the left hand side, here you have some
options like search, you have source control, run and debug, all of this, okay? I'm making use of Docker
also in some of my projects, so you can see Docker
over here as well. But you might not see this. Okay? This needs a
separate extension, okay? But if you
go to extension. Now what are extensions?
So extensions enable you to enhance or extend the default functionality that Visual Studio code
already provides. So you can see, I
have extension for Jupiter notebook. Okay. Whenever I'm coding in Python, and if I want notebook support, I make use of this extension. Okay. So I have this extension. This is not needed for react. I have Python extension. Okay? Now, this auto rename tag, this could be helpful
for react because, you know, if you
are renaming a tag, okay, and if there
is a closing tag, what this will do is
it is going to rename paid the paid version
of that particular tag. Okay, so this is something
that you can have. It's helpful. For example, if I have to give
you an example, let me give you an example. So let's say if I create or let me open some
file over here. Okay, let me open an HTML file. Now, this thing over here, you can see, let me go
over here, scroll down. So this title has an opening
tag and a closing tag. So because of that
particular extension, if I rename the opening tag, you can see the closing
tag is also being renamed. Okay? So that is the benefit
of this auto renamed tag. You don't have to rename the opening tag first and then rename the closing tag, right? Be pair colorization, as you can make out
from the icon itself, it is used to it color highlights the closing
pair of the bracket. This is useful if
you're making use of a lot of brackets in your Okay, Debugger for Java,
dev containers, jango doco all of this I
use for other languages, extension pack for Java, gradle for Java, Italicde. Okay? This is for AI
assisted development. This is also for this is
Intelicode API usage examples. Okay. I have some for Python. So these are all Python related. I'll scroll down, a live server. We don't need this
Maven for Java. This also is not needed. Prettier is something
that you can use. This formats the code. Okay. I organizes
the code for you. Okay. And yeah, this
is what we have Okay. I will also add some extensions
right now over here. Okay? So what you can
do is you can search for react code snippets over
here, something like this. Okay. Okay, so you can search for ES seven plus
react, something like this. And you'll see this extension with almost millions
of installs. So this is 12.9 million as
I'm recording this video. Of course, this will keep
on increasing and you might see a different number
when you're watching this. So this is extension. This is the name ES seven plus react redux react
Native snippets. Now, what this does is it
gives you templates, okay? Like for example, if you
want to create a function, so you can say RAFC. You can just type in
that and it will give you the entire function
definition for. Okay. So these kind
of shortcuts it has, which helps you save time. So you can install
this. I'll just click on Install and add it to my list of extensions. Okay? So yeah, we have
it installed now, okay? You can explore more
react plugins or extensions in the
marketplace over here and you can
play around with it. And you can enhance the
default functionality that Visual Studio code
already provides to you. All right. So yeah, that's about setting
up Visual Studio code, and I hope you found it useful.
5. Navigating the Web: An Introduction to React Routing: Not today, it's very common for application to have
navigations, right? For example, you might build an application that might
have a product page, a page that showcases
all the category, a homepage in about page, a teams page, and so on, right? So there is navigation and
you have to navigate to different URLs to
see what's there on this particular page.
And this is very common. Even today, if you're building a simple website like
your own portfolio, it is going to have things like skills, how to contact you. And if you have a blog,
so you can go to slash Blog URL on your domain and
check out all the articles. Okay? So this is pretty common. And when it comes to building
single page applications, you need to have a
great user experience wherein you should
be able to navigate between different pages or even components without
reloading the entire page. And this is where routing
comes into picture. So routing is a thing that
enables navigation between different pages or components
without reloading them. Okay? So the user
experience is really good, and there is a library
that facilitates this. It's called as react Router. It's a standard library that is used for routing in
react applications. Okay? Now, why is
routing needed? Of course, there are a few points and I've
listed a few over here. Like, the number one
point is user experience. So Routing improves user
experience by allowing smooth navigation between
different parts of your application without
reloading the entire page. This is important, okay?
Component separation. So because routing is possible, it helps in separating concerns. So making your code more
modular and easy to maintain. What I mean over here is, for example, if you
want to show a Navbar, some content in between, like, for example, About page and at the bottom, you
want to show a footer. You can create three components. You can keep the NAV bar
and the footer consistent, and then you can reload
the component in between depending on the URL. So component is separated. If this is not possible,
then in that case, you have to create everything in a single file so that
it renders together. But because routing is possible, you are able to separate it. And this is something
you will learn when you actually start using or doing routing in your
applications. URL management. Now, routing allows the use of URLs to navigate to
different components, which helps with sharing specific views with
people around you, or you can even
bookmark those URLs. So all of this is possible
because of routing. So Routing indeed is important in building modern
web applications. Now, routing is possible with
the help of react router. Okay. So what we are going
to do is we are going to add this package into
our application, okay? So I've created a
new application and you'll go to the terminal. Okay. I'll switch over.
I'll say CD routing. Okay. So this is my application. Okay? So I'm in the
actual app root folder. Okay. I'm going to
say NPM install, react Router, Tom,
something like this. Okay? So this is something that I'm going to add
to my application and you'll see some processing
and installation happen. And then you can come over to
package dot JASN and you're going to see react to Tom
being added over here. Okay? So yeah, this is
what we are going to use, and we are done with the setup. Okay? So I hope you're
clear about what routing is and what are the dependency that you need to add
into your project.
6. Laying the Path: Setting Up Routes in React: So now what we are
going to do is we are going to construct three URLs, actually, and we're
going to render different components when
these URLs are accessed. Okay? So we'll need
three components like home about and contact, and these three components will be rendered on the
basis of the URL. So slash will render home
slash A will render about. And then if you go to slash Contact, you will see contact. Okay? So first
thing we'll need is we'll need these three
components present. Okay? So what I'm
going to do is I'm going to go to our
application structure, and I'm going to start
adding these three files. I'll say home dot JSX over here, and I can say function
Oops over here, function. And I'll say about or let me
create home component first. Okay? We don't need
any sort of parameter, and this is going to return
over here, H two home. Okay. I'll keep things simple. I'll just return one word from each of the components.
So this is home. I'll say about to JSX, and over here, I'll say about something I forgot over
here, I forgot to export. I'm going to say export default. Home, L. Okay. And over here, I'm going to say export default. A L. Okay, home about, and I need to add home
about and contact. Okay, contact or her sex. So I need to say function, I need to say contact. Okay. And here, return. I'll say two, contact. And I'll say export
default, contact. Okay. So I have now three
components set up and ready. Okay. What we are going
to do is we are going to make use of
routing over here, and we are going to set up
routes for different URL. So based on the URL, okay, different components
will be rendered. That is how it is going to work. Okay. Now for this, we are going to
need to add Import. We are going to
import a few things from react router doom that we have added
into our application. I'll just collapse
this over here. Okay. What are we going to
need? Okay? So I'm going to add an
import statement. I'm going to say Import. I'll say browser. Router, okay. And as router? Oops, as router, I'll say react
router, Tom. Okay. So for some reason, the order
suggest is not coming in, but this should be in single
code and I'll say react. Route Tom. Oh, it came in, finally. I don't know, some
sort of problem maybe. But yeah, this is it. Okay. So I'm inputting browser router, first of all, okay? And I'll also need routes. Okay. This is all present inside this particular
library that we have added. I'll say routes, and I'll say
route over here. Like so. Okay. Now let us
understand what these are and why do we need these three things
into our application. So browser router, first of all, it's a base component that will enable routing in our
react application. So it's a component
that is going to monitor the browser's
address bar. So if the address bar is slash, it's a base URL, then
it will show home. If it's slash about, it
is going to show about. If it's slash contact, it is going to show the
contact page over here. Okay? So you can think of
it like a manager will make sure like the right
thing is being shown, okay? Or the URL is in sync
with the components. It's the base component, like I said, that enables
routing in our application. Okay? That's all you
got to remember. Routes over here, we are implementing this with
this name router. We are creating an
alias over here. Okay, we are saying
browser router. Import browser router as router. So we can refer to
this as router. Okay? You have routes. Now it's a container for all
the apps route components. Okay? And we have
route over here. What route is going to do
is it is going to define or map a specific path
to a specific component. So for example, we
want to map slash About to about over
here, about component. So Route is going to
help us over here. Okay? Now, what we can do over here is let us basically
start using this and you'll have
some better clarity in that context as to
how they can be used. Okay? And after doing this, you can also try
accessing the URL in the browser and you'll see
you'll notice this working. Okay? So first, I'm
going to say router. It's a base component
over here, okay. And you'll see this
router being used. Okay. Then I'm going to say
routes over here. Okay. And inside route, I'm
going to say route. So for every route
that I need to define, I need to add this route. Okay? So this is going
to be self close tag, o, and I can say path. It has a path property. So I'll say on slash, you need to mention element. So which element do
you want to display? Okay? On slash, we want
to display home, right? So I'll say over here, home. Okay, so I'll add
something like this, home and like this. This is a syntax, and I need
to import home, of course. So I'll press Control Space
and this will get imported. Or if you're on
Mac, you can press Command and space and
this will get imported. Okay? The inmput is necessary. Now if you save this and if you come over to
the application, you'll see this being rendered. Now if I comment this,
let me comment this. And if I save and if
I come over here, you can see nothing
is being rendered. I hope this is making sense. If I do control that save on slash home is being rendered. Making sense. So this is how
we are defining URLs now. We'll say slash and what is next slash,
it's about, right? So I'll say about.
Okay. And over here, I'll have to add about
something like this. Okay. And make sure about
is also imported. We'll do the same for
contact over here. Okay, over here. Over here, I need to do contact. Contact. Contact
is also imported. And now, over here, if you come, it's
home slash Contact. You can see contact being
rendered and on about, you should see about
being rendered. Okay? And if you go to
the root URL, it's home. Okay? So this is
how you can make use of these inputs that
we added at the top. Okay? These inputs that
we are at the top to make use of routing and to implement routing basically in our
single page applications. Okay? You can also add a
navigation bar at the top, which will enable users
to navigate to the pages. Right now, we have
not added that. So I've just directly
shown how if you enter this URL in the browser,
component is loading. Okay? But I hope
this is clear and I hope this has been valuable.
7. Seamless Transitions: Adding Navigation for a Smooth User Experience: We have an application where you can see different components. Okay? So if I go to about, okay, you will see about
if I come to home, you'll see home over here,
and if I go to contact, I'm going to see contact. So different
components are loading pased on the URL you type in. Now, there will be
scenarios wherein you want to add a navigation bar. Of course, it's not a scenario, but it's mandatory these
days, I should say. It's mandatory these
days that you have a navigation bar at the top wherein user
can click and navigate. Nobody's going to type in
the URL in the browser. Of course. You need buttons that
will allow navigation, and this is where you can
enable a navigation bar in your application that can allow you to navigate between
different pages. So what I will do is I'll
add links over here. Okay? So here, just
under the router, what I'm going to
do is I'm going to add a Nav over here. Okay. And here, I'll press Enter
and here, I'll say UL. Okay. I'll add unordered list, and then I'll add a
list like this. Okay? Now, inside a list, I'm going to add,
okay, 1 second. So I'll take this
on a single line. Okay? So I'm going to have
multiple list over here, multiple list items, okay? And inside every list, I'm going to add, like, Home, here it will be home or
let me add Link over here, because it should navigate. So I'm going to say Link
over here and you can see this is showing me link
from react router doom. React router doom also gives you this link using which you
can allow navigations. The moment you select Link
from React Router doom, you'll see link being
imported over here. You can see ink has
been added into this particular
import statement. So here, what I'm going
to do is I'm going to say the text I'm
going to display. So here it's home, This home. And here, I'm going to say two. Where do you want this
link to navigate to? So I'm going to say,
I'm going to say slash. This is a link to slash, and I can duplicate this
three times over here. So this is going to be about, and this is going to be contact. This is just a text that we
are displaying over here. So this is about, and this is contact. I'm going to say contact. I'll save this. The
moment you save this, if you come over here,
some problem there. I don't know why
it's not refreshing. Let me check the
console, what's wrong? Okay. So let me close this. Okay. And let me run this again. Let me see. Okay,
it's working fine. Probably the reloading
took a little bit of time. I don't know why. Maybe
some issue with my system. But you can see the
links are now over here. Okay? It's not looking
that fancy, o. But for now, we'll just
focus on functionality. Okay, we'll soon pretty this. So you can see about,
you'll go to about. You can click Contact Home
and see the URL as well. The URL is also changing. You can see this is all
without any kind of reload. Okay? This is just the
component being reloaded or component being loaded depending
on which URL you are on, and this is the
concept of keeping URL in sync with what
is to be displayed. Okay? So you can see how
this is working fine. Now, let us beautify this a bit, we of course, can improve the interface that
you are seeing over here. And for improving the interface, we can make use of
what we can call it. We can make use of tailwind CSS. Okay? Now, now,
white tailwind CSS, it's easy. It's class based. You just have to make use of a few utility classes that we get and a little
bit of configuration. So come over to tailwindsss.com, search for Tailwind CSS,
and you'll come over here. Click on Get Started. Head
over to the installation. So here, the first thing
is installation. Okay. But by chance, if
this does not open, you can click on
Installation here. Okay? Now, we're going to
make use of tailwind CLI or tailwind and I'm
also going to need post CSS along with Autoprefixa. So this is the
documentation for the same. Okay? It's recommended
to add all three. So I'll just start
adding these commands. Okay, so I'll delete this
and here I'll see Okay, 1 second, let me see if I'm
in the project directory. I'm not in the
project directory, so I can say routing, react, I'll say clear. And here, I'll install this. Okay? So it'll take a
while to be installed. Okay. Meanwhile,
we'll come over here. We'll get this command
over here. Okay. And I'll take this and
I'll say in the end, I'll add hyphen P
over here. Okay. And I'll press Enter, and you'll see two files
being created, which is tailwind config
and post CSS config. Okay? Now if you come over here, you can see two files. Tailwind CSS and
post CSS config. Now in tailwind config, we need to add a little
bit of configuration, so we need to add this content that is being provided to us. So I'll add this over here. Okay? It means that under SRC, tailwind should be applicable
to HTML JS and also SX. We have some JSX
files as well. Okay? So it should be
applicable over there. I'll scroll down,
and you need to add this in main dot CSS. I'll scroll up. Okay? So I
have this index dot CSS, which is being loaded
in main dot CSS. You can see index dot CSS. Okay? So I've added
this directives or annotations in the
tailwind directives basically in that CSS file. Okay. And this is it. I think tailwind is
there for us now. Okay, we can make use of it. So let us start
making use of it. Okay. I also have tailwind
Italicens over here. Okay? Tailwind If you search for
on extension marketplace, you'll see this plug in
tailwind Italiscens. So it provides a nice autosuges feature for all the
classes in tailwind. And it's very useful. I would highly recommend if you are working with tailwind. Okay? Now over here, what we need to do is I'm going to basically
have I have UI, sorry, UL, I have
NAV at the top, I'm going to add
a TIF over here. I'm going to say
TIF. Okay. And I'm going to say over
here, class name. Okay. I'm going to add
some tailwind classes. So I'm going to say
minimum H screen over here and background of that of gray hundred. Okay?
This is done. And I'll add this closing
after so this should close. Where should it close? It should close just before the route. Okay. Yes, over here. Okay. So I've added this and
now what we need to do is I'll add some
CSS over here. I'll say class name over here. I'll say BG. I'll keep this as blue, blue of let's say 600. This looks decent.
Okay, you can see. You can also compare the
different color shades of blue. You can see. 600,
800 are more darker, so I'll say 600. Okay? 600 looks decent and
padding of four over here. Okay. And I'll select this and let us see what
it looks like. Okay. So the CSS is not
applied for some reason. Okay? Let me see let
me restart the server. Let us see if restart is
what is causing this. Okay, now it's applied. Because I did a lot of
configuration changes, changes and dependencies,
it was not showing up, but now it's showing
up, you can see, Okay? That's decent. Now
I'll come over here. I have some CSS over here. Now here to UL, I'll say, oops I'll say class, class name, and I'll
say class name of flex and justify center. Okay. And we can have a space of X and
I'll say six maybe. Okay, six. I'll see this. Let us see
what this looks like. You can see how it's looking. Okay, it's looking decent. And now we need to
add some sort of CSS basically or some sort of classes over here to all
the link attributes. So I'll take this to new line. I'll add a tab. This
also on new line, and I'll say class
name over here. Okay. What is the class
name? I'll say text. Okay, white. Okay, I
need white over here. Text should be white.
Black is not looking good. OH, the text should
be okay, yellow. And there are so many yellow
sheets, I'll select 300. Okay. I'll say font is medium. Let's have font as medium. I'll say transition Okay. S over here and I'll
say duration of 300. Let's see if this let's see. You can see how this
is working out. Okay. Can you see? Little bit of effect. What
I can do now is I'll just copy this class for
every link that exists. Okay? So I'll copy this.
I'll come over here. We'll just dump the
link over here. Okay. I'll tap. Okay. Oops. So Okay. So I'll just indent this and I'll take
this to new line, okay? Tap couple of times. Okay. And yeah, tap a couple
of times, and I'll paste it. Okay. So this should
look decent now. You can see home
about in contact. Okay, it's looking too big because I'm a
little zoomed in. Okay? You can see.This the
actual view of the website. Okay? But I'm a bit zoomed in
so that it's easy for you to see if you're
on smaller devices. Normally, people
appreciate that. Okay. But yeah, I have
basically added this, okay? Now I can come over here, and what I can do is this
entire routes over here. I can wrap this inside at
TIF something like this, this stiff, I'll cut this
and I'll add it over here. Okay. So I've added this entire routes into
this stiff and this stiff, I can call this as class name, container, Okay,
something like this, and I can say X auto. Oops, auto over here and
Pi padding five at eight. Okay. And yeah, this is it. Now what we can do is let us style individual
components as well. So right now, we have just
style the top Navbar. Okay? Let us style
individual components. So I'll come over. I'll
start with home over here. Okay. Mostly the styling will be similar for
all the components. Okay, so keep that in mind.
I'll get rid of this. First of all, I'll have because I'm going to write
multiple lines of code, and I'm going to
say tab over here. Okay. Let us add this Dev
I'll add H two over here. H two is home page. Okay, something like this,
and I'll say P tag over here. P tag is welcome
to the home page. Okay. And I can say Explore, decide to learn more,
something like this. Okay. And now I'll head over to Dev and Div
I'll say class name. Okay, I'll say flex, Flex, call, column, and I'll
say items center. Okay. So should I add this or it should be Let
us keep this as column. Items center justify center. Something like this, and
I'll say minimum H screen. So this is minimum height
that we are adding, and I can say PG of grey 50. Okay. Let us see what
this looks like for home. Okay? The background of
gray is not yet added. It's added here at
the pack, okay? And let me actually, you know, let me actually, like, take this like this, take it like this, okay? So I can see everything
side by side, right. So yeah, this is a pair of
view for now for some time, we'll stick to this
kind of a view. Okay. Now for H two, I can press Enter. I'll see class name. Like
so. Okay, over here. And over here, I'm going
to say text three Excel, and font of bold, then text of blue 600. Like so. You can
see this changing. And then for this thing over
here, I'll say class name. Oops, children got applied. Oops. So I'll change this I'll
add class name over here. Class name I'll
keep text as grey. Okay. Let's keep grey of 700. Okay. And margin top of four
and text as large. Okay. And you can see this interface. It's zoomed in right now,
but if you head over here, this should be decent. Okay. You can see. Little
looking decent, okay? Not much, but decent. All right. So this
is something that we have added and you can sort of replicate this
across all the components. So what I'm going to
do is I'm going to get this return tag over here. I'm going to go to
A, and in about, I'm going to add the same
return tag over here. Okay? Oops. I need
to get rid of this. This is done and over here, home peach, so I'll
say about peach. Okay. And I'll say this page, I need to add some
text over here. So I'll say this page
provides information. Oops. Information about
us and learn more about our machine
values and so on. Okay. All right. We can duplicate this and add
this to contact as well. So I'll just replace
this over here. Okay? For contact,
this is Contact page. All right, contact, and I'll say over here. I'll
get rid of this. I'll say feel free
to reach out to us through through our contact, form or email,
something like this. Okay. And yeah, we would love to hear
from like so, okay? So now here, if you refresh, you can see about contract, and you can see how sweet our little app is
looking, you know, with few configuration
changes for tailwind CSS, using few classes and adding
a navigation bar at the top. Okay. So this is Router
dom react Router, in action, okay? And I hope this is giving you an idea of how modern web applications
are heeled, okay? You can imagine, like if this
grows in size, you know, you have around 20 or 30
route parts over here, and you have a few
links at the top. You can even separate these links into a separate
component called Navbar. You can create a separate
component called Navbar, and you can just take this stiff entirely, this entire thing, this entire piece of code, right from NAV over
here until here, into a separate component and just render the NAV bar
over here at the top. That is something
that you can do if the Navbar becomes complex. But for now, I've
declared it over here, but everything can be segregated
when it comes to react, and you can modularize your
code in an amazing way. Okay. I hope this has helped you gain some new perspective and I
hope this has been useful.
8. Organizing Routes Like a Pro: Mastering Nested Routing: Now, let us start talking
about nested routes. So here we have an A page, which is being
rendered at About. Now, let's say we want
to add a new page, which is the team page, and we want to display the
information about the team. Now, this team page is
logically related to A and it should be I want
it to be under the URL, which is over here, if I say, the URL should be
slash Auth team. Okay? So I want team component
to come over here, okay? So what will I do in that case, I'll make use of
nested routes, okay? And I'll organize it in
such a way that team is a team actually
is a subtopic, basically, and it allows us. What we are going to
do is we're going to keep these related
routes together, okay? And we're going to define a
hierarchical relationship. Okay. So slash About will
render the About page and slash About slash Team
will render the Team page, and it will specify the
details of the team. Okay? And one of the
best thing about nested route is you can
make use of the code that has been defined in about component inside or on
this team page, okay? So when you render
the team page, you can also display the
components or the code. Basically, that is
defined within about. And let me demonstrate
this as to what I mean, because there is a
hierarchical relationship between two since we
are nesting them, okay? Since team is being
nested inside about, so there is a hierarchical
relationship. So you can reuse the
about components layout, like any sort of
layout like header, sidebar or any sort
of shared content, okay, in the team
component, okay? And let me show this to
you how this works, okay? What I'm going to do
is first thing first, I am actually going
to get rid of this. Let me get rid of this
comment over here. And over here, I have this about and I'll remove
the self closing. Okay, I'll close it
separately like this. Okay. And inside
this inside this, I'll add the team
page, like this. I'll say slash team. Okay.
And I'll say slash Team. Now team does not
exist, of course, so I'll get error if
I save this file. But what I will do is
I'll add a team page. I'll say team dot JSX. Okay. Now, what does the
team page comprise of? Now team page, we need a team page that is
really, really simple. Okay. What I will do is I'll
just get the layout of home. I'll paste it to like team. I'll just rename this to Team. Rename this to
Team, and I'll add some content changes like
this is the Team page. Okay, or we can say
team meet our team. Okay. Let's make it
a little bit fun, meet our team,
something like this. Okay. And here, I'm going
to see what we say? We can get rid of this. We can say we have
a talented team of professionals or
dedicated to our mission. Okay, I'll keep it simple.
Okay, we have this, and now I'll come over
here and I'll get T team imported. Teams imported. Now, what should happen ideally? Okay? This is nested inside A, right? It's a nested route. So if we go to slash
About slash Team, we should see team
being rendered. Okay? That won't
happen actually. Let me show that
to you. Okay, so we're getting some
error over here. Okay? So let me see what the error is. It is so I went to inspect over here in the browser to see the error, and you can see the
absolute path for slash team nested under
path about is not valid. Okay? And I know
why it's not valid. So here you cannot
have forward slash. Okay? So I'll get rid of
this and I'll save this. The moment I save
this, it works fine. Okay? So this is working
fine about home and contact. Now if I go to At and if I
say slash team over here, Okay, you can see the team
is not being rendered, only the about page
is being shown, okay? And there is a reason
for this, okay? And the reason for
this is we are not making use of an
outlet component. Now what is outlet component? Now, outlet component is a placeholder for
nested components, and you have to make use of outlet component inside
the parent component. Now, which is the
parent component. In our case, parent
component is the A page. So inside the At page, we need to make use of
outlet placeholder, okay? And this is to tell this is
to tell react over here. That any sort of
nested component if exist, render it over here. Okay? So it acts
like a placeholder. And let me show you how you
can actually make use of it. So what we are going to
do is we're going to come over here and inside about, since this is a parent, we have to make use of it over here. Okay? Just before the last TIF, before we close this,
what I will do is I'll add a one more TF Okay. And I'm styling it because rest of the page
is looking good. Okay? So I'm going to
say margin top of eight and W full over
here, width of 100%. And I'll say max Okay. And I say four Excel over here. Okay. So this is Max Width. And then over here, I'm going to say outlet. Now, you can see
outlet. You have to get it imported from
React router doom. You can see Okay. And it's self closing. So I'll close it. And you'll see this input being
added at the top. Okay. Now I'll save this
and now if I go over here, you can see meet or team. Okay? This is being rendered. You can see how it's being
rendered on the A page. And if you go to sorry,
not on the About page, but on about slash team. Now, if you go to about,
you'll see about, and if you go to A slash team, you're going to see
about and team. Okay. So A is a parent
and team is the child. Okay, there is a hierarchical
relationship between them. And this is a concept
of nested routes, okay? And this is how you
can make use of it. And, of course, this is also this also explains
why outlet is needed. Okay? It's like a placeholder. You can see over here
in the documentation, renders the matching child
root of the parent root. Or nothing if no
child root matches. So if nothing matches, it is not going to
render anything. But if you want
anything to render or if there is any sort
of child over there, o of the parent, it's going to render that. Okay? So I hope this has
been useful and I hope you have been
able to follow along. Just a small update
before I stop this video, what I did is inside about. Okay? So earlier, there
was no linking over here. I had to solely rely on the URL. So if you go to about I've
added two links over here, R team, back to home. So if you go to team,
you'll see this speech. Back to home, you'll
be back to home. Or you can also have
back to about over here. Okay, so I've added
this navigation so that you don't
have to rely on, you know, VRLs and instead, you can click over
here and navigate. And for that, I've added
this block inside about. Okay, you can see
team and back to home with simple CSS, okay? And I had to add link over here, like the link from
react router dom, okay, for adding these links. Okay? So yeah, this is it, and I hope this has been useful.
9. Oops! Page Not Found: Creating a Custom 404 Page: Now in our application, if we navigate to
different routes, we are seeing
different components, and basically, there
will be scenarios wherein user navigates to
a URL that does not exist. For example, if I
type ABC over here, okay, this ABC URL
does not exist, but there is no sort of feedback or message that I'm giving
to the user to tell that, Hey, this does not exist. So basically, handling this is known as four not four, okay? So you can handle foot four errors wherein this
is not found, right? So you need to show
the user, right? But right now by default, you can see this is what
is happening if you try to access something
does not exist. Okay. What I'm
going to do is I'm first going to build
a four not four page, and then we're going to
handle this using routing. So back to our code, I'm going to come here. I'm going to replicate any
sort of layout over here. Okay. And I'm going to rename
this to NotFound component, and I'll come over
here to not found, and I'll say not found over
here, something like this. Okay. Okay, I should not have
replicated the about page. I should actually
replicate a simple page, which is the homepage. Okay. So I'll just copy
the return statement of this and I'll paste
it over here. Okay. Now instead of homepage, I'll say four not four. Okay. And over here,
I'll add a message. I'll keep it simple.
I can say Oops. Like so. Okay.
Oops. The page you are looking for
doesn't exist, okay? Doesn't exist,
something like this. Okay? Now, what we can
do is we can make use of this particular page
into our application. Okay? So what I'm going to do, I'm going
to come over here. Okay? We have routing for
all the parts, right? Now, I want to add routing for anything else apart
from these parts. So anything apart
from this should be redirected to this four
not four page, right? How can I define
that? So I'm going to say route over here. Okay? Path and I'm going to say star. Okay. And I'm going to
say element is equal to. Okay. And here, not found, like so. Okay. And I'm going to
close this, like so. Okay. And I'll close this
as well. Okay. Now, if anybody visits
any other page, you can see this automatically
reload it over here. Okay? So phono
four, you can see. Oops, the page you're
looking for doesn't exist. Okay? So you can actually
navigate to any other page, and if you type in anything
else apart from that, anything else, you
will get font four. So foot four component would be loaded and it will be
displayed to the user. So this is how you can handle
foot four errors, okay? You can improve this interface to much better and something that matches
your organization theme. But I hope you understand the functionality as to how you can build this. The goal of this video is to teach you how to build
the functionality. Rest can be taken care of, you know, designs can
keep on changing. But functionality is something
that's important, okay? So I hope this has been useful and I hope you have
been able to follow along.
10. Course Conclusion: And that brings us to the end of this exciting journey into the world of routing with react. We have covered a
lot of concepts throughout this
particular course. We first understand what react Router is, how
you can set it up, and we also learned how you can create multi page
applications with react implement intuitive
navigation for a smooth user experience. We have also learned
how you can structure nested routes to enhance your app scalability
and how you can handle errors and custom
for not for page. But remember, learning
does not stop over here the real power of any concept in programming
world like react Router lies in applying these concepts
to real world projects. So you should definitely apply these concepts to
your own projects. You should keep exploring
advanced topics, and you should continue practicing whatever you have learned because that
is really important. I would love to see the kind
of projects you come up with and how you make
use of react router. Into your projects. Lastly, this
particular course has a project section where
you'll find a class project. I would highly encourage
you to complete the class project and share your work in the
project section itself. Now, thank you for joining me
on this particular journey. I hope this course has empowered
you with the skills to create well structured navigation friendly
react application, keep building, keep
exploring and happy coding.
Faisal Memon, Product | Engineer | Entrepreneur
