Uso de la plantilla de proyecto de React con ASP.NET Core
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 usar SSR con React y Node.js, considere Next.js o Razzle.
Creación de una nueva aplicación
Si tiene ASP.NET Core 2.1 instalado, o versiones posteriores, no es necesario instalar la plantilla de proyecto de React.
En un símbolo del sistema, cree 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
Ejecute la aplicación desde Visual Studio o la CLI de .NET Core:
Abra el archivo .csproj generado y, desde ahí, ejecute 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 más información, consulte 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, use 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, use 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.
Puede 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 tiene que ejecutar manualmente un servidor independiente.
Sin embargo, esta configuración predeterminada tiene un inconveniente. Cada vez que modifica 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. Sin realiza frecuentes modificaciones en el código de C# y no quiere esperar a que se reinicie el servidor de CRA, ejecute el servidor de CRA externamente, con independencia del proceso de ASP.NET Core. Para ello:
Agregue un archivo .env al subdirectorio ClientApp con el siguiente valor:
BROWSER=noneEsto evita que el explorador web se abra al iniciar el servidor de CRA de forma externa.
En un símbolo del sistema, cambie al subdirectorio ClientApp e inicie el servidor de desarrollo de CRA:
cd ClientApp npm startModifique 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.UseReactDevelopmentServerpor 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 le 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.