Launch an ASP.NET Core Web app with React.JS in 5 minutes

hello everybody this is a quick video walkthrough of how to kick off a new asp.net core web application along with react KS and bootstrap this page is pasted this walkthrough is based on this official Microsoft page and I'm going to Lance this project with dotnet command line tool so I'm going to head over to visual studio code I'm going to open a new terminal I'm going to switch to another folder and I'm going to run that dot net new command along with react to create a new react template and I'm going to place all this in a new folder called donut react yes this is a custom name of course the installation process is going to take a couple of seconds now the installation has finished so I'm going to switch to this new folder and I'm going to run the dotnet build command in order to ensure that all dependencies are installed after a few seconds everything has been installed and I'm going to open this newly created folder to my workspace here so this is the project folder and the react.js application lives in this client app folder so now I'm going to clear my console and I'm going to run the dotnet watch run command to run the application after a few seconds the application will be ready and I can click this URL to see on my local host and port 5001 the react.js application so this is a rancher's application running it's based on asp.net core ancestor for the backend the server-side code react and bootstrap for the layout there are a couple of examples in this simple template this is very simple react component and there is also a page where it loads some data from the core server using Ajax this application is based on this location so this project also comes with a controller that serves this JSON file so I'm going to head back to the first page and I'm going to show you how can I can modify this page so I have to go to this client up pates go into the source or everything all the source code of the reactor application is based here I'm going to open the index zs file and I'm going to let I'm going to open this app component which is loaded from the index j s and I'm going to place something here like a title I'm going to use react fragment in order to place this adjacent a sex element inside this and if I switch to my browser you can see that these heading is being displayed now so I can go to my indexes and start working on my custom application I can erase most of these lines here if I'm going to create a new component I'm just going to create a new simple component which I'm going to display it on the page using react don't render I'm going to put this component inside the index dot HTML using this element now my application is ready to be developed thank you for watching

Channel: Plethora Themes

Views: 21,484

Keywords: wordpress theme, themeforest, cleanstart

Id: MpmORt3Y6Pg

Length: 5min 43sec (343 seconds)

Published: Sat May 16 2020