React tem permanecido uma das bibliotecas mais populares para a criação de interfaces de usuário na construção de aplicativos web. Ela é amplamente utilizada por muitas empresas e tem uma comunidade ativa.

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

Também é necessário entender certas convenções que permitirão a você escrever um código React limpo. Isso não só ajudará você a servir melhor seus usuários, mas tornará mais fácil para você e outros desenvolvedores que trabalham no projeto manter a base de código.

Neste guia, começaremos falando sobre alguns dos desafios comuns que os desenvolvedores React enfrentam, depois veremos algumas práticas recomendadas que você pode seguir para ajudá-lo a escrever um código React mais eficiente.

Vamos começar!

Confira nosso guia em vídeo sobre as melhores práticas do React

Desafios que os desenvolvedores React enfrentam

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

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

Vamos começar com o problema mais básico que afeta os iniciantes.

Pré-requisitos do React

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

Antes de aprender React, você é obrigado a saber algumas coisas. Como o React usa JSX, conhecer HTML e JavaScript é uma obrigação. É claro, você também deve conhecer CSS ou uma framework CSS moderna para projetar seus aplicativos web.

Em particular, existem conceitos e funcionalidades JavaScript essenciais que você deve conhecer antes de se aprofundar no React. Alguns deles, que em sua maioria se enquadram no ES6, incluem:

  • Arrow functions
  • Rest operator
  • Spread operator
  • Módulos
  • Desestruturação
  • Métodos de Array
  • Template literals
  • Promises
  • let e const variáveis

Estes conceitos JavaScript ajudarão você a entender, como o React funciona.

Você também deve aprender sobre novos conceitos do React, como, por exemplo:

  • Componentes
  • JSX
  • Gerenciamento do estado
  • Propriedades
  • Elementos de renderização
  • Tratamento de eventos
  • Renderização condicional
  • Listas e chaves
  • Formulários e validação de formulários
  • Hooks
  • Estilização

Ter um sólido entendimento dos conceitos do React e dos pré-requisitos para usar a biblioteca ajudará você a utilizar suas funcionalidades de forma eficiente.

Mas não deixe que isso o sobrecarregue. Com prática e aprendizado constantes, você pode rapidamente ter uma boa noção de como usar o React para construir projetos incríveis. É semelhante ao aprendizado de uma nova linguagem de programação – é preciso apenas um pouco de tempo e prática para entender.

Gerenciamento do estado

Atualizar o estado/valor de suas variáveis no React funciona de forma diferente de como você o faria usando Vanilla JavaScript.

Em JavaScript, atualizar uma variável é tão simples quanto atribuir um novo valor a ela usando o igual ao operador (=). 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 um valor inicial de 300.

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

Em React, atualizar o estado/valor de suas variáveis funciona de forma 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ê faz uso da hook useState. Há três coisas para se notar ao usar este hook:

  • 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 um parâmetro para a função useState:

 const [x, setX] = useState(300)

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

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

Assim, a função updateX invoca a função setX, que então define o valor de x para 100.

Enquanto isso parece funcionar perfeitamente para atualizar o estado das suas variáveis, aumenta a complexidade do seu código em projetos muito grandes. Ter muitos hooks de estado torna o código muito difícil de manter e entender, especialmente à medida que o seu projeto se dimensiona.

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 o seu aplicativo. Você ainda teria que fazer uso de Props para passar os dados de uma variável para outra.

Felizmente, existem bibliotecas construídas para lidar com o gerenciamento estatal de forma eficiente no React. Elas até permitem que você crie uma variável uma vez e a use em qualquer lugar que você queira 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ê será forçado a aprender novos conceitos que são estranhos ao que você aprendeu no React. Por exemplo, o Redux é conhecido por ter muitos códigos padronizados (boilerplate), o que é confuso para iniciantes (embora isso tenha sido corrigido com o Redux Toolkit, que permite escrever menos código do que o necessário). ).

Capacidade de manutenção e escalabilidade

Como as exigências do usuário de um produto continuam mudando, há sempre a necessidade de introduzir mudanças no código que compõe o produto.

Muitas vezes é difícil desenvolver seu código quando não é de fácil manutenção para a equipe. Dificuldades como essa surgem quando você segue práticas ruins ao escrever seu código. A princípio, eles parecem funcionar perfeitamente, dando a você os resultados desejados, mas qualquer coisa que funcione “agora” é ineficaz para o futuro e o crescimento do seu projeto.

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

Melhores práticas do React

Nesta seção, falaremos sobre algumas das melhores práticas a serem seguidas ao escrever seu código Reage.

1. Mantenha uma estrutura clara das pastas

As estruturas de pastas ajudam você e outros desenvolvedores a entender a disposição dos arquivos e ativos que estão sendo usados em um projeto.

Com uma boa estrutura de pastas, é fácil de 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.

Agrupe pastas por recursos ou rotas

Agrupe arquivos em seu diretório por rota e sua função manterá tudo relacionado a uma determinada função em um só lugar. 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:

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 funcionalidade central do aplicativo tem todos os seus arquivos e ativos armazenados na mesma pasta.

Agrupe arquivos similares

Alternativamente, você pode agrupar arquivos similares 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 diretório ao escrever o código. Se você tem uma maneira específica de organizar seus arquivos, vá em frente. Contanto que você e outros desenvolvedores tenham um bom entendimento da estrutura do arquivo, você estará pronto!

2. Institua uma ordem estruturada de importação

Como o seu aplicativo React continua a crescer, você está obrigado a fazer importações extras. A estrutura de suas importações vai muito longe para ajudá-lo a entender o que compõe seus componentes.

Como uma convenção, o agrupamento de utilidades similares 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, agrupamos bibliotecas de terceiros (estas são bibliotecas que tivemos que instalar de antemão).

Então importamos arquivos que criamos localmente como folhas de estilo, imagens e componentes.

Por uma questão de simplicidade e fácil compreensão, nosso exemplo não retrata uma base de código muito grande, mas tenha em mente que ser consistente com este formato de importação ajudará você e outros desenvolvedores a entender melhor o seu aplicativo React.

Você pode ir além agrupando seus arquivos locais de acordo com os tipos de arquivo se isso funcionar para você – ou seja, agrupando componentes, imagens, folhas de estilo, hooks, e assim por diante separadamente sob 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. Respeite 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 até mesmo aos nomes das suas variáveis, até os seus 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.

O PascalCase é usado principalmente para nomes de componentes:

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

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

Por outro lado, a convenção de nomenclatura CamelCase é usada principalmente para nomenclatura de variáveis, hooks, funções, matrizes, e assim por diante:

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

4. Use a ferramenta Linter

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

Uma ferramenta de linter ajuda com a consistência em uma base de código. Ao usar uma ferramenta como ESLint, você pode definir as regras que você quer que todos os desenvolvedores que trabalham no projeto sigam. Essas regras podem incluir requisitos para usar aspas duplas ao invés de aspas simples, chaves em torno de funções de seta, uma convenção particular de nomenclatura e muito mais.

A ferramenta observa seu código e então notifica você quando uma regra é quebrada. A palavra-chave ou linha que quebra a regra seria normalmente sublinhada em vermelho.

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

As ferramentas Linter também podem nos ajudar a corrigir bugs facilmente. Nós podemos ver erros ortográficos, variáveis que foram declaradas, mas não utilizadas e outras funcionalidades do gênero. Alguns desses bugs podem ser corrigidos automaticamente à medida que você codifica.

Ferramentas como ESLint são incorporadas na maioria dos editores de código para que você tenha funcionalidades de linter em movimento. Você também pode configurá-lo de acordo com seus requisitos de codificação.

5. Use a biblioteca de Snippet

O legal em usar uma estrutura com uma comunidade ativa é a disponibilidade de ferramentas sendo criadas para tornar o desenvolvimento mais fácil.

As bibliotecas de snippet podem tornar o desenvolvimento mais rápido fornecendo código pré-construído que os desenvolvedores usam com frequência.

Um bom exemplo é a extensão ES7+ React/Redux/React-Native snippets, que tem muitos comandos úteis para a geração de código pré-construído. Por exemplo, se você quiser criar um componente funcional React sem digitar todo o código, tudo o que você precisa fazer é usar a extensão e digitar rfce e pressionar Enter.

O comando acima irá gerar um componente funcional com um nome que corresponde 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 útil é a extensão Tailwind CSS IntelliSense, que simplifica o processo de modelagem de páginas web com o Tailwind CSS. A extensão pode ajudá-lo com o preenchimento automático, sugerindo classes de utilidade, realce de sintaxe e funcionalidades Lint. Você pode até mesmo ver como são às suas cores enquanto codifica.

6. Combine CSS e JavaScript

Ao trabalhar em grandes projetos, o uso de arquivos de estilos diferentes para cada componente pode tornar sua estrutura de arquivos volumosa e difícil de navegar.

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

Aqui está como é o estilo com o 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. Nós somos capazes de fazer isso usando as classes de utilidade da framework.

Aqui está como você estilizaria um elemento usando Emoção:

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

7. Crie componentes de limite

Uma das principais características do React é a reusabilidade do código. Você pode criar um componente e reutilizar sua lógica o máximo de vezes 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 fazendo isso, a estrutura do arquivo fica inchada com arquivos desnecessários que não deveriam existir em primeiro lugar.

Nós vamos usar um exemplo muito fácil para demonstrar isso:

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

O componente acima exibe o nome do usuário. Se criarmos outro arquivo para cada usuário, obteremos um número excessivo de arquivos. (É claro que usamos as informações do usuário para simplificar tudo. 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 usar adereços. Veja como:

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

Depois disso, podemos então importar este 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 vindo da lógica criada em um arquivo ao invés de ter três arquivos separados para cada usuário.

8. Implemente o carregamento preguiçoso (Lazy Loading)

O carregamento preguiçoso é muito útil à medida que o 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 é porque o aplicativo inteiro tem que ser carregado toda vez para cada usuário.

“Carregamento preguiçoso” é um termo usado para muitas implementações diferentes. Aqui estamos emparelhando com JavaScript e React, mas você também pode implementar o carregamento preguiçoso em imagens e vídeos.

Por padrão, React agrupa e implementa o aplicativo inteiro. Mas, podemos mudar este comportamento usando carregamento preguiçoso, 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 as necessidades do usuário. Por exemplo, você pode primeiro carregar somente a lógica necessária para o usuário entrar, depois carregar a lógica para o painel do usuário somente depois que ele tiver entrado com sucesso.

9. Utilize hooks reutilizáveis

Os 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 no seu componente. Nós podemos fazer tudo isso sem escrever componentes de classe.

Também podemos tornar os hooks reutilizáveis para não termos que reescrever a lógica em cada arquivo que eles são usados. Para isso, criamos hooks personalizados que podem ser importados em qualquer lugar do aplicativo.

No exemplo abaixo, criaremos um hook para recuperar 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 o estresse de digitar toda essa lógica em cada componente onde temos que buscar dados externos.

O tipo de hooks personalizados que podemos criar em React é ilimitado, então cabe a você decidir como usá-los. Basta lembrar que se é uma funcionalidade que tem que ser repetida por diferentes componentes, você definitivamente deve torná-la reutilizável.

10. Registre e gerencie erros

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

Os limites de erro incorporados que foi introduzido no React 16 foi uma funcionalidade para componentes de classe, então não discutiremos isso porque é aconselhável que você use componentes funcionais ao invés de componentes de classe.

Por outro lado, o uso de um bloco try e catch funciona apenas para código imperativo, mas não para código declarativo. Isso significa que não é uma boa opção quando se trabalha com JSX.

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

11. Monitore e teste seu código

Testar seu código durante o desenvolvimento ajuda você a escrever um código que pode ser mantido. Infelizmente, isso é algo que muitos desenvolvedores negligenciam.

Embora muitos possam argumentar que testar não é uma grande coisa ao construir seu aplicativo web, ele vem com inúmeras vantagens. Aqui estão apenas algumas:

  • Os testes ajudam você a detectar erros e bugs.
  • A detecção de bugs leva à melhoria da qualidade do código.
  • Os testes unitários podem ser documentados para coleta de dados e referência futura.
  • A detecção precoce de bugs economiza o custo de pagar os desenvolvedores para apagar o incêndio que o bug poderia causar se não fosse verificado.
  • Aplicativos e sites sem bugs ganham confiança e lealdade da sua audiência, levando 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 àquela que funciona melhor para você.

Você também pode testar seus aplicativos React enquanto você os constrói rodando os aplicativos em seu navegador. Você normalmente obterá qualquer erro detectado exibido na tela. Isso é similar ao desenvolvimento de sites WordPress usando DevKinsta – uma ferramenta que permite a você projetar, desenvolver e implantar sites WordPress em sua máquina local.

12. Use componentes funcionais

O uso de componentes funcionais no React vem com uma série de 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 com o uso do this ou com o uso de classes. Você também pode gerenciar facilmente o estado do seu componente escrevendo menos código graças ao Hooks.

A maioria dos recursos atualizados que você encontrará no React usam componentes funcionais, facilitando entender e seguir guias e recursos úteis criados pela comunidade quando você se depara com problemas.

13. Fique em dia com as mudanças da versão React

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

Você também pode se juntar às comunidades React em redes sociais para obter informações sobre mudanças quando elas acontecem.

Estar atualizado com a versão atual do React o ajudará a determinar quando otimizar ou fazer mudanças na sua base de código para obter a melhor performance.

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

Além disso, algumas funcionalidades podem ser depreciadas e certas palavras-chave podem ser alteradas quando novas versões são lançadas. Para estar do lado seguro, você deve sempre ler a documentação e os guias quando tais mudanças são feitas.

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

Se você quiser disponibilizar seu aplicativo da Web para todos após criá-lo, precisará hospedá-lo. É importante que você use um provedor de hospedagem rápido e seguro.

Hospedar seu site oferece acesso a várias ferramentas que facilitam o dimensionamento e o gerenciamento do seu site. O servidor que hospeda seu site permite que os arquivos do seu computador local sejam armazenados com segurança 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 gratuitos de hospedagem 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 centros de dados globalmente posicionados da Kinsta. Você receberá acesso à configuração rápida, suporte 24/7, segurança top de linha, domínios personalizados, relatórios avançados e ferramentas de monitoramento, e muito mais.

Resumo

Aprender como usar o React não é tudo o que é necessário para criar aplicativos web excepcionais. Como em qualquer outra framework como Angular, Vue, etc., existem melhores práticas que você deve seguir para ajudá-lo a construir produtos eficientes.

Seguir estas convenções do React não só ajuda seu aplicativo, mas também tem vantagens para você como um desenvolvedor frontend – você aprende como escrever código eficiente, escalável e de manutenção, e você se destaca como um profissional em sua área.

Portanto, ao construir seu próximo aplicativo web com React, tenha em mente essas melhores práticas para facilitar o uso e o gerenciamento do produto tanto para seus usuários quanto para seus desenvolvedores.

Que outras melhores práticas do React você sabe que não foram mencionadas neste artigo? Compartilhe nos comentários abaixo. Boa codificação!

Ihechikara Abba

Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics.
Connect with Ihechikara on Twitter.