Compartir a través de

Configuración del laboratorio para React en Windows

  • Artículo

Importante

Azure Lab Services se retirará el 28 de junio de 2027. Para más información, consulte la guía de retirada.

Nota:

En este artículo se hace referencia a las características disponibles en planes de laboratorio, que reemplazaron las cuentas de laboratorio.

React es una popular biblioteca de JavaScript para crear interfaces de usuario (UI). React es una manera declarativa de crear componentes reutilizables para el sitio web. Hay muchas otras bibliotecas populares para el desarrollo front-end basado en JavaScript. Usaremos algunas de estas bibliotecas durante la creación de nuestro laboratorio. Redux es una biblioteca que proporciona un contenedor de estado predecible para las aplicaciones JavaScript y que a menudo se usa en conjunto con React. JSX es una extensión de sintaxis de biblioteca para JavaScript que a menudo se usa con React para describir el aspecto de la interfaz de usuario. NodeJS es una manera cómoda de ejecutar un servidor web para la aplicación React.

En este artículo se muestra cómo instalar Visual Studio 2019 para el entorno de desarrollo, así como las herramientas y bibliotecas necesarias para una clase de desarrollo web con React.

Configuración del laboratorio

Si quiere configurar este laboratorio, para empezar, necesita una suscripción a Azure y un plan de laboratorio. Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

Configuración del plan de laboratorio

Una vez que tenga una suscripción a Azure, puede crear un plan de laboratorio en Azure Lab Services. Para obtener más información sobre la creación de un plan de laboratorio, consulte el tutorial sobre cómo configurar un plan de laboratorio. También puede usar un plan de laboratorio existente.

Habilite la configuración del plan de laboratorio tal y como se describe en la tabla siguiente. Para obtener más información sobre cómo habilitar imágenes de Azure Marketplace, consulte Especificación de las imágenes de Azure Marketplace disponibles para los creadores de laboratorios.

Configuración de la cuenta de laboratorio Instrucciones
Imagen de Marketplace Habilite la imagen "Visual Studio 2019 Community (versión más reciente) en Windows Server 2019 (x64)".

Configuración del laboratorio

Para ver instrucciones sobre cómo crear un laboratorio, vea Tutorial: configuración de un laboratorio. Use la configuración siguiente al crear el laboratorio.

Configuración del laboratorio Valor
Tamaño de máquina virtual Mediano

Se recomienda probar las cargas de trabajo para ver si se necesita un mayor tamaño. Para obtener más información sobre cada tamaño, consulte Tamaño de máquina virtual.

Configuración de la máquina de plantilla

Los pasos de esta sección muestran cómo rellenar los siguientes datos para configurar la plantilla de máquina virtual:

  1. Instalación de herramientas de desarrollo.
  2. Instalación de extensiones del depurador para el explorador web.
  3. Actualización de la configuración del firewall.

Instalación de herramientas de desarrollo

La imagen "Visual Studio 2019 Community (versión más reciente) en Windows Server 2019 (x64)" ya tiene instalada la carga de trabajo de desarrollo de Node.js necesaria para Visual Studio 2019.

  1. Instale el explorador web que prefiera. La imagen ya tiene instalado Internet Explorer de manera predeterminada.
  2. Vaya al sitio web de Node.js y seleccione el botón Descargar. Puede usar la versión más reciente del servicio a largo plazo (LTS), la versión actual con las características más recientes o una versión anterior. La instalación de NodeJS también instalará el Administrador de paquetes de Node, que se usará para instalar React, Redux y JSX.
  3. Actualice Visual Studio 2019 a la versión más reciente, si es necesario.

Otros componentes necesarios para un sitio web basado en React se instalan mediante NPM en una aplicación específica. Para agregar paquetes NPM, consulte cómo administrar los paquetes NPM en Visual Studio.

Por ejemplo, si usa la ventana interactiva de Node.js en un proyecto, escriba los siguientes comandos para instalar las bibliotecas React, Redux y JSX:

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

Para crear la primera aplicación de Node.js con React en Visual Studio, consulte Tutorial: Crear una aplicación Node.js y React en Visual Studio.

Instalación de extensiones del depurador

Instale las extensiones React Developer Tools del explorador para que pueda inspeccionar los componentes de React y registrar la información de rendimiento.

Actualización de la configuración del firewall

De manera predeterminada, se bloqueará el tráfico entrante del servidor de Node.js. Si quiere acceder al sitio web de un alumno mientras está en ejecución, agregue una regla de firewall enlazada para permitir el tráfico. Consulte la propiedad Puerto de la aplicación del proyecto para ver qué puerto se usará durante la depuración. En el ejemplo siguiente se usa el cmdlet de PowerShell New-NetFirewallRule para permitir el acceso al puerto 1337.

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

Importante

Los formadores deben usar la plantilla de máquina virtual u otra máquina virtual de laboratorio para acceder al sitio web de un alumno.

Costos

Veamos un ejemplo de una posible estimación de costos para esta clase. Supongamos que tiene una clase de 25 alumnos. Cada alumno tiene 20 horas de clase programadas. Se asignan otras 10 horas de cuota para deberes o asignaciones fuera de las horas de clase programadas para cada alumno. El tamaño de la máquina virtual que elegimos es Mediana, que tiene 55 unidades de laboratorio.

  • 25 alumnos × (20 horas programadas + 10 horas de cuota) × 55 unidades de laboratorio × 0,01 USD por hora = 412,50 USD

Importante

La estimación de costos solo se utiliza con fines de ejemplo. Para obtener información sobre los precios actuales, consulte Precios de Azure Lab Services.

Pasos siguientes

Ahora se puede publicar la imagen de plantilla en el laboratorio. Para obtener más información, vea Publicación de la máquina virtual de plantilla.

Cuando configure el laboratorio, consulte los siguientes artículos: