Configurar o laboratório para o React no Windows

Artigo
05/16/2021

Importante

O Azure Lab Services será descontinuado a 28 de junho de 2027. Para obter mais informações, consulte o guia de aposentadoria.

Nota

Este artigo faz referência a recursos disponíveis em planos de laboratório, que substituíram as contas de laboratório.

O React é uma biblioteca JavaScript popular para a construção de interfaces de usuário (UI). O React é uma forma declarativa de criar componentes reutilizáveis para o seu website. Existem muitas outras bibliotecas populares para desenvolvimento front-end baseado em JavaScript. Usaremos algumas dessas bibliotecas ao criar nosso laboratório. Redux é uma biblioteca que fornece contêiner de estado previsível para aplicativos JavaScript e é frequentemente usado em complemento com o React. JSX é uma extensão de sintaxe de biblioteca para JavaScript frequentemente usada com o React para descrever a aparência da interface do usuário. NodeJS é uma maneira conveniente de executar um servidor web para seu aplicativo React.

Este artigo mostrará como instalar o Visual Studio 2019 para seu ambiente de desenvolvimento e as ferramentas e bibliotecas necessárias para uma classe de desenvolvimento da Web React.

Configuração de laboratório

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

Configurações do plano de laboratório

Depois de obter a assinatura do Azure, você pode criar um novo plano de laboratório nos Serviços de Laboratório do Azure. Para obter mais informações sobre como criar um novo plano de laboratório, consulte 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 plano de laboratório conforme descrito na tabela a seguir. Para obter mais informações sobre como habilitar imagens do Azure Marketplace, consulte Especificar as imagens do Azure Marketplace disponíveis para criadores de laboratório.

Configuração da conta de laboratório	Instruções
Imagem do Marketplace	Habilite a imagem 'Comunidade do Visual Studio 2019 (versão mais recente) no Windows Server 2019 (x64)'.

Configurações de laboratório

Para obter instruções sobre como criar um laboratório, consulte Tutorial: Configurar um laboratório. Use as seguintes configurações ao criar o laboratório.

Configuração de laboratório	Value
Tamanho de Máquina Virtual	Medium

Recomendamos testar suas cargas de trabalho para ver se um tamanho maior é necessário. Para obter mais informações sobre cada tamanho, consulte Dimensionamento de VM.

Configuração da máquina de modelo

As etapas nesta seção mostram como concluir o seguinte para configurar a VM de modelo:

Instale ferramentas de desenvolvimento.
Instale extensões de depurador para o seu navegador da web.
Atualize as configurações do firewall.

Instalar ferramentas de desenvolvimento

A imagem 'Comunidade do Visual Studio 2019 (versão mais recente) no Windows Server 2019 (x64)' já tem a carga de trabalho de desenvolvimento de Node.js necessária instalada para o Visual Studio 2019.

Instale o seu navegador preferido. A imagem tem o Internet Explorer instalado por padrão.
Navegue até Node.js site e selecione o botão Download . Você pode usar a versão mais recente do serviço de longo prazo (LTS), a versão atual com os recursos mais recentes ou uma versão anterior. A instalação do NodeJS também instalará o Node Package Manager, que será usado para instalar o React, o Redux e o 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 pacotes NPM, consulte gerenciar seus pacotes NPM no Visual Studio.

Por exemplo, se estiver usando a Node.js Interactive Window 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 seu primeiro Node.js com o aplicativo React no Visual Studio, consulte Tutorial: Criar um aplicativo Node.js e React no Visual Studio.

Instalar extensões do depurador

Instale as extensões do React Developer Tools para seu navegador para que você possa inspecionar os componentes do React e registrar informações de desempenho.

Atualizar configurações de firewall

Por padrão, o tráfego de entrada para o servidor Node.js será bloqueado. Se você deseja acessar o site de um aluno enquanto ele está em execução, adicione uma regra de firewall de entrada para permitir o tráfego. Observe a propriedade do projeto Application Port para ver qual porta será usada durante a depuração. O exemplo abaixo usa o cmdlet New-NetFirewallRule PowerShell 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 de laboratório para acessar o site de um aluno.

Próximos passos

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

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

Partilhar via