A Simple React Application in Visual Studio 2022
[Note: This project uses the VS template “ASP .NET Core with React JS”. For other templates I will be doing separate articles. This template comes with scaffolding and I didn’t try to remove it. I explain how to add a new page to the existing setup.]
Start Visual Studio and click on the Create a new project button.
In the next window search for react templates and select the “ASP .NET Core with React JS” option.
In the next window give a name and a location to your project.
In the next window accept the default values.
You have to install npm for your project. You can do this as a nuget package. For that click on Tools -> Nuget Package Manager -> Manage Nuget Packages for Solution as in the below image.
In the next screen move to Browse and search for npm. Then click on it and check the project checkbox and click Install.
The previous steps would have created a new React project for you. We’ll be adding a new page to the existing scaffolding. For that right click on the components folder and select Add new item.
In the next window select Javascript file and enter a name.
In your new page paste the below code.
There’re a few other changes that you have to do.
- In your App.js file add the below lines.
import { Greeting } from './components/Greeting';
<Route path='/greeting' component={Greeting} />Here’s the completed App.js file.
2. Add a new NavItem to the NavMenu.js class.
<NavItem><NavLink tag={Link} className="text-dark" to="/greeting">Greeting</NavLink></NavItem>
Then you’re all set to go.
Run the application, enter your name in the name text box and you’ll see your greeting on the Greeting page.
In my next articles I’ll explain how to do a simple React application with the other templates available in Visual Studio.
