Skip to content

Latest commit

 

History

History
78 lines (50 loc) · 3.02 KB

tutorial-create-react-app.md

File metadata and controls

78 lines (50 loc) · 3.02 KB
title description ms.date ms.custom ms.topic ms.devlang author ms.author manager ms.technology dev_langs ms.workload monikerRange
Create a React app
In this tutorial, learn how to create a simple React application in Visual Studio.
01/28/2022
vs-acquisition
tutorial
javascript
mikejo5000
mikejo
jmartens
vs-javascript
JavaScript
nodejs
>= vs-2022

Create a React app

[!INCLUDE Visual Studio]

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 have the following installed:

Create your app

  1. In the New Project Dialog, select Create a new project.

    :::image type="content" source="media/vs-2022/create-new-project.png" alt-text="Create a new project":::

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

    :::image type="content" source="media/vs-2022/react-choose-template.png" alt-text="Choose 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.

    :::image type="content" source="media/vs-2022/react-additional-info.png" alt-text="Additional information":::

    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

Set the project properties

  1. In Solution Explorer, right-click the React project, select Properties, and then go the Debugging section.

  2. Change the Debugger to launch to the launch.json option.

    :::image type="content" source="media/vs-2022/react-choose-debugger.png" alt-text="Choose the debugger (launch.json)":::

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:

  • npm running the react-scripts start command

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:

[!div class="nextstepaction"] Create an ASP.NET Core app with React