Traduzido do 日本語 • Ver original Olá! Aqui é o Yoshida, engenheiro de web.
No dia 16 do mês passado, fiz uma apresentação em um evento de grande escala relacionado ao React chamado React.js meetup × React Native, onde 180 engenheiros se reuniram, como o melhor batedor do quadro LT.
Agora vou explicar em detalhes o anúncio "Introdução do React Hot Loader" que fiz naquela época.
O que é React Hot Loader?
O Browsersync tem sido comumente usado no desenvolvimento front-end tradicional. O Browsersync monitora as alterações dos arquivos e recarrega automaticamente o navegador para refletir essas alterações.
Mas o React Hot Loader leva essa conveniência um passo além.
O React Hot Loader é um poderoso módulo de carregamento que monitora alterações de arquivos e reflete instantaneamente alterações nos componentes do React sem necessidade de recarregar o navegador, preservando o estado.
Pode não estar claro que você quer refletir mudanças em um componente do React mantendo o estado, então confira o vídeo de demonstração abaixo.
É um aplicativo simples do React que simplesmente define o texto que você digita em uma caixa de texto para declarar e exibe abaixo dele.
Após digitar um caractere na caixa de texto do navegador à esquerda, modifique e salve o componente no editor à direita.
Você pode ver que as mudanças são refletidas imediatamente sem necessidade de recarregar o navegador. E a string sob a caixa de texto permanece, então a informação de estado é preservada.
Veja outra demonstração.
Agora, com o componente pai tendo dois componentes filhos, vamos tentar mudar os componentes de várias maneiras.
O estado é preservado, então mesmo que você exclua um componente filho e o restaure, ainda verá o que digitou na caixa de texto.
Dessa forma, o React Hot Loader é muito útil para modificar o processamento baseado em estados.
Isso porque, se você recarregar o navegador, o conteúdo do estado naturalmente desaparecerá, então primeiro você deve seguir os passos para configurá-lo como estado para testar as partes modificadas.
Se quiser corrigir e verificar com vários padrões, vai levar mais tempo.
Com o React Hot Loader, você não precisa fazer isso, então pode desenvolver mais rápido.
Apresenta o React Hot Loader
Vamos realmente apresentá-lo.
Como mencionado anteriormente, o React Hot Loader é apenas um módulo de carregamento. Portanto, presume-se que ele será carregado e usado com uma ferramenta de build como Webpack.
Este é um exemplo de combinação de gulp + Webpack + Browsersync.
Listei um projeto de exemplo para React Hot Loader no Git, então, por favor, clone essa fonte.
https://github.com/endam/react-hot-loader-sample
Sample1 e sample2 são as aplicações React usadas no vídeo de demonstração acima. A única diferença é o componente sob o diretório src, e as outras configurações são exatamente as mesmas.
Primeiro, vá direto para o diretório sample1 e instale o pacote com npm ou yarn.
React-hot-loader também é um dos pacotes, então instale-o também. Em seguida, adicione uma tarefa para monitoramento de arquivos + atualização automática no Gulp.
Como ponto, você precisa de 'webpack-dev-middleware' e 'webpack-hot-middleware' nas configurações de middleware do Browsersync.
Você também deve entregar webpack-dev-middleware e webpack-hot-middleware um pacote baseado em webpack.config.js.
A configuração publicPath do webpack-dev-middleware pode ser a mesma que a output.publicPath do webpack.config.js, então estamos nos referindo a esse caminho.
E é o webpack.config.js mais importante.
No Entry, além do JS, você precisa definir 'webpack/hot/dev-server' e 'webpack-hot-middleware/cliente'.
Não vamos esquecer de configurar os módulos do React Hot Loader para carregar módulos dentro dos módulos.
Outra coisa fácil de esquecer é a configuração dos plugins. Por favor, note que não funcionará corretamente a menos que você defina 'novo webpack. HotModuleReplacementPlugin()'.
Depois de configurar até aqui, tudo o que precisa fazer é movê-lo. Vamos iniciar a tarefa gulp em 'gulp watch' e verificar se o React Hot Loader está funcionando.
Edição Prática
Até agora, discutimos a configuração mais básica do React Hot Loader. No entanto, acho que essa configuração pode não ser suficiente para o desenvolvimento real em campo.
Os dois casos seguintes são os mais prováveis de ocorrer.
- Quero acomodar múltiplos pontos de entrada
- Quero rodar em um ambiente virtual como Docker ou Vagrant.
Aprenda a lidar com esses casos.
Acomodando Múltiplos Pontos de Entrada
Vou escrever uma forma um pouco especial de acomodar múltiplos pontos de entrada.
Dessa forma, você precisa definir 'webpack-dev-middleware' e 'webpack-hot-middleware' em um array para cada ponto de entrada. (Eu não esperava definir para cada ponto de entrada, então fiquei bastante viciado quando pesquisei.)
No entanto, se houver 2 ou 3 pontos de entrada, esse modo de escrever ainda é aceitável, mas se houver muitos pontos de entrada, será redundante demais.
Nesses casos, recomenda-se ter uma função que gere dinamicamente um objeto para a configuração de entrada, por exemplo:
Rodar em um ambiente virtual como Docker ou Vagrant
Para Docker
Ao usar o Docker para Mac/Windows, a configuração é simples.
Por exemplo, digamos que você tenha um container encaminhando da porta 3006 do host para a porta 3006 do convidado.
O Browsersync define o número de porta 3006 para o encaminhamento de portas do contêiner Docker.
Isso é tudo que você precisa configurar. Depois disso, execute a tarefa gulp do mesmo jeito no contêiner Docker e vá até o 'http://localhost:{número da porta encaminhada}' do navegador para conferir.
Para Vagrant (VirtualBox e Vmware)
Em vez do Vagrant, você quer criar um ambiente com uma máquina virtual do provedor VirtualBox ou Vmware. Nesse caso, você precisa configurar um proxy.
Primeiro, instale um novo pacote chamado http-proxy-middleware.
'npm install http-proxy-middleware -D' ou 'yarn add http-proxy-middleware -D'
Em seguida, mude as configurações de Browsersync na tarefa gulp.
Importe 'http-proxy-middleware' para configurar o proxy.
Mude a parte {Endereço IP do Sistema Operacional Convidado} na linha 'const proxy = prooxyMiddleware('/', {target: 'http://{Endereço IP do Sistema Operacional Convidado}');'.
Defina o objeto proxy gerado para o middleware do Browsersync.
Mais importante ainda, ative a opção de enquete no watchOption do webpack-dev-middleware para questionar.
Sem essa configuração, o VirtualBox não detectará alterações de arquivo.
O conteúdo da parte prática está resumido no Exemplo 3.
A configuração padrão do sample3 é baseada na suposição de um ambiente Docker, mas se você quiser rodá-la em uma máquina virtual como o VirtualBox, por favor, remova a parte comentada no gulpfile.babel.js e defina o endereço IP do sistema operacional convidado.
Conclusão
Acabei de introduzir o React Hot Loader por volta de fevereiro deste ano, e fiquei feliz por tê-lo introduzido porque facilitou o desenvolvimento.
React.js encontro × poucas pessoas sabiam sobre ele quando foi anunciado no encontro do React Native, então estou ansioso para vê-lo usado gradualmente em outras áreas no futuro.
Se você está usando o React no campo, por favor, experimente.
Tenha uma boa vida de desenvolvimento no React!