Configurar o laboratório para o React no Windows

  • Artigo

Nota

Este artigo faz referência aos recursos disponíveis nos 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 Valor
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:

  1. Instale ferramentas de desenvolvimento.
  2. Instale extensões de depurador para o seu navegador da web.
  3. 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 Node.js necessária instalada para o Visual Studio 2019.

  1. Instale o seu navegador preferido. A imagem tem o Internet Explorer instalado por padrão.
  2. Navegue até o site .js nó 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.
  3. 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 janela interativa 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 seu primeiro nó.js com o aplicativo React no Visual Studio, consulte Tutorial: Criar um nó.js e o aplicativo 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 .js nó 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.

Custo

Vamos abordar um exemplo de estimativa de custo para esta classe. Suponha que você tenha uma turma de 25 alunos. Cada aluno tem 20 horas de aula programadas. Outras 10 horas de cota para trabalhos de casa ou trabalhos fora do horário de aula programado são dadas a cada aluno. O tamanho da máquina virtual que escolhemos foi o Medium, que é de 55 unidades de laboratório.

  • 25 alunos × (20 horas programadas + 10 horas de quota) × 55 Unidades de Laboratório × USD0.01 por hora = 412.50 USD

Importante

A estimativa de custos é, por exemplo, apenas para fins de finalidade. Para obter informações sobre preços atuais, consulte Preços dos Serviços de Laboratório do Azure.

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: