Compartir a través de

Configuración del laboratorio para React en Linux

  • 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 Code para el entorno de desarrollo, las herramientas y las bibliotecas necesarias para una clase de desarrollo web con React.

Configuración del laboratorio

Para configurar este laboratorio, para empezar necesita una suscripción de Azure. 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 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 del plan de laboratorio Instrucciones
Imágenes de Marketplace Habilite la imagen de Ubuntu Server 18.04 LTS.

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 Pequeño

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

  1. Instale el explorador web que prefiera.

  2. Instale Node.js.

    sudo apt install nodejs

  3. Instale el Administrador de paquetes de Node, que se usará para instalar React, Redux y JSX.

    sudo apt install npm

  4. Instale Visual Studio Code.

  5. Instale la extensión Herramientas de React Native para Visual Studio Code.

  6. Opcionalmente, instale las extensiones para el desarrollo con Redux y JSX.

Create React App es una manera oficialmente compatible de crear una aplicación de React y no requiere ninguna configuración adicional si se usa npm 5.2 y versiones posteriores. Para recibir más instrucciones sobre cómo usar Crear React App, consulte la documentación de inicio.

Otros componentes necesarios para un sitio web basado en React se instalan mediante NPM en una aplicación específica. Por ejemplo, escriba los siguientes comandos para instalar las bibliotecas Redux y JSX:

npm install react-redux
npm install react-jsx

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.

Para ejecutar la aplicación en modo de desarrollo, use el comando integrado npm start. Las direcciones URL locales y de red se mostrarán en la salida del comando. Para más información sobre cómo usar HTTPS en lugar de HTTP, consulte Create React App: Uso de HTTPS en el desarrollo.

Actualización de la configuración del firewall

Las compilaciones oficiales de Ubuntu tienen recursos iptables instalados y permitirán todo el tráfico entrante de forma predeterminada. Sin embargo, si usa una máquina virtual que tenga un firewall más restrictivo, agregue una regla de entrada para permitir el tráfico al servidor NodeJS. En el ejemplo siguiente se usan iptables para permitir el tráfico al puerto 3000.

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

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. El tamaño de la máquina virtual que elegimos es Mediana, que tiene 20 unidades de laboratorio.

Para una clase de 25 alumnos con 20 horas de clase programadas y 10 horas de cuota para deberes o tareas, el costo estimado sería:

25 alumnos × (20 horas programadas + 10 horas de cuota) × 20 unidades de laboratorio × 0,01 USD por hora = 150,00 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: