React and ASP.NET Core using Visual Studio 2022(Getting Started)

hello everyone welcome back once again in this video we will look at how we can get started with asp.net core and reacts Js we will look at downloaded and installing the necessary components to get us 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 so react.js is the JavaScript library for building a user interfaces it is used to build a single page applications and also allows to create a reusable UI components and of course asp.net core is a cross-platform high performance open source Frameworks for building modern cloud-enabled Internet connected services so with the asp.net core you can build web apps and services Internet of Things iot apps and mobile app and mobile backends yeah so enough of all attack so to get us started please make sure that you open a visual studio installer yeah so as you can see on the screen I've got a visual studio installer office I'm using my visual studio 2022. so we click on the modify so here you have to make sure that you've got this ASP asp.net and web development was checked so this will actually help you build web applications using asp.net core asp.net and standard based web Technologies including HTML JavaScript CSS and jsr this also includes tools for content containerizing your applications including Docker supports yeah and you got to make sure also make sure that you have the node.js development installed as well so you got to make sure that you have this box checked as well okay so once you you're done with that bit yeah then we can close um the visual studio installer then let's open a browser so once you have a browser let's Google a lab node.js yeah so the first bit is uh not just that alt yeah so we click on the first result so this will actually take you to this place yeah so based on what system you're using and you can download and install the node.js so in my case yeah I'm using Windows so you can click on the the recommended for multi-user Speed or you can use the currency no JS yeah it doesn't really matter yeah but I suggest you use the first bit okay so once you're done with that bit yeah then obviously you can close the web browser so we come inside uh open the visual studio so let's open a new let's start a new project okay so here obviously we can select I mean we can scroll down if you've downloaded and installed up the components you should you will be able to see asp.net core which react.js okay so this is a project templates for creating an asp.net core application with react.js yeah so we we select this and we click on the nest so here obviously will be taken into the project configuration so we can configure like we can do the project configuration like yeah the project name the project location and a solution where you want to put whatever you want to create a new solution or you want to you want to add you want to add this to a new solution I mean to a solution so we're going to leave yesterday and obviously you can also change the solution name as well if you want to so we click on the message so here obviously you can select the framework that The NET Framework that you want to use so we leave it after this year so it's a DOT net 7.0 this is the standard term support like this got Standard Time support so there are a bunch of um uh not necessarily much that you can use here once you you click on the drop down and obviously you can select the authentication type yeah so here if you select um we're going to select the individual account here and do not use top level statements so this is this is wherever to generate an explicit program class and main method instead of top level statement so we're just gonna I believe you after this here okay and we click on the grid so this might take a while so I'm just going to import the video while the house will create so as you can see here now we've actually got a new project created for us yet so if we look at here is still being created so are we going to have a look quickly what we've got in here so first of all let's look at the client up here so this contains um our react client application yeah so the first is the public big the public bit contains the the index.html the manifest.json and the fave icon there and the source contains um your react Source like the fjs and the app routes and whatnot yeah so we're not going to look too much into this as it is just to get us started okay so we're just going to go we're going to the controllers yes since we we're using the asp.net4 and reactors here we've also got controllers yeah so we've got iodc configuration controller let's click on it here so this is basically um this is this the web API yeah and then we've got a weather forecast controller so this is just to present a weather forecast PLC if we look at it here as you can as we can see yeah it's authorized so it's basically for authorized users only yeah so once we run it we will see what how is how it all comes together okay so let's close that let's go to the data so basically we've got a data sets yeah we've got um the application DB contest here so this actually inherits from the API authorization DB contest which is and inside is the application user yeah so this is this is more of like let's let's go into the model so this is the application user so this is what it's actually referencing yeah so let's click on the application inside so as we can see it's nothing there's nothing in here it actually inherits from the identity user we will have a look at this later on on our next video okay so let's look at the pages so let's look at this chance so we've got a login partial and we've got we've got at least we've got nothing like in terms of the pages asked you've got everything we've got everything inside our client advocate here okay so what we're doing next is actually run the project to see what actually happens yeah so as we're running it for the first time so it might take a while so I'm just going to pause what the health advice but while it's running here I'm just going to show you something quickly so let's click on the the program.cs so as you can see we've got a bunch of configurations here so we've got our connections being so which is actually referencing the default connections yeah so you can find your default connections inside the app setting.json yeah so let's click on that so as we can see here I've got this connection strings and we've got the code uh default connection so you can whatever server that you use it yeah you can you can do your server configuration here and if you works fine yeah so basically you can you can put your connect your computer connections thank you yeah yeah and we've got a bunch of stuff here which we're not going to look at okay so what I'm going to do is pause the video for the for the application to run so basically if you have got your node you're not yet um installed here you should get this yeah you have to make sure that you store node.js before you actually run application okay yeah so this is basically the node command here it will do a bunch of things before the whole thing starts yes we look at it here so we've got the launching the spa proxy yeah so it might take a while so I'm just going to pause the video so yeah I'm not even forcing so as you can see here now we've got the application run so if we open the this year we've got this here so the application is on this um URI okay and this is the network that is actually using it okay so I'm just going to minimize it okay so here we've got a bunch of things so if we look at this we click on here so as you can see it says processing login because like I said earlier on is actually authorized so you need to log in before you can you can you can get the fetch data or you can get this clip here so you can click on the register it might take a while so as you can see here now it's so this is the register page okay so you can add your email you can enter your email and password and confirm your password and you register and then you log in and you'll be able to if we come back here you will be able to get the search data yeah so I'm going to leave the video here yeah and on my next video we will build it from scratch and we have a look at the whole things yeah okay so if you haven't subscribed the Channel please make sure you do because I've got lots of videos coming up and I hope you have a lovely morning afternoon even wherever you are peace

Channel: Hacked

Views: 5,979

Keywords: react, asp.net core react project, reactjs projects, reactjs tutorial, visual studio 2022, javascript, typescript, react visual studio 2022

Id: np-Rfyq7AL0

Length: 10min 50sec (650 seconds)

Published: Thu Aug 10 2023