Configurar um laboratório para o React no Linux

Artigo
04/25/2022

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 Code no ambiente de desenvolvimento e descreve as ferramentas e bibliotecas necessárias para uma classe de desenvolvimento Web do React.

Configuração do laboratório

Para configurar este laboratório, você precisa de uma assinatura do Azure para começar. 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 você 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 do plano de laboratório	Instruções
Imagens do Marketplace	Habilite a imagem “Ubuntu Server 18.04 LTS”.

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	Pequeno

Recomendamos que você teste 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

Instale o navegador da Web preferencial.
Instale o Node.js.
```
sudo apt install nodejs
```
Instale o Gerenciador de pacotes de nó, que será usado para instalar o React, o Redux e o JSX.
```
sudo apt install npm
```
Instalar o Visual Studio Code.
Instale a extensão das Ferramentas Nativas Reativas para o Visual Studio Code.
Opcionalmente, instale extensões para desenvolvimento com o Redux e o JSX.

Criar o aplicativo React é uma maneira com suporte oficial para criar um aplicativo React que não requer nenhuma configuração posterior se estiver usando o NPM 5.2 e superior. Para obter mais instruções sobre como usar o Criar o aplicativo React, confira a documentação de introdução.

Outros componentes necessários para um site baseado no React são instalados usando o NPM em um aplicativo específico. Por exemplo, digite os seguintes comandos para instalar as bibliotecas Redux e JSX:

npm install react-redux
npm install react-jsx

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.

Para executar o aplicativo no modo de desenvolvimento, use o comando interno npm start. As URLs locais e de rede serão listadas na saída do comando. Para obter mais informações sobre como usar HTTPS em vez de HTTP, consulte Criar o aplicativo React usando HTTPS no desenvolvimento.

Atualizar as configurações de firewall

Os builds oficiais do Ubuntu têm iptables instalado e permitem todo o tráfego de entrada por padrão. No entanto, se você estiver usando uma VM que tem um firewall mais restritivo, adicione uma regra de entrada para permitir o tráfego para o servidor do NodeJS. O exemplo a seguir usa iptables para permitir o tráfego para a porta 3000.

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

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