Configurar o laboratório para React no Windows

Artigo
05/16/2021

Importante

O Azure Lab Services será desativado em 28 de junho de 2027. Para obter mais informações, confira o guia de desativação.

Observação

Este artigo referencia os recursos disponíveis nos planos de laboratório, que substituíram as contas de laboratório.

O React é uma biblioteca JavaScript popular para compilar IUs (interfaces de usuário). Ele consiste em uma forma declarativa de criar componentes reutilizáveis para sites. Há muitas outras bibliotecas populares para o desenvolvimento de front-ends com base em JavaScript. Usaremos algumas dessas bibliotecas ao criar nosso laboratório. O Redux é uma biblioteca que fornece um contêiner de estado previsível para os aplicativos JavaScript e é frequentemente usada como complemento do React. O JSX é uma extensão de sintaxe de biblioteca para JavaScript frequentemente usada com o React para descrever a aparência da IU. NodeJS é uma maneira conveniente de executar um servidor Web para o aplicativo React.

Este artigo mostra como instalar o Visual Studio 2019 no ambiente de desenvolvimento e descreve as ferramentas e bibliotecas necessárias para uma aula de desenvolvimento para a Web do React.

Configuração do laboratório

Para configurar o laboratório, você precisa de uma assinatura do Azure e de um plano de laboratório. Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.

Configurações do plano de laboratório

Assim que tiver uma assinatura do Azure, crie um plano de laboratório no Azure Lab Services. Para saber mais sobre como criar um plano de laboratório, confira o tutorial sobre como configurar um plano de laboratório. Você também pode usar um plano de laboratório existente.

Habilite as configurações do seu plano de laboratório conforme descrito na tabela a seguir. Para saber mais sobre como habilitar imagens do Azure Marketplace, consulte Especificar imagens do Azure Marketplace disponíveis para criadores de laboratórios.

Configuração da conta de laboratório	Instruções
Imagem do Marketplace	Habilite a imagem 'Visual Studio 2019 Community (latest release) on Windows Server 2019 (x64)'.

Configurações do laboratório

Para saber como criar um laboratório, confira Tutorial: configurar um laboratório. Use as seguintes configurações ao criar o laboratório.

Configurações de laboratório	Valor
Tamanho da Máquina Virtual	Médio

Recomenda-se testar as cargas de trabalho para verificar se um tamanho maior é necessário. Para obter mais informações sobre cada tamanho, consulte Tamanhos de VM.

Configuração de computador modelo

As etapas nesta seção mostram como concluir as seguintes ações para configurar a VM de modelo:

Instalar ferramentas de desenvolvimento.
Instalar extensões do depurador para o navegador da Web.
Atualizar as configurações do firewall.

Instalar as ferramentas de Desenvolvimento

A imagem “Visual Studio 2019 Community (latest release) on Windows Server 2019 (x64)” já tem a carga de trabalho de desenvolvimento Node.js necessária instalada para o Visual Studio 2019.

Instale o navegador da Web preferencial. A imagem tem o Internet Explorer instalado por padrão.
Navegue até o site Node.js e selecione o botão Download. É possível usar a versão do LTS (serviço de longo prazo) mais recente, a versão atual com os recursos mais recentes ou uma versão anterior. A instalação do NodeJS também instalará o Gerenciador de Pacotes do Nó, que será usado para instalar o React, Redux e JSX.
Atualize o Visual Studio 2019 para a versão mais recente, se necessário.

Outros componentes necessários para um site baseado no React são instalados usando o NPM em um aplicativo específico. Para adicionar os pacotes do NPM, consulte gerenciar os pacotes do NPM no Visual Studio.

Por exemplo, se estiver usando a Janela interativa do Node.js em um projeto, insira os seguintes comandos para instalar as bibliotecas React, Redux e JSX:

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

Para criar o primeiro Node.js com o aplicativo React no Visual Studio, consulte Tutorial: criar um aplicativo React e Node.js no Visual Studio.

Instalar as extensões de depurador

Instale as extensões de Ferramentas para Desenvolvedores do React no navegador para inspecionar os componentes do React e registrar as informações de desempenho.

Atualizar as configurações de firewall

Por padrão, o tráfego de entrada do servidor Node.js será bloqueado. Se deseja acessar o site de um aluno enquanto estiver em execução, adicione uma regra de firewall de entrada para permitir o tráfego. Observe a propriedade do projeto Porta do Aplicativo para ver qual porta será usada durante a depuração. O exemplo abaixo usa o cmdlet do PowerShell New-NetFirewallRule para permitir o acesso à porta 1337.

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

Importante

Os educadores devem usar a VM de modelo ou outra VM do laboratório para acessar o site do aluno.

Próximas etapas

A imagem de modelo agora pode ser publicada no laboratório. Para obter mais informações, confira Publicar a VM de modelo.

Ao configurar o laboratório, consulte os seguintes artigos:

Compartilhar via