Compartir a través de

Configuración del laboratorio para React en Windows

Importante

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

Nota:

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

React es una biblioteca de JavaScript popular 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 aplicaciones de JavaScript y a menudo se usa para complementar 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 y las herramientas y bibliotecas necesarias para una clase de desarrollo web de 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 de 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 cómo crear un nuevo 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 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 laboratorio.

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 obtener instrucciones sobre cómo crear un laboratorio, consulte 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 Medio

Se recomienda probar las cargas de trabajo para ver si se necesita un mayor tamaño. Para más información sobre cada tamaño, consulte Ajuste de 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. Instale extensiones del depurador para su navegador 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 desarrolloNode.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 a Node.js sitio web 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 de NPM, consulte Administración de los paquetes de NPM en Visual Studio.

Por ejemplo, si usa la ventana interactiva deNode.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 su primera Node.js con la aplicación React en Visual Studio, consulte Tutorial: Creación de una aplicación de 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 el sitio web está ejecutándose, agregue una regla entrante de firewall para permitir el tráfico. Examine la propiedad del proyecto Application Port 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.

Pasos siguientes

Ahora se puede publicar la imagen de plantilla en el laboratorio. Para más información, consulte Publicar la VM de plantilla.

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

  • Last updated on