Merge pull request #13812 from Mikejo5000/mikejo-br25

Update instructions for React, Vue, and Angular tutorials with ASP.NET Core

Author: prmerger-automator[bot]

docs/javascript/create-react-app.md

@@ -1,7 +1,7 @@
 ---
 title: Create a React app in Visual Studio
 description: Create, build, and run a React to-do list web application project from a Visual Studio template.
-ms.date: 10/08/2024
+ms.date: 04/09/2025
 ms.topic: tutorial
 ms.devlang: javascript
 author: mikejo5000
@@ -38,7 +38,7 @@ Make sure to install the following:
 
    It’s a common convention to place components in a components folder, but this is not required. 
 
-1. Right-click the new folder, select **Add > React JSX Component File**, name it `TodoList`, and click **Add**.
+1. Right-click the new folder, select **Add > New Item**, then choose **React JSX Component File** in the dialog box, name it `TodoList`, and click **Add**.
 
    :::image type="content" source="media/vs-2022/react-add-jsx-component.png" alt-text="Screenshot showing adding a JSX component.":::
 

docs/javascript/tutorial-asp-net-core-with-angular.md

@@ -1,7 +1,7 @@
 ---
 title: "Create an ASP.NET Core app with Angular"
 description: Create an ASP.NET Core project to serve as an API backend and an Angular project to provide the user interface in Visual Studio.
-ms.date: 04/07/2025
+ms.date: 04/09/2025
 ms.topic: tutorial
 ms.devlang: javascript
 author: mikejo5000
@@ -35,7 +35,7 @@ Make sure to install the following:
 - npm ([`https://www.npmjs.com/`](https://www.npmjs.com/package/npm)), which is included with Node.js
 - Angular CLI ([`https://angular.dev/tools/cli`](https://angular.dev/tools/cli)), which can be the version of your choice. The front-end project is created using the framework CLI tools you have installed on your local machine, so this determines the Angular version used in the template.
 
-## Create the frontend app
+## Create the app
 
 1. In the Start window (choose **File** > **Start Window** to open), select **Create a new project**.
 
@@ -97,7 +97,7 @@ The Angular app appears and is populated via the API (the localhost port may var
 
 :::image type="content" source="media/vs-2022/asp-net-core-weather-forecast-app.png" alt-text="Screenshot showing the weather forecast app."::: 
 
-If you don't see the app, see [Troubleshooting](#troubleshooting).
+If you don't see the weather forecast data in the browser, see [Troubleshooting](#troubleshooting).
 
 ## Publish the project
 

docs/javascript/tutorial-asp-net-core-with-react.md

@@ -1,7 +1,7 @@
 ---
 title: "Create an ASP.NET Core app with React"
 description: Create an ASP.NET Core project to serve as an API backend and a React project to provide the user interface in Visual Studio.
-ms.date: 11/06/2024
+ms.date: 04/09/2025
 ms.topic: tutorial
 ms.devlang: javascript
 author: mikejo5000
@@ -32,7 +32,7 @@ You can use the method described in this article to create ASP.NET Core Single P
   If you need to install the workload and already have Visual Studio, go to **Tools** > **Get Tools and Features...**, which opens the Visual Studio Installer. Choose the **ASP.NET and web development** workload, then choose **Modify**.
 - npm ([`https://www.npmjs.com/`](https://www.npmjs.com/package/npm)), which is included with Node.js
 
-## Create the frontend app
+## Create the app
 
 1. In the Start window, select **Create a new project**. <!-- Avoid parenthetical clauses. https://review.learn.microsoft.com/en-us/help/contribute/localization-mt-guidance?branch=main-->
 
@@ -55,8 +55,7 @@ You can use the method described in this article to create ASP.NET Core Single P
    Compared to the [standalone React template](../javascript/tutorial-create-react-app.md), you see some new and modified files for integration with ASP.NET Core:
 
    - vite.config.js
-   - App.js (modified)
-   - App.test.js (modified)
+   - App.jsx (modified)
 
 1. Select an installed browser from the Debug toolbar, such as Chrome or Microsoft Edge.
 
@@ -87,13 +86,13 @@ Press **F5** or select the **Start** button at the top of the window to start th
 - The Vite CLI showing a message such as `VITE v4.4.9 ready in 780 ms`
 
    >[!NOTE]
-   > Check console output for messages. For example there might be a message to update Node.js.
+   > Check console output for messages. For example, there might be a message to update Node.js.
 
 The React app appears and is populated via the API (the localhost port may vary from the screenshot).
 
 :::image type="content" source="media/vs-2022/asp-net-core-weather-forecast-app.png" alt-text="Screenshot showing the weather forecast app.":::
 
-If you don't see the app, see [Troubleshooting](#troubleshooting).
+If you don't see the weather forecast data in the browser, see [Troubleshooting](#troubleshooting).
 
 ## Publish the project
 

docs/javascript/tutorial-asp-net-core-with-vue.md

@@ -1,7 +1,7 @@
 ---
 title: "Create an ASP.NET Core app with Vue"
 description: Create an ASP.NET Core project to serve as an API backend and a Vue project to provide the user interface in Visual Studio.
-ms.date: 4/07/2025
+ms.date: 4/09/2025
 ms.topic: tutorial
 ms.devlang: javascript
 author: mikejo5000
@@ -34,7 +34,7 @@ Make sure to install the following:
   If you need to install the workload and already have Visual Studio, go to **Tools** > **Get Tools and Features...**, which opens the Visual Studio Installer. Choose the **ASP.NET and web development** workload, then choose **Modify**.
 - npm ([`https://www.npmjs.com/`](https://www.npmjs.com/package/npm)), which is included with Node.js.
 
-## Create the frontend app
+## Create the app
 
 1. In the Start window (choose **File** > **Start Window** to open), select **Create a new project**.
 
@@ -56,7 +56,7 @@ Make sure to install the following:
 
    Compared to the [standalone Vue template](../javascript/tutorial-create-vue-app.md), you see some new and modified files for integration with ASP.NET Core:
 
-   - vite.config.json (modified)
+   - vite.config.js (modified)
    - HelloWorld.vue (modified)
    - package.json (modified)
 
@@ -91,7 +91,7 @@ The Vue app appears and is populated via the API (the localhost port may vary fr
 
 :::image type="content" source="media/vs-2022/asp-net-core-weather-forecast-app.png" alt-text="Screenshot showing the weather forecast app.":::
 
-If you don't see the app, see [Troubleshooting](#troubleshooting).
+If you don't see the weather forecast data in the browser, see [Troubleshooting](#troubleshooting).
 
 ## Publish the project