hello everyone in our today's video I'm going to show you how you can set up a react application using a V and also how to use the T and CSS in it and then creating the routing using the react router Dom so as you see this will be our simple setup of application of course my core fundamental is to show you how actually you can create those routing Pages as you see we're going to create that Customs routing using that re cloud D so to toggle through all the pages and that's what we're going to create and to start with we're going to start with the V and just to start with I have one empty folder here I will open my terminal and now you can go to the V documentation to how to implement the simple react application as you see with the getting started we just need to have these commments I will just copy that and then I'm going to run it here so what I'm going to say is that like like a test project okay so it's very simple to set up that just put y to yes and now you will have a bunch of things which actually you're going to use the van L react pre react or some other things I will go with the react and of course it's a simple project so I will just go with the plain JavaScript and that's done if you put an ALICE as you see the project is created so we'll just put the CD test our project and after that I will open it in my code editor now this is the simple setup of project as you may see here I have only the source folder and here in the source I have a little bit of assets app CSS and app.jsx in. CSS and a main. jsx so first thing first let's run our application and to that do that I will just take one git Bash from here and now I will just put that as you may remember in the vit there is some of the commons as you may see here which we need to follow and install and npm Rand dep so I'll close it right now so now what we need to do npmi or npm install so it will install all the dependencies required to run your application now it's very easy to create the initial application because it's not installing any other dependencies so that's why it's a building a very fast but now as you see it's taking a bit of time now let's run that command which is npm run de now it will not take run in the Local Host 3000 as you see it says Local Host 5173 so that's the Local Host is just taking from that uh vit so let's open it now here is the demo application you see it's a little bit counter application is happening so what I will do I will just clear up all the things from the app so I will just go and click that and now I will put everything inside the dip I will take an H1 so it will be that simple application okay application and as you see this is our simple application so now we don't want any kind of other CSS portions because we are going to grab that t in CSS so I will take another G bash here so now I will I'm going to install the twiin CSS and to do that I will just put that npm install of course it will be Das D and then the tellin CSS and also I need that post CSS and also I need that uh Auto prefixer so it will be Auto prefixer so these three things which going to help me to run the talin CSS inside in this project and after finishing that I also need to create another file either you can create a tellwin config.js in your in the top of directory or you just run that command which will be npx and that will be telling CSS in it and a flag so uh oops it's it's my bad it should be P flag not the C veres okay so now as you see I'm having one that tellin config.js file so now here I just uh need to uh in the content folder in that bracket I need to pass that as so of course I have the content so what I need to do is that Define the path of course I will go with that index.html and after that uh also I will go with that tool actually go with the source so I will go within the source and inside the source I'm going to access everything also the subdirectory and below that subdirectory I will get that file extension which can be JS can be TS can be jsx and can be the TSX so that's the core fundamental things I'm going to use and here in the index. CSS I'm going to remove everything from here and now I'm going to Define that I want to use the twiin base and also I want to use that uh tawi uh components and then I want to use that uh Twi utilities so that's the three things I want to use okay as you see all the structures have been gone so now I'm going to remove that app. CSS file which actually no longer be useful for me I'm going to remove those things no need that and no need this portion okay so as you see that's a simple application is running so now what I need to do one more thing is that I will close the terminal and then I will put that npm runev again and of course I will take one new folder as sorry in the new file and here I will run my application again as you see that's the simple setup I have been done and now as you see my tellin CSS is working so if I put the class name if I put the Tex text AEL the text uh rate 500 you see that's working perfectly so now you see what I'm typing I'm getting some uh like the intelligence going on and that's the one it will help you to get that one is the called the telin CSS intelligence that will be responsible to create that beautiful suggestion for you so don't forget to install that one so now as my focus on to create the routing Dome so what I'm going to do I'm going to get all other parameter from my previous application to hold up here and to create that so first thing first as you see I have the asset folder so what I'm going to do to remove that asset folder from here and then I'm going to grab my previous asset folder so I'll just get the setup from here then I'm going to start again so now this is my simple setup of the project which I have so now here is a very simple and a very easy way I did it and that is to say is that I have my hero section and other properties as you see this is a very simple component tree don't worry about that if you want the code I will give it to you as I always love to give you the free code so now what actually I want to show you about the routing setup so this is don't worry about that this a simple CSS fundamental things which we create in all other application so now I'm going to show you how actually you can create the routing setup using that react router Dome and to implement that one first thing first we need to actually install that react router D so I will put that npm install and that will be react router Dum okay so now feel free to go and read all the documentation from here actually that will you that will give you a better understanding about how actually that things work but trust me when I'm going to guide you through you're going to just find the right way to follow through so this is the things I think is already done so now I will go to main. jsx here the tricky things going to be happen so first thing first we will create a layout okay so why you going to create the layout so we can inject that layout like remember that header and also there will be a footer which I think I forget to implement here so if I just get the fter fter so let's get uh oops it will be capital F filter okay sometimes the auto stion is not working properly so import filter from it going to be from the components and and it will be that footer so now I have that footer and also I have that header so these two things going to implement all other pages so right now I don't have any page if I go through that about it will give a four for error because I don't have that page uh okay is it is it giving me something okay I think because I didn't Implement in the routing so it's not giving me any error or it's not creating anything so right now let's go back there and create all the routing so this is the main do GSX here all the things going to happen so first thing first I'm going to create that layout so it will be const and I'm going to give a name of layout I'll just simply declare an arrow function so here I will just return something and that thing I'm going to put a div here and inside the div I'm going to pass my header here so the header and then I'm going to pass a property called outlet from the re re rout d as you see I imported that one from the react rout D and then I'm going to pass that fter remember how actually we are rendering the children inside our application that's actually what it's going to do in header and fter going to pass that header and footer so all other Pages property it going to be passed like as a props and it going to just handle that one in this orderable fashion so no need to worry about it you're just going to see in a bit now as we have the layout we need to just declare the route setup okay so what I'm going to do say const and that going to be the router and to create the router we I'm going to use that create a browser router okay don't forget to import that one from that react rout Dom and that is a function and that going to take an array of things and inside that array we're going to pass everything underneath an object so first thing first we're going to declare a path which going to be home path for our base router and then the element remember we we are now going to declare the element which going to be wrapped through it as from the layout so that's the element which going to wrapping out here on our entire layout and now you will declare the children the what are the children it going to append so it also be are of children that can be there can be multiple children because we're going to have the multiple pages so now every children we're going to pass as a Prof so first one I will Define as the Home Route and that home route going to be the element which is going to be our app okay so that will be our home route so okay that's cool so now what I'm going to do I'm going to just copy is several times because we're going to have separate router so first is home then we're going to have the four slab and of course that we're going to take the pages of about so first we'll just take one route to see how actually actually that thing is working I'm going to comment out all of that so first I'm going to create about page so that we can actually see how the about things is actually working so to implement that one let's go in that here so now what actually we can do we can create a folder so that folder we're going to name it as the pages because we're going to keep all the pages here the first page is going to be about do jsx rafc to create a simple error function and now here what I'm going to do is to wrapping up I'm going to take that about me component which I have and also that component I'm going to give some class name which going to be BJ it will be the primary color text going to be gray of 200 okay so now if we go to that about page you are not going to see anything and that's that's cool because we are in the right track because we mainly miss something which is we need to inject our route setup as you see we have that router but we didn't inject it yet and to implement that router I'm going to remove everything I don't want to see the stri uh Stak mode or others so I'm going to get that router Provider from react router Dom and by default it going to take the router and I'm going to pass the parameter router here so now our route is already set up so now let's just reload that again and as you see as we create that about we need to pass that about also here which we need to import from that page so now if I go back here in about you see a simple about Pages coming here also what I'm going to do I'm going to wrapping up that so now let's go back to header I'm going to wrap that image and how I'm going to wrap I'm going to wrap it with the link parameter which is coming from the re cloud. Dom and in the link parameter now what I need to do pass to two format like where I want to pass that link so now of course it will go to for/ home as you see now here we can see the two separates like a header and also the footer it because remember that our app we are declaring the header and footer here so I'm just going to remove it here okay so now we will be able to see a pretty fine format which is that we have only single thing and now what also I'm going to do create that route based things because uh I remove it I think we need to add that routing setup from here and that is going to happen in the header also so this is the P tag we have so I'm going to just wrap it with the link parameter okay and as I wrap it here I need to pass the key in that parent layout and here I'm going to pass the two parameter which going to be link on that too now if I go to about as you see I in the about page and of course if I click in the services nothing available here so now for the services what we need to do we need to create another page and of course if you're developing an X application or other things by default you're going to have all those parameter all the pages is set it so but here you need to make the things set up so now what I'm going to do I'm going to just take my all other pages so it will be three more pages from here which is going to be that contact Pages portfolio pages and services pages and here in that route parameter also I need to pass that pages so I'm going to just com remove that comment from here and now I'm going to Define my other route the second one which going to be uh Services services and also I need to implement that uh services from the pages and then again it going to be my portfolio need to get that portfolio too and then I'm going to have my contact and also need to import that contact I think not that contact me it will be uh I think it will be contact page uh contact page okay so let's import manually so this will be the pretty much all other parameter here so let's import it so it will be import contact page from uh not from the component it going to be yeah page PES and then contact page uh I think I actually get some of the wrong things here which is not going to be about it going to be about pages about page which is going to be that one yeah I think about is right so the other parameters going to be I think is the wrong Services is the services okay Services is Right portfolio is the portfolio Okay I think it's going to be okay so only happening the problem is happening with the contact page okay right so now if we create the services okay uh we are anywhere yeah in the services if we create the portfolio Okay now once actually happening here in the portfolio uh let's go back to the portfolio Pages yeah I need to Define that BJ is defined and everything is defined so what actually happening here I think I take the wrong page it should be portfolio page okay now it's cool and in the contact so that's the simple parameter now you can go back to create some parallel routing and whatever the feel free you want to do it you can do it from the react rout to d as you see there's a lot of things here if you just want to grab the main concept you can do it if you want to see the examples here there all other tutorial you can actually go ahead a little bit of playground so this is actual the fundamental how you can use and pretty much Define everything and also it will be helpful if you learn how to use the tan CSS because all the parameter is actually created using that tan CSS and now actually how you can grab and use T code right because right if you are not familiar what actually is happening you can also make some practices with your own in your house so how actually you can get there so don't worry about it I just show you how actually you can initialize the project using the vit and creating the route setup using the react router Dom so now what I'm going to do I'm going to give that code and then you can explore a bit you can create new some more new projects and that will be very helpful for you and to do that what I'm going to do I'm going to put that git in it to initialize my git here and then I'm going to make the git add dot to add everything in my git and then I'm going to put that git comit commit uh which going to be oops uh it will be comit and the first it will be initial commit so now it's committed so what I'm going to do I'm going to just get my github.com and then I will open a repository for you so you can use that one and if you feel it's really helpful then you can just strad that so now I will take a new repository as I keep the name which is the test project so I will just put uh put that as a test project here and I will keep the public it for you so it has been created and now what I'm going to do I'm going to link up that within my application so okay done and then get push which going to be you origin master so as long as you'll see there is the code everything is here okay I think something wrong so I'll go back uh okay let's go back about more a bit okay test project okay so all other things is here you just need to clone it and then you just put that npm install and all other things going to be there so feel free to explore a bit how actually you going to do that how actually you can interact with your application and how you can create something more so of course I'm going to come up with some more new videos which can help uh can be helpful for you and one it will be like simple things which is actually going to be the TN CSS Spotlight theme Here you going to see how actually I'm going to build that things from this scatch actually they build it with the top of a very good react comp components so we're going to create it also from the scratch and I'm going to show you how you can do that and that will be coming in the next video so hope we're going to see you with that