Uso de React con ASP.NET Core

  • Artículo

Nota:

Esta no es la versión más reciente de este artículo. Para la versión actual, consulta la versión .NET 8 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulta la Directiva de soporte técnico de .NET y .NET Core. Para la versión actual, consulta la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulta la versión .NET 8 de este artículo.

Visual Studio proporciona plantillas de proyecto para crear aplicaciones de página única (SPA) basadas en marcos de JavaScript como Angular, React y Vue que tienen un back-end de ASP.NET Core. Estas plantillas:

  • Crean una solución de Visual Studio con un proyecto de front-end y un proyecto de back-end.
  • Usan el tipo de proyecto de Visual Studio para JavaScript y TypeScript (.esproj) para el front-end.
  • Usan un proyecto de ASP.NET Core para el back-end.

Los proyectos creados mediante las plantillas de Visual Studio se pueden ejecutar desde la línea de comandos en Windows, Linux y macOS. Para ejecutar la aplicación, usa dotnet run --launch-profile https para ejecutar el proyecto de servidor. Al ejecutar el proyecto de servidor, se inicia automáticamente el servidor de desarrollo de JavaScript de front-end. Actualmente se requiere el perfil de inicio https.

Tutorial de Visual Studio

Para empezar, sigue el tutorial Creación de una aplicación ASP.NET Core con React en la documentación de Visual Studio.

Para obtener más información, consulta JavaScript y TypeScript en Visual Studio.

Plantillas de SPA de ASP.NET Core

Visual Studio incluye plantillas para compilar aplicaciones ASP.NET Core con un front-end de JavaScript o TypeScript. Estas plantillas están disponibles en la versión 17.8 o posterior de Visual Studio 2022 con la carga de trabajo de desarrollo web y ASP.NET instalada.

Las plantillas de Visual Studio para compilar aplicaciones ASP.NET Core con un front-end de JavaScript o TypeScript ofrecen las siguientes ventajas:

  • Eliminan la separación del proyecto para el front-end y el back-end.
  • Se mantienen al día con las versiones más recientes del marco de front-end.
  • Se integran con las herramientas de línea de comandos del marco de front-end más recientes, como Vite.
  • Plantillas para JavaScript y TypeScript (solo TypeScript para Angular).
  • Experiencia enriquecida de edición de código de JavaScript y TypeScript.
  • Integran las herramientas de compilación de JavaScript con la compilación de .NET.
  • Interfaz de usuario de administración de dependencias de npm.
  • Compatible con la depuración y la configuración de inicio de Visual Studio Code.
  • Ejecuta pruebas unitarias de front-end en el Explorador de pruebas mediante marcos de prueba de JavaScript.

Plantillas de SPA de ASP.NET Core heredadas

Las versiones anteriores del SDK de .NET incluían las plantillas heredadas para compilar aplicaciones SPA con ASP.NET Core. Para obtener documentación sobre estas plantillas anteriores, consulta la versión ASP.NET Core 7.0 de la información general de SPA y los artículos de Angular y React.

La plantilla de proyecto de ASP.NET Core con React ofrece un práctico punto de partida para las aplicaciones ASP.NET Core que usan React y Create React App (CRA) para implementar una completa interfaz de usuario (UI) en el lado cliente.

La plantilla de proyecto es equivalente a crear tanto un proyecto de ASP.NET Core que funciona como API web como un proyecto de CRA React que funciona como interfaz de usuario. Esta combinación de proyectos ofrece la comodidad de hospedar ambos proyectos en un único proyecto de ASP.NET Core que se puede crear y publicar como una sola unidad.

La plantilla de proyecto no está pensada para representación del lado servidor (SSR). Para SSR con React y Node.js, considera Next.js o Razzle.

Creación de una nueva aplicación

En un símbolo del sistema, crea un nuevo proyecto con el comando dotnet new react en un directorio vacío. Por ejemplo, los siguientes comandos crean la aplicación en un directorio my-new-app y cambian a ese directorio:

dotnet new react -o my-new-app
cd my-new-app

Ejecuta la aplicación desde Visual Studio o la CLI de .NET:

Abre el archivo .csproj generado y, desde ahí, ejecuta la aplicación de la manera habitual.

El proceso de compilación restaura las dependencias npm en la primera ejecución, lo que puede tardar varios minutos. Las compilaciones posteriores son mucho más rápidas.

La plantilla de proyecto crea una aplicación ASP.NET Core y una aplicación de React. El uso previsto de la aplicación ASP.NET Core es el acceso a los datos, la autorización y otros problemas relativos al servidor. La aplicación de React, que reside en el subdirectorio ClientApp, está diseñada para utilizarse para su uso con todos los problemas de la interfaz de usuario.

Adición de páginas, imágenes, estilos, módulos, etc.

El directorio ClientApp es una aplicación de React de CRA estándar. Para obtener más información, consulta la documentación oficial de CRA.

Existe pequeñas diferencias entre la aplicación de React creada mediante este plantilla y la creada mediante CRA propiamente dicho; sin embargo, las funcionalidades de la aplicación permanecen sin cambios. La aplicación creada con la plantilla contiene un diseño basado en arranque y un ejemplo de enrutamiento básico.

Instalar paquetes de npm

Para instalar paquetes de npm de otro fabricante, usa un símbolo del sistema en el subdirectorio ClientApp. Por ejemplo:

cd ClientApp
npm install <package_name>

Publicación e implementación

En el desarrollo, la aplicación se ejecuta en modo optimizado para comodidad del desarrollador. Por ejemplo, agrupaciones de JavaScript contienen asignaciones de origen (de modo que durante la depuración, puede ver el código fuente original). La aplicación inspecciona los cambios en los archivos de JavaScript, HTML y CSS en el disco y, automáticamente, realiza una nueva compilación y recarga cuando observa que esos archivos han cambiado.

En producción, usa una versión de la aplicación que esté optimizada para el rendimiento. Esto se configura para que tenga lugar automáticamente. Al publicar, la configuración de compilación emite una compilación transpilada reducida del código de cliente. A diferencia de la compilación de desarrollo, la compilación de producción no requiere la instalación de Node.js en el servidor.

Puedes usar métodos de implementación y hospedaje de ASP.NET Core estándar.

Ejecución del servidor de CRA de forma independiente

El proyecto está configurado para iniciar su propia instancia del servidor de desarrollo de CRA en segundo plano cuando la aplicación ASP.NET Core se inicia en modo de desarrollo. Esto resulta útil porque significa que no tienes que ejecutar manualmente un servidor independiente.

Sin embargo, esta configuración predeterminada tiene un inconveniente. Cada vez que modificas el código de C# y la aplicación ASP.NET Core debe reiniciarse, el servidor de CRA se reinicia. Se necesitan unos segundos para iniciar la copia de seguridad. Si realizas modificaciones frecuentes en el código de C# y no quieres esperar a que se reinicie el servidor de CRA, ejecuta el servidor de CRA externamente, con independencia del proceso de ASP.NET Core.

Para ejecutar el servidor de CRA de forma externa, cambia al subdirectorio de ClientApp en un símbolo del sistema e inicia el servidor de desarrollo de CRA:

cd ClientApp
npm start

Cuando inicias la aplicación ASP.NET Core, no se iniciará un servidor de CRA. En su lugar, se usa la instancia que inició manualmente. Esto te permite iniciar y reiniciar con mayor rapidez. Ya no tienes que esperar a que la aplicación de React se recompile de una vez a otra.

Configuración del middleware de proxy para SignalR

Para obtener más información, consulta http-proxy-middleware.

Recursos adicionales

La plantilla de proyecto actualizada de React ofrece un práctico punto de partida para las aplicaciones ASP.NET Core que usan React y las convenciones create-react-app (CRA) para implementar una completa interfaz de usuario (UI) en el lado cliente.

La plantilla es equivalente a crear un proyecto de ASP.NET Core para que funcione como un back-end de API y un proyecto de React de CRA estándar para que funcione como interfaz de usuario, pero con la comodidad de hospedar ambos en un único proyecto de aplicación que se puede compilar y publicar como una sola unidad.

La plantilla de proyecto de React no está pensada para representación del lado servidor (SSR). Para SSR con React y Node.js, considera Next.js o Razzle.

Creación de una nueva aplicación

En un símbolo del sistema, crea un nuevo proyecto con el comando dotnet new react en un directorio vacío. Por ejemplo, los siguientes comandos crean la aplicación en un directorio my-new-app y cambian a ese directorio:

dotnet new react -o my-new-app
cd my-new-app

Ejecuta la aplicación desde Visual Studio o la CLI de .NET:

Abre el archivo .csproj generado y, desde ahí, ejecuta la aplicación de la manera habitual.

El proceso de compilación restaura las dependencias npm en la primera ejecución, lo que puede tardar varios minutos. Las compilaciones posteriores son mucho más rápidas.

La plantilla de proyecto crea una aplicación ASP.NET Core y una aplicación de React. El uso previsto de la aplicación ASP.NET Core es el acceso a los datos, la autorización y otros problemas relativos al servidor. La aplicación de React, que reside en el subdirectorio ClientApp, está diseñada para utilizarse para su uso con todos los problemas de la interfaz de usuario.

Adición de páginas, imágenes, estilos, módulos, etc.

El directorio ClientApp es una aplicación de React de CRA estándar. Para obtener más información, consulta la documentación oficial de CRA.

Existe pequeñas diferencias entre la aplicación de React creada mediante este plantilla y la creada mediante CRA propiamente dicho; sin embargo, las funcionalidades de la aplicación permanecen sin cambios. La aplicación creada con la plantilla contiene un diseño basado en arranque y un ejemplo de enrutamiento básico.

Instalar paquetes de npm

Para instalar paquetes de npm de otro fabricante, usa un símbolo del sistema en el subdirectorio ClientApp. Por ejemplo:

cd ClientApp
npm install --save <package_name>

Publicación e implementación

En el desarrollo, la aplicación se ejecuta en modo optimizado para comodidad del desarrollador. Por ejemplo, agrupaciones de JavaScript contienen asignaciones de origen (de modo que durante la depuración, puede ver el código fuente original). La aplicación inspecciona los cambios en los archivos de JavaScript, HTML y CSS en el disco y, automáticamente, realiza una nueva compilación y recarga cuando observa que esos archivos han cambiado.

En producción, usa una versión de la aplicación que esté optimizada para el rendimiento. Esto se configura para que tenga lugar automáticamente. Al publicar, la configuración de compilación emite una compilación transpilada reducida del código de cliente. A diferencia de la compilación de desarrollo, la compilación de producción no requiere la instalación de Node.js en el servidor.

Puedes usar métodos de implementación y hospedaje de ASP.NET Core estándar.

Ejecución del servidor de CRA de forma independiente

El proyecto está configurado para iniciar su propia instancia del servidor de desarrollo de CRA en segundo plano cuando la aplicación ASP.NET Core se inicia en modo de desarrollo. Esto resulta útil porque significa que no tienes que ejecutar manualmente un servidor independiente.

Sin embargo, esta configuración predeterminada tiene un inconveniente. Cada vez que modificas el código de C# y la aplicación ASP.NET Core debe reiniciarse, el servidor de CRA se reinicia. Se necesitan unos segundos para iniciar la copia de seguridad. Si realizas modificaciones frecuentes en el código de C# y no quieres esperar a que se reinicie el servidor de CRA, ejecuta el servidor de CRA externamente, con independencia del proceso de ASP.NET Core. Para ello:

  1. Agrega un archivo .env al subdirectorio ClientApp con el siguiente valor:

    BROWSER=none

    Esto evita que el explorador web se abra al iniciar el servidor de CRA de forma externa.

  2. En un símbolo del sistema, cambie al subdirectorio ClientApp e inicie el servidor de desarrollo de CRA:

    cd ClientApp
npm start

  3. Modifique la aplicación ASP.NET Core para usar la instancia del servidor de CRA externo en lugar de iniciar una de las suyas. En la clase Startup, reemplace la invocación de spa.UseReactDevelopmentServer por lo siguiente:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

Cuando inicie la aplicación ASP.NET Core, no se iniciará un servidor de CRA. En su lugar, se usa la instancia que inició manualmente. Esto te permite iniciar y reiniciar con mayor rapidez. Ya no tiene que esperar a que la aplicación de React se recompile de una vez a otra.

Importante

La "representación del lado servidor" no es una característica admitida de esta plantilla. El objetivo de esta plantilla es cumplir la paridad con "create-react-app". Así, los escenarios y las características no incluidos en un proyecto "create-react-app" (como SSR) no se admiten y se dejan como un ejercicio para el usuario.

Configuración del middleware de proxy para SignalR

Para obtener más información, consulta http-proxy-middleware.

Recursos adicionales