React Project in Visual Studio 2022 (Getting Started)

hello everyone welcome back once again in this video we will look at getting started with react project inside the visual studio 2022 we will look at downloading and installing the necessary components needed for us to get started but before we get started please make sure you subscribe to the channel if you haven't so let's get into it then react is a javascript library for building interactive user interface it lets you compose complex uis from small and isolated pieces of code known as components and of course visual studio is an integrated development environment ide created by microsoft for building software websites web apps etc so enough of all of the talking let's get into the real stuff so as you can see on the screen i have visual studio installer opened so we go if you haven't installed a visual studio please make sure you do first so if you've installed a visual studio what we do is we click on the modify you open the installer and click on the modify so here we have to make sure that we check on this box asp.net and web development so this actually helps you to build web applications using asp.net call asp html javascript and whatnot yeah and then we have to also make sure that we click on this the node.js development so this will actually install all the necessary node components here so once we've once you select on this asp.net and web development you have to also make sure that you have this option selected as well so asp.net web development so you have to make sure that we have this option selected yeah the additional project templates yeah you have to make sure that this is also checked so once you're done with that then you download and install it i've i'm not going to go ahead with that because i've already downloaded it so i'm going to close it then we launch the visual studio but before we actually launch the visual studio there's one more thing that we got to do we have to open the browser yeah uh we google i mean google google on google we google uh we we installed the node we download and install node.js here node js so here you actually install whatever is applicable to you yeah so you download and install the notejs.js yeah it's very important so once you're done with that yeah then you actually restart your computer after that then we click on the we come at this stage here we click on the create a new project so here as you can see if it's under all languages yeah we select javascript yeah so if you follow all the necessary steps here and you get to this stage then you should have all these templates show it showing or coming up here so we scroll down so as you can see here now we have a standalone javascript react project so this is a javascript react project template which is a bootstrapped which is bootstrapped by running your global install nps yeah so we select this here and then we click on the nest so here obviously you can configure the project details here but we're not going to look too much into that yeah so we're just going to click on the nest so here what you can do is add integration for mtsb.net web api project yeah so you can check on this box here to add asp.net web api project so we're not going to do that yeah so we're just going to click on the create so once you get this yeah this window so you yeah um okay to proceed so as you can see here now we have all the necessary components being downloaded and installed so we're just gonna wait for the whole thing to complete so obviously i'm just going to pause the video while the whole thing completes so now that we've got the command installation completed so as you can see here now we have the visual studio being started yeah so as you can see here now we have the project being created or created for us yeah so we're just going to look inside briefly yeah so as you can see we've got these two folders here so this is the public folder yeah so here we have so we have this here so basically this is just the entry point for application so we can you look at the source as well so here we look at it the index.js and here we have the app start yeah so what we would do next is actually run it to see what actually comes out of it yeah so as you can see here now we actually have a first react web ui project up and running here so from here it's pretty easy just just to go ahead and actually uh tweak this um template just to suit whatever you want to do so if you look at on the screen here now we have so you can edit a source straight up from the app.js here so we look at that before we actually sign up yeah so if we come inside here we come inside the source the app.js so here obviously you can start to edit from here and you can also add a bunch of stuff whatever you actually want to add so as you can see uh it's not really difficult to get us started yeah so i'm i'm not going to do a lot but i'm going to continue from this stage here on my next upcoming video on this topic yeah so we're just going to look at how we can actually edit this um template yeah so stay tuned and um subscribe because i have a lot of videos coming up yeah so have a lovely morning afternoon evening wherever you are blessed

Channel: Hacked

Views: 32,596

Keywords: react, react js, react tutorial, react visual studio 2022, visual studio 2022, website development, react ui design, react visual studio, build react, website, react website

Id: qBSFHEra5P0

Length: 8min 12sec (492 seconds)

Published: Wed Aug 31 2022