Create a React app

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple React frontend web application.

Prerequisites

Make sure to install the following:

Create your app

  1. In the Start window (choose File > Start Window to open), select Create a new project.

    Screenshot showing Create a new project

  2. Search for React in the search bar at the top and then select Standalone JavaScript React Project or Standalone TypeScript React Project, based on your preference.

    Screenshot showing choosing a template

  3. Give your project and solution a name.

    If you previously selected Standalone JavaScript React Template, when you get to the Additional information window be sure NOT to check the Add integration for Empty ASP.NET Web API Project option. This option adds files to your React template so that it can be hooked up with the ASP.NET Core project, if an ASP.NET Core project is added.

    Screenshot showing Additional information

  4. Choose Create, and then wait for Visual Studio to create the project.

    Please note that creation of the React project takes a moment because the create-react-app command that runs at this time also runs the npm install command.

View the project properties

The default project settings allow you to build and debug the project. But, if you need to change settings, right-click the project in Solution Explorer, select Properties, and then go the Build or Debugging section.

Note

launch.json stores the startup settings associated with the Start button in the Debug toolbar. Currently, launch.json must be located under the .vscode folder.

Build Your Project

Choose Build > Build Solution to build the project.

Start Your Project

Press F5 or select the Start button at the top of the window, and you'll see a command prompt such as:

  • VITE v4.4.9 ready in 780 ms

Note

Check console output for messages, such as a message instructing you to update your version of Node.js.

Next, you should see the base React app appear!

Next steps

For ASP.NET Core integration: