1. Distribuir dados de forma racional entre o estado do aplicativo local e global
React é uma biblioteca responsável por gerenciar a interface do usuário com base no estado atual do aplicativo. A tarefa do programador é organizar o trabalho com o estado de forma racional. Alguns desenvolvedores preferem armazenar todos os dados à sua disposição no repositório Redux. Isso permite que eles organizem o processamento centralizado de todos os dados do aplicativo.
Mas ao pensar sobre quais dados devem ser incluídos no estado do aplicativo, vale a pena considerar se você precisa passar uma ação para o sistema de gerenciamento de estado apenas para, por exemplo, abrir um menu suspenso simples. O mesmo vale para, digamos, os dados inseridos pelo usuário no formulário de feedback. Todas as partes do aplicativo precisam saber o que está inserido nesse formulário? Quando se trata do que é inserido no formulário, esses dados geralmente são processados pelo aplicativo em um período de tempo bastante curto. Além disso, são utilizados apenas pelo componente responsável por exibir o formulário na tela.
Em vez de usar o armazenamento Redux para armazenar tudo o que o aplicativo está trabalhando, é melhor armazenar alguns dados no estado local dos componentes. Isso evitará complicar demais a arquitetura do aplicativo.
Ao pensar sobre onde exatamente você precisa armazenar alguns dados, vale a pena perguntar a si mesmo as seguintes perguntas :
- Você precisa de acesso a esses dados em diferentes partes do aplicativo?
- Você precisa ser capaz de formar algo novo com base nesses dados?
- Os diferentes componentes estão usando os mesmos dados?
- É importante para você poder restaurar o estado do aplicativo, que inclui esses dados, trazendo-o para a forma em que estava em um determinado momento (ou seja, você está interessado em depurar com a capacidade de mover-se ao longo do caminho de execução do código na direção oposta)?
- Você planeja armazenar esses dados em cache (ou seja, usar o estado existente se o aplicativo já o tiver, em vez de recarregá-lo)?
- Preciso manter esses dados ao recarregar componentes a quente (durante esse processo, o estado interno dos componentes pode ser perdido)?
Respostas positivas às perguntas acima indicam que os dados são de alguma forma usados fora do componente. Isso significa que faz sentido armazená-los no estado global do aplicativo. Deve-se notar, entretanto, que os componentes que usam o estado local são mais independentes e previsíveis.
2. Aprenda como testar aplicativos e equipar seus projetos com testes desde o início
Criar testes automatizados é muito importante. O fato é que, em um determinado ponto do trabalho em um projeto React, o teste manual dele levará muito tempo e recursos.
No início de um projeto, quando sua base de código ainda é relativamente pequena, é muito fácil decidir não escrever testes para ela. Se um aplicativo tiver de cinco a dez componentes, a criação de testes automatizados parece uma tarefa de rotina quase inútil. Mas se um projeto crescer para mais de 50 componentes e contiver muitos componentes de ordem superior, o teste manual pode levar um dia inteiro de trabalho. E mesmo com essa abordagem, podem permanecer nele erros que ninguém notará.
Além disso, escrever testes ajuda a melhorar a estrutura do seu código, dividindo-o em módulos. Isso o ajudará a encontrar erros mais rapidamente e proteger o projeto de falhas de produção. O objetivo do teste automatizado é que ele ajuda um projeto em crescimento a se desenvolver em um estágio em que o teste manual não é mais capaz de confirmar se o código está funcionando corretamente.
É verdade, se você não tem o hábito de criar testes, você, tendo um projeto bastante grande, não será capaz de escrevê-los imediatamente para ele. É por isso que você precisa começar a escrever testes desde o início. Se você não tiver certeza de onde começar a testar seu projeto, comece com os testes de integração . O que quero dizer é que o mais importante no teste é confirmar se seus componentes interagem corretamente entre si.
3. Aplicar ferramentas adicionais que ajudam a dimensionar o aplicativo
Normalmente, no início do processo de desenvolvimento de projetos React, não há necessidade de utilizar muitas ferramentas auxiliares. Mas, como estamos falando de projetos que podem se tornar muito grandes, é importante notar que ferramentas especializadas irão facilitar muito o trabalho neles. Aqui está uma descrição de alguns deles:
- Usar Prettier e ESLint ajuda os programadores em uma equipe a escrever código consistente. Essas ferramentas podem ajudar a reduzir a sintaxe e outros erros em seu código. O uso de bibliotecas auxiliares como React Router , date-fns , react -hook-form também beneficia os projetos .
- TypeScript Redux , , . , .
- - , React , .
- O uso do Bit permite organizar o trabalho com componentes, apresentados como blocos de construção independentes do aplicativo. Isso significa que você pode testar e renderizar componentes isoladamente. Essa abordagem para trabalhar com componentes os torna mais fáceis de manter e reutilizar.
- Em vez de create- react -app, você pode usar as ferramentas Next.js correspondentes para criar novos aplicativos React .
Essas ferramentas o ajudarão a manter uma grande base de código do aplicativo React. Porém, ao escolher as ferramentas, lembre-se que cada uma delas aumenta o nível de complexidade do projeto. Antes de incluir qualquer coisa em seu projeto, estude tudo bem e tome uma decisão informada.
4. Preste atenção à estrutura do arquivo do projeto
Uma das melhores dicas que descobri para desenvolver aplicativos React escalonáveis é que organizar e nomear arquivos de projeto corretamente pode ajudar a acelerar as coisas. Alguns desenvolvedores costumam
componentsusar o arquivo principal nas pastas armazenadas no diretório index.js.
Os arquivos de vários componentes têm o mesmo nome.
Esta abordagem para organizar um projeto parece ser bastante razoável, pois ao importar um componente em algum arquivo, a instrução correspondente é bastante simples:
import Button from '../components/Button';
Mas e se você abrir os arquivos de tais componentes em um editor?
Em todos os lugares - apenas index.js
Será inconveniente navegar neles. Não é fácil determinar a qual componente cada um pertence
index.js. No entanto, se você renomear esses arquivos para corresponder aos nomes dos componentes, as instruções de importação parecerão menos atraentes:
import Button from '../components/Button/Button';
Como ficar nessa situação? Por exemplo, minha equipe chegou à seguinte solução: na pasta do componente existe um arquivo com um código cujo nome corresponde ao nome do componente, e ao lado está o
index.jsque exporta o componente.
Arquivo de código do componente e index.js exportando o componente
Também colocamos CSS e arquivos de teste de unidade no diretório do componente. Com essa abordagem, cada diretório de componente contém tudo o que é relevante para o componente correspondente.
Componente independente
5. Crie uma biblioteca de componentes
É melhor começar a construir uma biblioteca de componentes no início de seu projeto, em vez de esperar que ela cresça. Os componentes, no processo de trabalho neles, podem ser projetados como unidades autônomas adequadas para uso repetido. Você pode criar uma biblioteca de componentes usando o Bit, usando o recurso bit.dev ou implantando o sistema em casa.
6. Separe a lógica dos componentes deles mesmos usando ganchos
Conforme seu projeto cresce, você pode notar que a lógica de alguns componentes é usada repetidamente em diferentes lugares. Você pode usar ganchos proprietários para organizar o compartilhamento da lógica do componente.
Por exemplo, temos um aplicativo para calcular pontos em um jogo de basquete.
Aplicativo para pontuação em um jogo de basquete
Se você olhar o código para este aplicativo, vai aparecer nos arquivos
HomeTeam.jseAwayTeam.jsusar a mesma lógica para trabalhar com o medidor. Em tal situação, quando o mesmo código é usado para gerenciar a interface, você pode separar esse código do componente e colocá-lo em um arquivo separado.
Aqui , separei o código para armazenar o estado do contador e a lógica para aumentar o contador em um arquivo separado
util.js. Este arquivo é importado para componentes.
Os ganchos são, em essência, funções comuns que retornam algum valor. Com a ajuda deles, você pode definir o estilo do código que deve ser reutilizado em vários componentes.
Resultado
Sempre tenha em mente que desenvolver aplicativos React em grande escala é uma tarefa complexa que requer a tomada de decisões que levem em consideração os interesses dos usuários e desenvolvedores de tais aplicativos. A escolha das diretrizes que fazem sentido seguir ao trabalhar em cada projeto específico depende de quão boas são as diretrizes para quem usa o projeto e para quem está desenvolvendo.
Ao escolher as ferramentas e técnicas a serem usadas no desenvolvimento do projeto, vale a pena experimentar. Isso permitirá que você escolha exatamente o que beneficiará seu aplicativo React. Espero que as dicas que compartilhei com você hoje sejam úteis para você.
Quais ferramentas e técnicas de desenvolvimento você usa ao construir projetos React que precisam ser bem dimensionados?
