Como eles fizeram isso? Como eles foram daqueles que não podem abrir relações públicas sem ajuda externa para aqueles a quem os outros procuram ajuda? O que fez as pessoas pedirem conselhos, dispostas a dar conselhos aos outros? Como os alunos se tornaram professores? Eu fiz essas perguntas a eles. Aqui está o que eles responderam.
1. Use ESLint e TypeScript
JavaScript é uma linguagem de programação de tipo fraco. Usando essa linguagem, podemos resolver o mesmo problema de inúmeras maneiras. O JavaScript não possui mecanismos internos para nos proteger de escrever código de buggy ou código com baixo desempenho. Mas, felizmente para nós, podemos melhorar a situação recorrendo a duas ferramentas para análise de código estático. Estes são TypeScript e ESLint.
Usando o ESLint para análise de código estático, podemos identificar problemas antes que eles atinjam a produção. Podemos verificar o código em relação aos nossos padrões. Isso melhora a capacidade de manutenção da base de código.
Por exemplo, você pode instalar o plugin ESLint
eslint-plugin-react-hooks... Este plug-in notará o problema no código a seguir, que parece completamente normal, e nos informará que estamos violando uma das regras de uso de ganchos.
// ,
if (userName !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', userName);
});
}
O TypeScript permite que você use um sistema de tipos estático para detectar erros relacionados. Ao usar o TypeScript, você pode usar a poderosa dica de ferramenta IntelliSense que torna o trabalho com vários componentes e bibliotecas mais rápido e fácil. As dicas de ferramentas que aparecem quando você escreve seu código fornecem informações sobre os mecanismos internos de componentes e bibliotecas. Isso acelera a refatoração e incentiva convenções de codificação como genéricos.
Alguém que é bom em TypeScript não apenas se torna um programador JavaScript melhor, mas acaba por começar a escrever um código React melhor.
2. Familiarize-se com os ganchos do React
Os React Hooks literalmente dominaram o mundo do desenvolvimento do React desde sua introdução em fevereiro de 2019. Embora a equipe do React diga que você não deve refatorar o código antigo traduzindo-o em ganchos, os ganchos estão literalmente em todo lugar nos dias de hoje.
Se você deseja avançar no domínio do desenvolvimento do React, o melhor momento para aprender é aprender os ganchos em profundidade, para que você possa entendê-los completamente.
Você precisa de algum tipo de efeito colateral? Nesse caso, o gancho
useEffecté seu melhor amigo. Precisa monitorar o estado de um componente e renderizá-lo novamente quando o estado mudar? Dê uma olhadauseState. Precisa armazenar e atualizar alguns valores entre renderizações, mas quando esses valores mudam, não são renderizados? Ou talvez você precise saber sobre a altura ou largura dos elementos DOM? Então seu amigo é esse useRef.
Por exemplo, vejamos o caso de uso mais simples
useEffect. Suponha que desejamos organizar a atualização do título da página (na forma de um efeito colateral) quando um botão for clicado. Você pode tentar resolver esse problema da seguinte maneira:
useEffect(() => {
document.title = `You clicked ${count} times`;
}); //
Esse gancho é fácil de otimizar, tornando-o não executado em todas as renderizações, mas somente quando a variável é alterada
count. Isso é feito incluindo as countdependências na matriz:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // count
Você deve se sentir confortável usando os ganchos mais comuns e criando seus próprios ganchos. Você também deve ser bem versado no uso racional de ganchos. Por exemplo, saber quando usar ganchos parece
useEffectresultar em nova renderização e quando não.
3. Não otimize seu código cedo demais
A conversa sobre ganchos nos leva ao tópico da otimização prematura. Muitas vezes, vi aspirantes a desenvolvedores do React irem ao osso para tornar seu código o mais rápido possível. O código de reação é geralmente otimizado usando ganchos
useMemoe useCallback. Mas seu uso nem sempre é justificado.
Vamos dar uma olhada em um componente simples que usa uma variedade de informações de confeitaria
props. O componente filtra a matriz e exibe uma lista de nomes de chocolates (suas propriedades typesão iguais a um valor de sequência chocolate).
Alguns desenvolvedores podem ter um desejo irresistível de escrever código semelhante ao mostrado abaixo. Eles podem pensar: "Só atualizarei a lista de chocolates quando a lista geral de confeitos mudar." A implementação dessa idéia resultará em código sobrecarregado com construções auxiliares difíceis de ler.
const Chocolate = (props) => {
const chocolates = useMemo(
() => props.candies.filter((candy) => candy.type === "chocolate"),
[props.candies]
);
return (
<>
{chocolates.map((item) => (
<p>{item.name}</p>
))}
</>
);
};
Em vez de criar um componente como esse, sugiro escrever código simples e limpo. Em casos como este, não há razão para usar
useMemo. Ganchos useMemoou useCallbackdevem ser usados apenas para memorizar os resultados de operações complexas que criam uma grande carga no sistema.
Eu recomendo adiar o início do trabalho de otimização até obter uma medida de desempenho do aplicativo que indique claramente um problema.
Você não deve usá-lo em qualquer lugar
useCallbacke useMemoapenas porque você leu recentemente sobre eles em algum lugar. Não otimize tudo. É melhor esperar o problema aparecer e resolvê-lo. Não resolva problemas inexistentes.
4. Saiba quando criar novos componentes
Eu já vi muitos programadores aspirantes do React implementarem a lógica de negócios de um projeto em componentes que devem desempenhar um papel puramente de apresentação. Para tornar seu código o mais reutilizável possível, é importante criar componentes o mais fácil e conveniente possível para serem reutilizados.
Para conseguir isso, você precisa se esforçar para manter a separação entre os componentes da apresentação e os componentes que implementam algum tipo de lógica. Anteriormente, uma técnica comum era dividir componentes em "contêineres" e, de fato, "componentes". Mas essa abordagem gradualmente perdeu sua relevância.
Vamos dar uma olhada em um componente que carrega uma lista de itens de algum lugar e os exibe na página. Observe que essas duas tarefas são implementadas no mesmo componente.
const ListItems = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Pode ser tentador seguir a rota "contêiner". Após essa aspiração, vamos criar dois componentes:
const ListContainer = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return <List items={items} />;
};
const List = (props) => {
return (
<>
{props.items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Mas em tal situação, você deve agir de maneira diferente. Ou seja, você precisa abstrair as partes do componente que desempenham uma função puramente de apresentação. O resultado serão dois componentes - um componente
List(lista) e um componente Item(elemento):
const List = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<Item item={item} />
))}
</>
);
};
const Item = ({ item }) => {
return (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
);
};
5. Preste atenção especial ao teste
O nível de proficiência em tecnologias de teste é o que separa os juniores dos idosos. Se você não estiver familiarizado com o teste de aplicativos React, poderá encontrar e estudar vários materiais sobre ele.
Talvez você tenha escrito alguns testes de unidade em algum momento, mas sua experiência não é suficiente para criar testes de integração que abrangem todo o aplicativo? Isso não deve incomodá-lo, pois, novamente, existem inúmeros recursos para ajudá-lo a preencher lacunas de conhecimento e experiência.
Por exemplo, aqui está o meu artigo sobre o ciclo completo de teste de um aplicativo de pilha cheia baseado no React.
6. Distinga entre situações em que você deve usar o estado local e global
Aqui abordaremos o tópico de gerenciamento do estado do aplicativo no React. Existem toneladas de tecnologias para resolver esse problema. Por exemplo, isso é redux, mobx, recoil, API
contexte muito mais. Nem sequer é fácil listá-los.
Mas, independentemente da tecnologia de gerenciamento de estado que você escolher, geralmente vejo os alunos do React ficarem confusos ao decidir se devem usar o estado global ou local. Infelizmente, não existem regras claras para tomar essas decisões sem ambiguidade. Mas algumas regras sobre esse assunto ainda podem ser formuladas. Ou seja, para decidir se deseja usar o estado global ou local para armazenar alguns dados, responda às seguintes perguntas:
- Precisamos de algum componente não diretamente relacionado ao nosso componente para poder trabalhar com seus dados? Por exemplo, o nome do usuário pode aparecer na barra de navegação e na tela de boas-vindas.
- Os dados devem persistir ao navegar entre as páginas do aplicativo?
- Muitos componentes estão usando os mesmos dados?
Se essas perguntas puderem ser respondidas positivamente, pode valer a pena aproveitar o estado global. Mas, direi imediatamente, você não deve armazenar informações sobre o que está acontecendo com o menu no estado global. Ao decidir onde armazenar alguns dados, tente especular sobre quais dados são usados em diferentes locais do aplicativo e quais dados podem ser armazenados apenas dentro dos componentes.
Resultado
Agora você sabe quais caminhos devem ser seguidos para crescer profissionalmente no campo do desenvolvimento do React.
Quando penso no código que escrevi quando eu era React Junior, uma coisa me vem à mente. Eu estava escrevendo códigos complicados e difíceis de entender. À medida que ganhei mais experiência, comecei a perceber como meu código se tornava mais simples. Quanto mais simples o código, melhor. Meu código agora é fácil de entender, e você pode entendê-lo até seis meses depois de ter sido gravado, quando acontece que um erro ocorreu e precisa ser resolvido.
Quais são os caminhos para o crescimento profissional dos programadores do React?
