Creación de una aplicación React

Artículo
08/24/2023

En esta introducción de entre cinco y diez minutos al entorno de desarrollo integrado (IDE) de Visual Studio, creará una sencilla aplicación web React de front-end.

Requisitos previos

Asegúrese de instalar lo siguiente:

Visual Studio 2022 o versiones posteriores. Vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.
npm (https://www.npmjs.com/), que se incluye con Node.js
npx (https://www.npmjs.com/package/npx)

Creación de la aplicación

En la ventana de inicio (elija Archivo>Ventana de inicio para abrirla), seleccione Crear un nuevo proyecto.
Busque React en la barra de búsqueda de la parte superior y, a continuación, seleccione Standalone JavaScript React Project (Proyecto de React de JavaScript independiente) o Standalone TypeScript React Project (Proyecto de React de TypeScript independiente), según cuáles sean sus preferencias.
Asigne un nombre al proyecto y a la solución.

Si previamente seleccionó Standalone JavaScript React Template (Plantilla de React JavaScript independiente), cuando llegue a la ventana Información adicional, asegúrese de NO seleccionar la opción Add integration for Empty ASP.NET Web API Project (Agregar integración para el proyecto de API web de ASP.NET vacío). Esta opción agrega archivos a la plantilla de React para que se pueda enlazar con el proyecto de ASP.NET Core, si se agrega un proyecto de ASP.NET Core.
Seleccione Crear y espere a que Visual Studio cree el proyecto.

Tenga en cuenta que el proyecto de React tarda un poco en crearse porque el comando create-react-app que se ejecuta en el mismo momento también ejecuta el comando npm install.

Ver las propiedades del proyecto

La configuración predeterminada del proyecto permite compilarlo y depurarlo. Sin embargo, si necesita cambiar la configuración, haga clic con el botón derecho en el proyecto en Explorador de soluciones, seleccione Propiedades y, a continuación, vaya a la sección Compilación o Depuración.

Nota:

El archivo launch.json almacena la configuración de inicio asociada al botón Iniciar en la barra de herramientas de depuración. Actualmente, launch.json debe encontrarse en la carpeta .vscode.

Compilación del proyecto

Elija Compilar>Compilar solución para compilar el proyecto.

Iniciación del proyecto

Presione F5 o seleccione el botón Iniciar en la parte superior de la ventana. Verá un símbolo del sistema como:

VITE v4.4.9 listo en 780 ms

Nota:

Compruebe la salida de la consola para ver los mensajes, como un mensaje que le indica que actualice la versión de Node.js.

A continuación, debería ver que aparece la aplicación React base.

Pasos siguientes

Para la integración de ASP.NET Core:

Creación de una aplicación ASP.NET Core con React

Share via