Now did that single page application is upheld that name in this lesson we're going to analyze all the
components that have been automatically generated with their view create comment.
So as you can see inside the front end folder we have three more folders not modules public and S R
C which stands for a saucer.
And we have a couple of configuration faves such as for example package that Jason.
Well as you can see we have a couple of configuration options but most importantly we can read the what
are the dependencies and the development dependencies for our front end project.
Then in the node modules folder as the name suggests we have a lot of modules for node which as you
can see are really really a lot.
So we can just close this folder and leave it where it is.
There is no need for us to change anything inside of it inside of the public for that do we have an
index not HMO file and an icon.
And clearly we are not going to use this index not h the email file because we have set everything absolutely
we can use our own index file.
However now that we're here you can also copy these lines just going to face them here.
They're no script tag just tells our users that they need to enable JavaScript in order to properly
use that application.
And the comment here below is useful to remind us our viewers.
Yes application works and of course if we now go back on Chrome nothing specifically is change but we
now see also dinos creeps tag.
So the most important code for the application itself is all inside the S R C folder which stands for
source inside of it.
We have three more folders.
Again assets components views then we have up dot view main the G.
Yes.
And a that dot.
Yes let's start talking about main dot G.
Yes.
These as the name suggests is one of the most important files of the application.
And it basically does exactly the same that we've learned to do in their view.
Yes section we have the creation of a new viewings this and we are mounting the application in an aged
PML element we've I.D. up which is of course diva inside that index thought HDMI file the code is different
from the one we've used in the future yes section because you see here we are mounting this up which
is in fact a component this updated view is the root component of the application that is mounted.
Want to give we've idea app as we've said in the previous section about the future yes components that
are very important part of the view architecture especially in real world projects of course and of
course our Question Time application is no exception we're going to have a lot of components and up
to you is the roots component of where all the other components are nested within.
Everything is going to be cleared up very soon I guarantee you.
So let's exploit the app dot view file this is in fact a component like the ones that we've created
in the future yes section of the course and specifically this is called a single file component all
the files we the DOT view extension are single file components in these are a very convenient way to
create components what are the difference between the template part of the component and the aged email
code it style and the javascript logic as well as to see is more evident we're making an overview of
the whole project so let's check deep components views and assets folder you name the assets folder
as you can see we have a PMG file and it's basically similar to the starting folder in Django we are
not going to need it because we are going to get all the data from the rest of the candidate.
So the two important folders are in fact components and views as you can see inside of them we have
other single file components we can recognize them because of the view extension and they're divided
into folders by convention.
So in the views for that we typically agree to create all those components which represent a whole page
of our application for example the home page empty about page while in the components folder instead
we normally create all those components that are reusable and typically nested within the components
in the views folder.
Let's have a look at the home dot view component.
For example we see that same as the updated view component we have the template tag and inside of it
all the aged email code for the component in the area we also see that we now have the script tag and
inside of it the javascript logic we are importing the hell a world component from their components
folder you see that the at symbol is an alias for S R C for our source folder.
So we're importing the hello world component from a low world view.
We are declaring that we intend to use it and the components object and rather than using it you see
inside of the template.
So let's have a look at the ELA world component and as you see we have template we've all the h the
email code needed for this component then we have script where we are for example defined to name and
props in the whole world component is expecting the message prop which is a string as you can see we're
passing it here and then of course the value of message is shown using the mustache like syntax and
then this component we also see that we have this style tag that is also using this scoped attribute
which limits these CSF to this component only considering that the concepts of components and nested
component are pretty familiar to us in fact we've been talking about them.
INTERVIEWER Yes section of the course it surely is no problem to understand our single file components
work as we've said they are just another way to create your components.
Basically the way we create components in a application created we've UCLA and so the new field that
we need to understand the new question that we need to ask where is how can we use components such as
the home component as if there were pages in fact over application the same concept of course applies
to that about component in a typical Web application in an old fashioned website where all the pages
are rendered by the server we make an HP VB request to the server let's say you get request to get the
details of the home page and there's a response we get all of the h the email code that is part of the
page itself however in a single page application we only ran that one page index dot HDL Well we only
have these leave what happens is that the app component is rendered and mounted in these diva and as
we said the app don't view component is the root component where all the other components are nested
within the and we see that we have another receiver and then inside we have these two router links so
one for home and one for about and this is part of the answer to the question how can we show a component
as if it were a page we can do that because of view a router so let's open the router dot J Yes file
which was created and a particular field would automatically by view CLIA and that in fact is a bit
like the other s not by file in a Django project let's remember that view router is the package in their
view J Yes ecosystem that is in charge of handling client side routine for single page applications
and so when I see that the router does Jesus file is similar to the other l It's not by file in a Django
project what I mean is that inside of this file we define all the parts that we tell our application
that it has to show us different content based on the other two visiting and in Abuja yes application
as really come to understand the content is defined inside of components therefore as you can see in
these simple configuration we can see that we have defined the two parts one which is basically the
home page is called home and we lead to the application showing us the home component and the second
one slash about is called about and using a slightly different syntax is being assigned you see to the
about look few components.
So if we now quickly go back to the output don't view component we can see that here you are using to
Router links into the two proper we are passing some you are El Paso frequency you're inside the router
dot J Yes file therefore clicking on these links will result in the rendering of the related components
and as some of you might have guessed these components will be shown here what do we have a router view
at the moment.
This is what's the home page of our application looks like because of client side routine so what's
happening is that by request in their home page of our single page application are telling a view router
the rest to show us the content of the home component idea where we have a router view as we said so
let's make a test let's just switch the parts like so and if we now go back to Chrome and actively ask
for the page we now get the content of the about component and we can of course change it make clicking
on the links which in this case of course are inverted.
Notice also our E.R. in the U.S. role bar.
We also have these bays you are rarely shown before in the different parts.
And that's because one of the options we've defined in the route that the just file and the option is
Bayes.
So let's just comment it out.
Let's go back to Chrome
and if you now click on About you'll see that we only see net profit above.
Perfect.
One more thing to keep in mind is that this instance of a router that we creating as you see is of course
exported so that it can then be imported in the main the yes file ready to be used by passing it to
the view is this let's not make an example of how to use all these new tools and concepts.
We've been talking about in this lesson.
So in the views folder I'm going to create a new file which I'm going to call example dot view.
This is going to be our example single file component and to speed up the process.
I can just copy the code from allowed to view and so inside of the template tag we defined all the HDMI
all code for the component everything needs to be nested inside of a root HDMI element.
And if you want to add some style of it we can just define a class like example on your you can write
something like first single file components then it'll be low you can define style.
And for example we can say that we want all the H ones to be read so caller write.
Remember also that if you want to limit the styling only to the HDMI code of the component itself.
You need to add the scoped attributes so we can use it in that example component as well in Europe between
template and style.
We can also define script and thanks to that awesome very thorough package.
We also get this code for free.
So here we can define name example and then maybe the data model for this component which is a function
because this is in fact a component so return it and yeah we can define something like message Hello
world.
We can now interpolate this message.
So.
Page 3
like so now that the Dow component is complete we can import it eating the router Dodger yes file.
I'm just going to copy this code and change these two.
Example these two examples to you know yeah we can define in either path these times Lesh example name
example a component example component 3 if we now go back to Chrome and if you go to slash example get
that first single file component hello world perfect we can also add a link here in the Nevada using
it with their Linker so let's go back to the app dot you component I'm just going to copy this one.
So this is going to be an example.
Maybe that's what I said.
Well just move this
and so the path of course is going to be less an example which is the one we've just registered in the
router both as file.
Now going back to Chrome because of what the load the app is instantly updated.
Now we have a new link here in the number.
So this is basically for this lesson.
We've been talking about a lot of different concepts but there is one last thing that I want to point
out here as you see we are importing about Dot view component in a slightly different way from what
we're doing up here.
So as you can see and in fact read from the comment the code related to the about the view component
is going to be lazy loaded when the route is visited.
And this is in fact a good thing and most of the times it should make an application a bit faster because
of course lazy loading and these increase in speed is achieved by creating different chunks associated
component.
We see about Dot Escher dot the GSA and an ash is just basically a unique code an alpha numerical code
that is related to every single component variation basically.
This is good in theory but we just don't need it.
We've had a Django configuration so I'm going to import about from views about that view and yet I'm
just going to change the code a little bit to like.
So this is going to be about and if we now go back to Chrome everything works you see as expected anyway
so let's make a recap about what we've been talking about in this lesson.
We've seen our front end application is composed of three folders and a couple of configuration files.
The only folder that really matters for us is the S RC folder which stands for sort of soup and inside
of this folder we can find basically the most significant code for the application itself.
Most of the content of our single page application is divided into single file components which are
these files we have the view extension and in a typical single file component you will have the aged
Yemen code inside of the template HDMI tag in the javascript the logic for the component inside of the
script tag.
And Dan the CSF styling inside of this style tag finally viewed through that is the package of the view
ecosystem that provides us client side rooting inside of the route that dot J.
Yes file we define different parts so that once visited will result in the application rendering different
components thus allowing not a single page HDMI file the index dot age the amount file to change its
content dynamically.