Configurar um laboratório para o React no Linux

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çõ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.

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:

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

Instalar as ferramentas de Desenvolvimento

1. Instale o navegador da Web preferencial.

2. Instale o Node.js.

   sudo apt install nodejs
   

3. Instale o Gerenciador de pacotes de nó, que será usado para instalar o React, o Redux e o JSX.

   sudo apt install npm
   

4. Instalar o Visual Studio Code.

5. Instale a extensão das Ferramentas Nativas Reativas para o Visual Studio Code.

6. 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.

• Complemento do Edge para Ferramentas para Desenvolvedores do React
• Extensão do Chrome para Ferramentas para Desenvolvedores do React
• Complemento do FireFox para Ferramentas para Desenvolvedores do React

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

Custo

Vamos abordar uma estimativa de custo para essa aula. O tamanho da máquina virtual escolhida era Pequeno, ou seja, 20 unidades de laboratório.

Para uma classe de 25 alunos com 20 horas de tempo de aula agendada e 10 horas de cota para tarefas ou atividades, a estimativa de custo seria:

25 aluno × (20 horas programadas + 10 horas de cota) × 20 unidades de laboratório × US$ 0,01 por hora = US$ 150,00

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:

• Definir cota
• Definir um agendamento
• Adicionar usuários
• Links de registro por email para alunos