Configurar laboratório para o React no Linux

Artigo
10/27/2023

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 mostra como instalar o Visual Studio Code para seu ambiente de desenvolvimento, as ferramentas e bibliotecas necessárias para uma classe de desenvolvimento da Web React.

Configuração de laboratório

Para configurar este laboratório, precisa de uma subscrição do Azure 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 ter uma 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 do plano de laboratório	Instruções
Imagens do Marketplace	Ative a imagem 'Ubuntu Server 18.04 LTS'.

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	Pequeno

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

Instale o seu navegador preferido.
Instalar o Node.js.
```
sudo apt install nodejs
```
Instale o Gerenciador de Pacotes de Nó, que será usado para instalar o React, Redux e JSX.
```
sudo apt install npm
```
Instalar o Visual Studio Code.
Instale a extensão Reative Native Tools para Visual Studio Code.
Opcionalmente, instale extensões para desenvolvimento com Redux e JSX.

Criar aplicativo React é uma maneira oficialmente suportada de criar um aplicativo React e não requer nenhuma configuração adicional se você estiver usando o npm 5.2 e superior. Para obter mais instruções sobre como usar o Create React App, consulte 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, insira os seguintes comandos para instalar as bibliotecas Redux e JSX:

npm install react-redux
npm install react-jsx

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.

Para executar o aplicativo no modo de desenvolvimento, use o npm start comando interno. As urls local 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 Create React App: Using HTTPS in Development.

Atualizar configurações de firewall

As compilações oficiais do Ubuntu têm iptables instalados e permitirão todo o tráfego de entrada por padrão. No entanto, se você estiver usando uma VM que tenha um firewall mais restritivo, adicione uma regra de entrada para permitir o tráfego para o servidor NodeJS. O exemplo abaixo 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 de laboratório para acessar o site de um aluno.

Custo

Vamos abordar um exemplo de estimativa de custo para esta classe. O tamanho da máquina virtual que escolhemos foi Small, que é de 20 unidades de laboratório.

Para uma turma de 25 alunos com 20 horas de aula programadas e 10 horas de cota para trabalhos de casa ou tarefas, a estimativa de custo seria:

25 alunos × (20 horas programadas + 10 horas de quota) × 20 Unidades de Laboratório × USD0.01 por hora = 150.00 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: