14 habilidades práticas que você deve dominar no desenvolvimento do React

React tem sido uma das bibliotecas mais populares para a criação de interfaces de usuário na construção de aplicações web . É amplamente utilizado por muitas empresas e possui uma comunidade ativa.

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

Também é necessário conhecer certas convenções que permitirão escrever código React limpo. Isso não apenas ajuda você a atender melhor seus usuários, mas também torna mais fácil para você e outros desenvolvedores que trabalham no projeto manter a base de código.

Neste tutorial, primeiro discutiremos alguns desafios comuns enfrentados pelos desenvolvedores do React e, em seguida, nos aprofundaremos em algumas práticas recomendadas que você pode seguir para ajudá-lo a escrever o código do React de maneira mais eficiente.

Desafios enfrentados pelos desenvolvedores do React

Nesta seção, discutiremos alguns dos principais desafios enfrentados pelos desenvolvedores do React durante e após a construção de aplicações web.

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

Começaremos com as questões mais básicas que afetam os iniciantes.

Pré-requisitos de reação

Um dos principais desafios para os desenvolvedores do React é entender como a biblioteca funciona e os pré-requisitos para utilizá-la.

Existem algumas coisas que você precisa saber antes de aprender React. Como o React usa JSX, entender HTML e JavaScript é fundamental. Claro, você também deve conhecer CSS ou estruturas CSS modernas para projetar seus aplicativos da web.

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

função de seta
pausa
operador de propagação
módulo
Desestruturação
método de matriz
palavra modelo
promessa
let e const variáveis

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

Você também aprenderá sobre novos conceitos do React, como:

componentes
JSX
Gerenciamento de status
Adereços
renderizar elementos
Manipulação de eventos
renderização condicional
listas e chaves
Formulários e validação de formulário
gancho
Estilo

Ter um conhecimento sólido dos conceitos do React e dos pré-requisitos para usar a biblioteca o ajudará a aproveitar seus recursos de maneira eficaz.

Mas não deixe que isso o sobrecarregue. Com prática e aprendizado constantes, você pode dominar rapidamente como usar o React para construir projetos incríveis. É semelhante a aprender uma nova linguagem de programação – basta um pouco de tempo e prática para entender.

Gerenciamento de status

Atualizar o estado/valor de suas variáveis no React funciona de maneira diferente do que você faria com JavaScript normal .

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

var x = 300;

function updateX(){

x = 100;

}

updateX();

console.log(x);

// 100

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

Usando o operador igual, atribuímos a ele um novo valor 100 . Isso está updateX escrito em uma função.

No React, atualizar o estado/valor de uma variável funciona de maneira diferente. Veja como fazer isso:

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;

Ganchos podem ser usados ao atualizar o estado das variáveis no React useState . Há três pontos a serem observados ao usar este gancho:

nome variável
função para atualizar variáveis
Valor/estado inicial da variável

No nosso exemplo, x é o nome da variável, setX é x a função usada para atualizar o valor e x é o valor inicial ( 300) passado como argumento para useState a função:

const [x, setX] = useState(300)

Para atualizar x o status usamos setX a função:

import { useState } from 'react';

let updateX =()=>{

setX(100);

}

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

Embora pareça perfeito para atualizar o estado de suas variáveis, em projetos muito grandes aumenta a complexidade do seu código. Ter um grande número de ganchos de estado torna o código muito difícil de manter e entender, especialmente à medida que o tamanho do seu projeto aumenta.

Outro problema com o uso de ganchos com estado é que as variáveis criadas não podem ser compartilhadas entre os diferentes componentes que compõem sua aplicação. Você ainda precisa usar Props para passar dados de uma variável para outra.

Felizmente, temos bibliotecas que lidam com o gerenciamento de estado de forma eficiente no React. Eles ainda permitem que você crie uma variável uma vez e a use em qualquer lugar do 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 diferentes daqueles que já aprendeu no React. Por exemplo, Redux é conhecido por ter muito código clichê, o que torna difícil para iniciantes dominá-lo (embora isso esteja sendo corrigido pelo Redux Toolkit, que permite escrever menos código que o Redux).

Manutenção e escalabilidade

Conforme o usuário precisa de uma alteração no produto, sempre há alterações no código que compõe o produto.

Se o seu código não for fácil de manter para a equipe, muitas vezes ele será difícil de escalar. Dificuldades como essas surgem de práticas inadequadas seguidas ao escrever código. Eles podem parecer funcionar perfeitamente no início e dar os resultados desejados, mas qualquer coisa que funcione “agora” será ineficiente para o futuro e o crescimento do seu projeto.

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

Práticas recomendadas de reação

Nesta seção, falaremos sobre algumas práticas recomendadas que você precisa seguir ao escrever o código React.

1. Mantenha uma estrutura de pastas clara

A estrutura de pastas ajuda você e outros desenvolvedores a entender a organização dos arquivos e ativos usados no projeto.

Ter uma boa estrutura de pastas facilita a navegação, economizando tempo e ajudando a evitar confusão. As estruturas de pastas variam dependendo da preferência de cada equipe, mas aqui estão algumas estruturas de pastas comumente usadas no React.

Agrupar pastas por função ou rota

Agrupar arquivos em pastas por rota e função ajuda a manter tudo sobre um recurso específico em um único espaço. Por exemplo, se você tiver um painel de usuário, poderá colocar os arquivos JavaScript, CSS e de teste relacionados ao painel em uma pasta.

Aqui está um exemplo para demonstrar:

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 você pode ver acima, todos os arquivos e ativos de cada recurso principal do aplicativo são armazenados na mesma pasta.

Agrupar arquivos semelhantes

Alternativamente, você pode agrupar arquivos semelhantes na mesma pasta. Você também pode configurar pastas separadas para Hooks, componentes, etc. Por favor, veja 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 organizar seus arquivos, vá em frente. Contanto que você e outros desenvolvedores tenham uma ideia clara da estrutura de arquivos, você está pronto para prosseguir

2. Estabeleça uma sequência estruturada de importação

À medida que seu aplicativo React continua a crescer, você fará importações adicionais. A estrutura dos seus arquivos de importação ajuda muito a entender os componentes que os compõem.

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

Por favor, veja o 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 (estas são as que devemos instalar previamente).

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

Por uma questão de simplicidade e facilidade de compreensão, nossos exemplos não descrevem 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 ainda mais arquivos locais por tipo de arquivo, se isso funcionar para você - ou seja, agrupar componentes, imagens, folhas de estilo, ganchos, etc. em arquivos de importação locais separadamente.

Abaixo 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. Siga as convenções de nomenclatura

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

A documentação do React não fornece nenhum padrão oficial para nomear componentes. As convenções de nomenclatura mais comumente 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 é nomeado StudentList, que é mais legível Studentlist que studentlist.

Por outro lado, a convenção de nomenclatura camelCase é usada principalmente para nomear variáveis, ganchos, funções, arrays, etc.:

const [firstName, setFirstName] = useState("Ihechikara");

const studentList = [];

const studentObject = {};

const getStudent = () => {}

4. Use Linters

As ferramentas Linter ajudam 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?

As ferramentas Linter ajudam a melhorar a consistência da sua base de código. Ao usar uma ferramenta como ESLint , você pode definir regras que deseja que todos os desenvolvedores que trabalham no projeto sigam. Essas regras podem incluir a exigência do uso de aspas duplas em vez de aspas simples, colchetes em torno de funções de seta, convenções de nomenclatura específicas e muito mais.

A ferramenta observa seu código e notifica quando as regras são quebradas. Palavras-chave ou linhas que violam as regras geralmente são sublinhadas em vermelho.

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

As ferramentas Linter também nos ajudam a corrigir erros facilmente. Podemos ver erros de digitação, variáveis declaradas mas não utilizadas e outros recursos semelhantes. Alguns desses bugs podem ser corrigidos automaticamente conforme você codifica.

Ferramentas como o ESLint são integradas à maioria dos editores de código , para que você obtenha a funcionalidade do linter em qualquer lugar. Você também pode configurá-lo de acordo com seus requisitos de codificação.

5. Use a biblioteca de fragmentos

O legal de usar um framework com uma comunidade ativa é que existem muitas ferramentas criadas para facilitar o desenvolvimento .

Bibliotecas de plug-ins 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 de snippets ES7+ React/Redux/React-Native , que possui muitos comandos úteis para gerar código pré-fabricado. Por exemplo, se você deseja criar um componente funcional React sem digitar todo o código, tudo o que você precisa fazer para usar a extensão é digitar rfce e pressionar Enter .

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

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 estilização de páginas da web com TailwindCSS. A extensão pode ajudá-lo com o preenchimento automático, sugerindo classes de utilitários, realce de sintaxe e recursos de recuo. Você pode até ver suas cores enquanto codifica.

6. Mesclar CSS e JavaScript

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

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

A seguir está o estilo do Tailwind CSS:

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

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

Veja como você pode usar emoção para estilizar elementos:

<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 quiser sem precisar reescrever essa lógica.

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

Demonstraremos isso usando um exemplo muito simples:

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 um arquivo diferente para cada usuário, acabaremos com um número excessivo de arquivos. (É claro que usamos informações do usuário para simplificar. Na vida real, talvez você precise lidar com diferentes tipos de lógica.)

Para tornar os componentes reutilizáveis, podemos usar Props. Veja como fazer isso:

function UserInfo({userName}) {

return (

<div>

<h1>My name is {userName}.</h1>

</div>

);

}

export default UserInfo

Depois, podemos importar o componente e utilizá-lo quantas vezes forem necessárias:

import UserInfo from "./UserInfo";

function App() {

return (

<div className="App">

<UserInfo userName={"Ihechikara"} />

<UserInfo userName={"John"} />

<UserInfo userName={"Jane"} />

</div>

);

}

export default App;

Em vez de ter três UserInfo arquivos separados por usuário, agora temos três instâncias de componentes diferentes da lógica criada em um arquivo.

8. Implementar carregamento lento

À medida que seu aplicativo React cresce, o carregamento lento pode ser muito útil. Quando você tem uma base de código grande, o tempo de carregamento da página da web fica mais lento. Isso ocorre porque cada usuário sempre precisa carregar o aplicativo inteiro.

"Carregamento lento" é um termo usado para várias implementações. Aqui estamos relacionando isso 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 a parte do seu aplicativo que é carregada em um determinado ponto. Isto é conseguido dividindo os pacotes e carregando apenas aqueles relevantes para as necessidades do usuário. Por exemplo, você pode primeiro carregar apenas a lógica necessária para o login do usuário e, em seguida, carregar a lógica do painel do usuário somente depois que o usuário tiver efetuado login com êxito.

9. Use ganchos reutilizáveis

Os ganchos no React permitem que você aproveite alguns recursos extras do React, como interagir com o estado do seu componente e executar efeitos posteriores relacionados a certas mudanças de estado no 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 inserir novamente a lógica em cada arquivo que os utiliza. Fazemos isso criando Hooks personalizados que podem ser importados para qualquer lugar do aplicativo.

No exemplo a seguir, criaremos um Hook para obter dados de uma API externa:

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 obter dados da API acima. Agora pode ser importado para qualquer componente. Dessa forma não precisamos inserir toda a lógica em cada componente que precisa obter dados externos.

Os tipos de Hooks personalizados que podemos criar no React são ilimitados, então cabe a você decidir como usá-los. Apenas lembre-se de que se for um recurso que precisa ser reutilizado em diferentes componentes, você definitivamente deve torná-lo reutilizável.

10. Registrando e gerenciando erros

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

Os limites de erro integrados introduzidos no React 16 são um recurso dos componentes de classe, portanto não discutiremos isso, pois recomendamos que você use componentes funcionais em vez de componentes de classe.

Por outro lado, usos try e catch blocos aplicam-se apenas ao código diretivo, não ao código declarativo. Isso significa que não é uma boa escolha ao usar JSX.

Nosso melhor conselho é usar uma biblioteca como react-error-boundary . Esta biblioteca fornece funcionalidades que podem ser agrupadas em seus componentes, o que o ajudará a detectar erros quando seu aplicativo React for renderizado.

11. Monitore e teste seu código

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

Embora muitas pessoas possam pensar que testar não é grande coisa ao construir sua aplicação web, ele traz inúmeros benefícios. Aqui estão alguns deles:

A detecção de erros leva a melhorias na qualidade do código.
Os testes unitários podem ser gravados para coleta de dados e referência futura.
A detecção precoce de erros economiza o custo de pagar desenvolvedores para apagar incêndios que poderiam começar se não fossem controlados.
Aplicativos e sites livres de bugs ganham a confiança e a fidelidade do seu público , levando a um maior crescimento.

Você pode usar ferramentas como Jest ou a biblioteca de testes React para testar seu código. Existem muitas ferramentas de teste para você escolher – tudo se resume ao que funciona melhor para você.

Você também pode testar aplicativos React executando-os no navegador enquanto os cria. Normalmente, todos os erros detectados serão exibidos na tela. Isso é semelhante a usar DevKinsta para desenvolver um site WordPress – esta ferramenta permite projetar, desenvolver e implantar um site WordPress em sua máquina local.

12. Use componentes funcionais

Há muitos benefícios em usar componentes funcionais no React. 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 utilizar classes. Graças aos Hooks, você também pode gerenciar facilmente o estado de seus componentes escrevendo menos código.

A maioria dos recursos mais recentes que você encontrará no React usa componentes funcionais, facilitando a compreensão e o acompanhamento de guias e recursos úteis criados pela comunidade quando você tiver problemas.

13. Acompanhe as mudanças na versão do React

Com o tempo, novos recursos serão introduzidos e alguns recursos antigos serão modificados. A melhor forma é seguir a documentação oficial.

Você também pode ingressar na comunidade React nas redes sociais para obter informações sobre as mudanças à medida que elas acontecem.

Ficar atento à versão atual do React ajudará você a determinar quando otimizar ou modificar sua base de código para obter desempenho ideal.

Existem também bibliotecas externas construídas em torno do React que você também deve manter atualizado - como o React Router, que é usado para roteamento com o React. Compreender as alterações nessas bibliotecas pode ajudá-lo a fazer alterações relevantes e importantes em seu aplicativo e facilitar o trabalho de todos no projeto.

Além disso, quando uma nova versão é lançada, alguns recursos podem ser abandonados e algumas palavras-chave podem ser alteradas. Para garantir a segurança, você deve sempre ler a documentação e as orientações quando essa alteração ocorrer.

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

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

Hospedar seu site dá acesso a diversas ferramentas que facilitam o dimensionamento e o gerenciamento do seu site. O servidor que hospeda o seu site permite que os arquivos da sua máquina local sejam armazenados com segurança no servidor. O benefício geral de hospedar seu site é que outras pessoas podem ver as coisas interessantes que você criou.

Existem várias plataformas que oferecem aos desenvolvedores serviços de hospedagem gratuita, como Firebase, Vercel, Netlify, GitHub Pages, ou serviços pagos, como Azure, AWS, GoDaddy, Bluehost, etc.

resumo

Aprender como usar o React não é tudo que você precisa para criar ótimos aplicativos da web. Assim como outras estruturas como Angular, Vue, etc., existem algumas práticas recomendadas que você deve seguir para ajudá-lo a construir produtos eficientes.

Seguir essas convenções do React não apenas ajuda seu aplicativo, mas também beneficia você como desenvolvedor front-end – você aprende como escrever código eficiente, escalável e de fácil manutenção e prospera como profissional em sua área, destacando-se.

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

Você conhece alguma prática recomendada do React que não seja mencionada neste artigo? Por favor, compartilhe-os nos comentários abaixo.