Práticas recomendadas de reação para melhorar seu jogo em 2022

O React continua sendo uma das bibliotecas mais populares para criar interfaces de usuário ao criar aplicativos da web. É amplamente utilizado por muitas empresas e tem uma comunidade ativa.

Como desenvolvedor React, entender como a biblioteca funciona não é a única coisa que você precisa para criar projetos fáceis de usar, facilmente escaláveis ​​e de fácil manutenção.

Também é necessário entender certas convenções que permitirão que você escreva um código React limpo. Isso não apenas ajudará você a atender melhor seus usuários, mas também tornará mais fácil para você e outros desenvolvedores que trabalham no projeto manter a base de código. Trabalhando em seu próximo projeto React? Aprender a escrever um código React limpo é um divisor de águas Comece aqui ️ Click to Tweet

Neste tutorial, começaremos falando sobre alguns dos desafios comuns que os desenvolvedores React enfrentam e, em seguida, mergulharemos em algumas das melhores práticas que você pode seguir para ajudá-lo a escrever o código React de maneira mais eficiente.

Vamos começar!

Desafios enfrentados pelos desenvolvedores do React

Nesta seção, discutiremos alguns dos principais desafios que os desenvolvedores React enfrentam durante e após a criação de aplicativos da web.

Todos os desafios que você verá nesta seção podem ser evitados seguindo as práticas recomendadas, que discutiremos em detalhes mais adiante.

Começaremos com o problema mais básico que afeta os iniciantes.

Pré-requisitos para reagir

Um dos maiores desafios enfrentados pelos desenvolvedores do React é entender como a biblioteca funciona, juntamente com os pré-requisitos para usá-la.

Antes de aprender React, você precisa saber algumas coisas. Como o React usa JSX, conhecer HTML e JavaScript é obrigatório. Claro, você também deve conhecer CSS ou uma estrutura CSS moderna para projetar seus aplicativos da web.

Em particular, existem conceitos básicos e funcionalidades do JavaScript que você deve conhecer antes de mergulhar no React. Alguns deles, que se enquadram principalmente no ES6, incluem:

• funções de seta
• Operador de descanso
• Operador de spread
• Módulos
• desestruturando
• métodos de matriz
• Literais de modelo
• Promessas
• variáveis let e const

Os tópicos de JavaScript listados acima ajudarão você a entender, como iniciante, como o React funciona.

Você também aprenderia sobre novos conceitos no React, como:

• Componentes
• JSXGenericName
• gerenciamento de estado
• Adereços
• Elementos de renderização
• Manipulação de eventos
• renderização condicional
• Listas e chaves
• Formulários e validação de formulários
• ganchos
• Estilo

Ter uma compreensão sólida dos conceitos do React e dos pré-requisitos para usar a biblioteca ajudará você a utilizar seus recursos com eficiência.

Mas não deixe que isso o sobrecarregue. Com prática e aprendizado constantes, você pode obter rapidamente uma boa compreensão de como usar o React para criar projetos incríveis. É semelhante a aprender uma nova linguagem de programação - leva apenas um pouco de tempo e prática para entender.

Gerenciamento de estado

A atualização do estado/valor de suas variáveis ​​no React funciona de maneira diferente de como você faria usando o JavaScript vanilla.

Em JavaScript, atualizar uma variável é tão simples quanto atribuir um novo valor a ela usando o operador igual a ( = ). Aqui está um exemplo:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

No código acima, criamos uma variável chamada x com valor inicial de 300 .

Usando o operador igual a, atribuímos um novo valor de 100 a ele. Isso foi escrito dentro de uma função updateX .

No React, atualizar o estado/valor de suas variáveis ​​funciona de maneira diferente. Veja como:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

Ao atualizar o estado de uma variável no React, você usa o gancho useState . Há três coisas a serem observadas ao usar este Gancho:

• O nome da variável
• Uma função para atualizar a variável
• O valor/estado inicial da variável

Em nosso exemplo, x é o nome da variável e setX é a função para atualizar o valor de x , enquanto o valor inicial ( 300 ) de x é passado como parâmetro para a função useState :

 const [x, setX] = useState(300)

Para atualizar o estado de x , usamos a função setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

Portanto, a função updateX chama a função setX , que define o valor de x como 100 .

Embora isso pareça funcionar perfeitamente para atualizar o estado de suas variáveis, aumenta a complexidade de seu código em projetos muito grandes. Ter muitos ganchos de estado torna o código muito difícil de manter e entender, especialmente à medida que seu projeto é dimensionado.

Outro problema com o uso do State Hook é que essas variáveis ​​criadas não são compartilhadas entre os diferentes componentes que compõem seu aplicativo. Você ainda teria que usar Props para passar os dados de uma variável para outra.

Felizmente para nós, existem bibliotecas construídas para lidar com o gerenciamento de estado de forma eficiente no React. Eles até permitem que você crie uma variável uma vez e use-a onde quiser em seu aplicativo React. Algumas dessas bibliotecas incluem Redux, Recoil e Zustand.

O problema de escolher uma biblioteca de terceiros para gerenciamento de estado é que você seria forçado a aprender novos conceitos estranhos ao que já aprendeu no React. O Redux, por exemplo, era conhecido por ter muitos códigos padronizados, o que dificultava a compreensão dos iniciantes (embora isso esteja sendo corrigido com o Redux Toolkit, que permite escrever menos código do que faria com o Redux).

Manutenibilidade e Escalabilidade

Como os requisitos do usuário de um produto continuam mudando, sempre há a necessidade de introduzir alterações no código que compõe o produto.

Muitas vezes é difícil dimensionar seu código quando esse código não é fácil para a equipe manter. Dificuldades como essas surgem ao seguir práticas ruins ao escrever seu código. Eles podem parecer funcionar perfeitamente no início, dando o resultado desejado, mas qualquer coisa que funcione “por enquanto” é ineficiente para o futuro e crescimento do seu projeto.

Na próxima seção, examinaremos algumas convenções que podem ajudar a melhorar a forma como você escreve seu código React. Isso também ajudará você a colaborar melhor ao trabalhar com uma equipe profissional.

Melhores práticas de reação

Nesta seção, falaremos sobre algumas das práticas recomendadas a serem seguidas ao escrever seu código React. Vamos mergulhar de cabeça.

1. Mantenha uma estrutura de pastas clara

As estruturas de pastas ajudam você e outros desenvolvedores a entender a disposição dos arquivos e recursos usados ​​em um projeto.

Com uma boa estrutura de pastas, é fácil navegar facilmente, economizando tempo e ajudando a evitar confusões. As estruturas de pastas diferem de acordo com as preferências de cada equipe, mas aqui estão algumas das estruturas de pastas comumente usadas no React.

Agrupar pastas por recursos ou rotas

Agrupar arquivos em sua pasta de acordo com suas rotas e recursos ajuda a manter tudo sobre um determinado recurso em um único espaço. Por exemplo, se você tiver um painel de usuário, poderá ter JavaScript, CSS e arquivos de teste relacionados ao painel em uma pasta.

Aqui está um exemplo para demonstrar isso:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

Como pode ser visto acima, cada recurso principal do aplicativo tem todos os seus arquivos e ativos armazenados na mesma pasta.

Agrupando Arquivos Semelhantes

Como alternativa, você pode agrupar arquivos semelhantes na mesma pasta. Você também pode ter pastas individuais para Hooks, componentes e assim por diante. Confira este exemplo:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

Você não precisa seguir estritamente essas estruturas de pastas ao codificar. Se você tiver uma maneira específica de ordenar seus arquivos, vá em frente. Contanto que você e outros desenvolvedores tenham uma compreensão clara da estrutura do arquivo, você está pronto para ir!

2. Instituir um Pedido de Importação Estruturado

À medida que seu aplicativo React continua a crescer, você deve fazer importações extras. A estrutura de suas importações ajuda muito a entender o que compõe seus componentes.

Como convenção, agrupar utilitários semelhantes parece funcionar bem. Por exemplo, você pode agrupar importações externas ou de terceiros separadamente das importações locais.

Dê uma olhada no seguinte exemplo:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

No código acima, primeiro agrupamos as bibliotecas de terceiros (são bibliotecas que tínhamos que instalar previamente).

Em seguida, importamos os arquivos que criamos localmente, como folhas de estilo, imagens e componentes.

Para simplificar e facilitar o entendimento, nosso exemplo não descreve uma base de código muito grande, mas lembre-se de que ser consistente com esse formato de importação ajudará você e outros desenvolvedores a entender melhor seu aplicativo React.

Você pode agrupar seus arquivos locais de acordo com os tipos de arquivo, se isso funcionar para você - ou seja, agrupar componentes, imagens, folhas de estilo, Hooks e assim por diante separadamente em suas importações locais.

Aqui está um exemplo:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. Cumpra as convenções de nomenclatura

As convenções de nomenclatura ajudam a melhorar a legibilidade do código. Isso não se aplica apenas aos nomes dos componentes, mas também aos nomes das variáveis, até os Hooks.

A documentação do React não oferece nenhum padrão oficial para nomear seus componentes. As convenções de nomenclatura mais usadas são camelCase e PascalCase.

PascalCase é usado principalmente para nomes de componentes:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

O componente acima é denominado StudentList , que é muito mais legível do que Studentlist ou studentlist .

Por outro lado, a convenção de nomenclatura camelCase é usada principalmente para nomear variáveis, Hooks, funções, arrays e assim por diante:

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. Use um Linter

Uma ferramenta linter ajuda a melhorar a qualidade do código. Uma das ferramentas linter mais populares para JavaScript e React é o ESlint. Mas como exatamente isso ajuda a melhorar a qualidade do código?

Uma ferramenta linter ajuda na consistência em uma base de código. Ao usar uma ferramenta como o ESLint, você pode definir as regras que deseja que todos os desenvolvedores que trabalham no projeto sigam. Essas regras podem incluir requisitos para usar aspas duplas em vez de aspas simples, chaves em funções de seta, uma convenção de nomenclatura específica e muito mais.

A ferramenta observa seu código e notifica quando uma regra é quebrada. A palavra-chave ou linha que quebra a regra geralmente seria sublinhada em vermelho.

Como cada desenvolvedor tem seu próprio estilo de codificação, as ferramentas linter podem ajudar na uniformidade do código.

As ferramentas Linter também podem nos ajudar a corrigir bugs facilmente. Podemos ver erros ortográficos, variáveis ​​que foram declaradas mas não utilizadas e outras funcionalidades semelhantes. Alguns desses bugs podem ser corrigidos automaticamente enquanto você codifica.

Ferramentas como o ESLint são incorporadas à maioria dos editores de código para que você obtenha as funcionalidades do linter em qualquer lugar. Você também pode configurá-lo para atender aos seus requisitos de codificação.

5. Empregar bibliotecas de trechos

O legal de usar um framework com comunidade ativa é a disponibilização de ferramentas sendo criadas para facilitar o desenvolvimento.

As bibliotecas de trechos podem tornar o desenvolvimento mais rápido, fornecendo código pré-criado que os desenvolvedores usam com frequência.

Um bom exemplo é a extensão ES7+ React/Redux/React-Native snippets, que possui muitos comandos úteis para gerar código pré-criado. Por exemplo, se você deseja criar um componente funcional do React sem digitar todo o código, tudo o que você precisa fazer usando a extensão é digitar rfce e pressionar Enter .

O comando acima irá gerar um componente funcional com um nome que corresponda ao nome do arquivo. Geramos o código abaixo usando a extensão ES7+ React/Redux/React-Native snippets:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Outra ferramenta de snippet útil é a extensão Tailwind CSS IntelliSense, que simplifica o processo de estilizar páginas da Web com Tailwind CSS. A extensão pode ajudá-lo com o preenchimento automático, sugerindo classes de utilitários, realce de sintaxe e funcionalidades de linting. Você pode até ver como são suas cores durante a codificação.

6. Combine CSS e JavaScript

Ao trabalhar em grandes projetos, usar diferentes arquivos de folha de estilo para cada componente pode tornar sua estrutura de arquivo volumosa e difícil de navegar.

Uma solução para esse problema é combinar seu código CSS e JSX. Você pode usar frameworks/bibliotecas como Tailwind CSS e Emotion para isso.

Veja como é o estilo com Tailwind CSS:

 <p className="font-bold mr-8">resource edge</p>

O código acima dá ao elemento de parágrafo uma fonte em negrito e adiciona alguma margem à direita. Podemos fazer isso usando as classes utilitárias do framework.

Veja como você estilizaria um elemento usando o Emotion:

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. Limite a Criação de Componentes

Um dos principais recursos do React é a reutilização de código. Você pode criar um componente e reutilizar sua lógica quantas vezes for possível sem reescrever essa lógica.

Com isso em mente, você deve sempre limitar o número de componentes que você cria. Não fazer isso sobrecarrega a estrutura do arquivo com arquivos desnecessários que não deveriam existir em primeiro lugar.

Usaremos um exemplo bem fácil para demonstrar isso:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

O componente acima mostra o nome de um usuário. Se criássemos um arquivo diferente para cada usuário, eventualmente teríamos um número excessivo de arquivos. (Claro, estamos usando as informações do usuário para manter as coisas simples. Em uma situação da vida real, você pode estar lidando com um tipo diferente de lógica.)

Para tornar nosso componente reutilizável, podemos fazer uso de Props. Veja como:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

Depois disso, podemos importar esse componente e usá-lo quantas vezes quisermos:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

Agora temos três instâncias diferentes do componente UserInfo provenientes da lógica criada em um arquivo em vez de ter três arquivos separados para cada usuário.

8. Implementar carregamento preguiçoso

O carregamento lento é muito útil à medida que seu aplicativo React cresce. Quando você tem uma grande base de código, o tempo de carregamento de suas páginas da Web diminui. Isso ocorre porque todo o aplicativo deve ser carregado todas as vezes para cada usuário.

“Carregamento lento” é um termo usado para várias implementações. Aqui, nós o associamos com JavaScript e React, mas você também pode implementar carregamento lento em imagens e vídeos.

Por padrão, o React agrupa e implanta todo o aplicativo. Mas podemos mudar esse comportamento usando carregamento lento, também conhecido como divisão de código.

Basicamente, você pode limitar qual seção do seu aplicativo é carregada em um determinado ponto. Isso é feito dividindo seus pacotes e carregando apenas aqueles relevantes para os requisitos do usuário. Por exemplo, primeiro você pode carregar apenas a lógica necessária para o login do usuário e, em seguida, carregar a lógica para o painel do usuário somente depois que ele fizer login com êxito.

9. Empregar ganchos reutilizáveis

Hooks no React permitem que você aproveite algumas das funcionalidades adicionais do React, como interagir com o estado do seu componente e executar efeitos posteriores em relação a certas mudanças de estado em seu componente. Podemos fazer tudo isso sem escrever componentes de classe.

Também podemos tornar os Hooks reutilizáveis ​​para que não tenhamos que redigitar a lógica em cada arquivo usado. Fazemos isso criando Hooks personalizados que podem ser importados em qualquer lugar do aplicativo.

No exemplo abaixo, criaremos um Hook para buscar dados de APIs externas:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

Criamos um Hook para buscar dados das APIs acima. Agora ele pode ser importado para qualquer componente. Isso nos poupa do estresse de digitar toda aquela lógica em cada componente onde temos que buscar dados externos.

O tipo de Hooks personalizados que podemos criar no React é ilimitado, então cabe a você decidir como usá-los. Apenas lembre-se de que, se for uma funcionalidade que precisa ser repetida em diferentes componentes, você definitivamente deve torná-la reutilizável.

10. Registrar e gerenciar erros

Existem diferentes maneiras de lidar com erros no React, como usar limites de erro, blocos try e catch ou usar bibliotecas externas como react-error-boundary .

Os limites de erro incorporados que foram introduzidos no React 16 eram uma funcionalidade para componentes de classe, então não vamos discuti-los porque é aconselhável que você use componentes funcionais em vez de componentes de classe.

Por outro lado, usar um bloco try and catch funciona apenas para código imperativo, mas não para código declarativo. Isso significa que não é uma boa opção ao trabalhar com JSX.

Nossa melhor recomendação seria usar uma biblioteca como react-error-boundary. Essa biblioteca fornece funcionalidades que podem ser agrupadas em seus componentes, o que o ajudará a detectar erros enquanto seu aplicativo React está sendo renderizado.

11. Monitore e teste seu código

Testar seu código durante o desenvolvimento ajuda a escrever um código sustentável. Infelizmente, isso é algo que muitos desenvolvedores negligenciam.

Embora muitos possam argumentar que o teste não é um grande problema ao criar seu aplicativo da web, ele traz inúmeras vantagens. Aqui estão apenas alguns:

• O teste ajuda a detectar erros e bugs.
• A detecção de bugs melhora a qualidade do código.
• Os testes de unidade podem ser documentados para coleta de dados e referência futura.
• A detecção precoce de bugs economiza o custo de pagar aos desenvolvedores para apagar o incêndio que o bug pode causar se não for verificado.
• Aplicativos e sites sem erros ganham confiança e lealdade de seu público, o que leva a um maior crescimento.

Você pode usar ferramentas como Jest ou React Testing Library para testar seu código. Existem muitas ferramentas de teste que você pode escolher - tudo se resume à que funciona melhor para você.

Você também pode testar seus aplicativos React à medida que os cria, executando-os em seu navegador. Você normalmente obteria qualquer erro detectado exibido na tela. Isso é semelhante ao desenvolvimento de sites WordPress usando DevKinsta — uma ferramenta que permite projetar, desenvolver e implantar sites WordPress em sua máquina local.

12. Faça uso de componentes funcionais

O uso de componentes funcionais no React traz muitas vantagens: você escreve menos código, é mais fácil de ler e a versão beta da documentação oficial do React está sendo reescrita usando componentes funcionais (Hooks), então você definitivamente deve se acostumar a usá-los .

Com componentes funcionais, você não precisa se preocupar em usar this ou usar classes. Você também pode gerenciar o estado do seu componente facilmente escrevendo menos código graças aos Hooks.

A maioria dos recursos atualizados que você encontraria no React faz uso de componentes funcionais, tornando mais fácil entender e seguir guias e recursos úteis criados pela comunidade quando você se depara com problemas.

13. Mantenha-se atualizado com as alterações de versão do React

Com o passar do tempo, novas funcionalidades serão introduzidas e algumas antigas serão modificadas. A melhor maneira de acompanhar isso é assistir a documentação oficial.

Você também pode participar das comunidades do React nas mídias sociais para obter informações sobre as mudanças quando elas acontecerem.

Manter-se atualizado com a versão atual do React ajudará você a determinar quando otimizar ou fazer alterações em sua base de código para obter o melhor desempenho.

Também existem bibliotecas externas criadas em torno do React com as quais você também deve estar atualizado - como o React Router, que é usado para roteamento no React. Saber quais alterações essas bibliotecas fazem pode ajudá-lo a fazer alterações importantes e relevantes em seu aplicativo e facilitar as coisas para todos que trabalham no projeto.

Além disso, algumas funcionalidades podem ficar obsoletas e certas palavras-chave podem ser alteradas quando novas versões são lançadas. Para estar no lado seguro, você deve sempre ler a documentação e os guias quando essas alterações forem feitas.

14. Use um provedor de hospedagem rápido e seguro

Se quiser tornar seu aplicativo da web acessível a todos depois de criá-lo, você terá que hospedá-lo. É importante que você use um provedor de hospedagem rápido e seguro.

Hospedar seu site oferece acesso a diferentes ferramentas que facilitam o dimensionamento e o gerenciamento de seu site. O servidor onde seu site está hospedado permite que os arquivos em sua máquina local sejam armazenados de forma segura no servidor. O benefício geral de hospedar seu site é que outras pessoas podem ver as coisas incríveis que você criou.

Há uma variedade de plataformas que fornecem serviços de hospedagem gratuitos para desenvolvedores como Firebase, Vercel, Netlify, GitHub Pages ou serviços pagos como Azure, AWS, GoDaddy, Bluehost e assim por diante.

Você também pode usar a plataforma de hospedagem de aplicativos da Kinsta. Tudo o que você precisa fazer é conectar um repositório GitHub, escolher entre os 25 datacenters posicionados globalmente da Kinsta e pronto. Você receberá acesso a configuração rápida, suporte 24 horas por dia, 7 dias por semana, segurança de ponta, domínios personalizados, relatórios avançados e ferramentas de monitoramento e muito mais.

Resumo

Aprender a usar o React não é tudo o que é necessário para criar excelentes aplicativos da web. Como em qualquer outra estrutura como Angular, Vue e assim por diante, existem práticas recomendadas que você deve seguir para ajudá-lo a criar produtos eficientes.

Seguir essas convenções do React não apenas ajuda seu aplicativo, mas também traz vantagens para você como desenvolvedor de front-end - você aprende a escrever código eficiente, escalável e sustentável e se destaca como profissional em seu campo. Quer intensificar seu jogo de codificação React? Tudo o que você precisa saber está neste guia Click to Tweet

Portanto, ao criar seu próximo aplicativo da Web com o React, lembre-se dessas práticas recomendadas para facilitar o uso e o gerenciamento do produto, tanto para seus usuários quanto para seus desenvolvedores.

Que outras práticas recomendadas do React você conhece que não foram mencionadas neste artigo? Compartilhe-os nos comentários abaixo. Codificação feliz!