Guia de estudos de React

Durante meus estudos de React, fiquei confuso com a quantidade de termos e bibliotecas que são utilizadas para desenvolver uma aplicação React completa, sem saber por onde começar.

Após quebrar a cabeça com alguns cursos aleatórios, resolvi escrever uma guia com os termos mais importantes do universo React e as bibliotecas mais utilizadas (e algumas nem tanto, mas interessantes) para ter um norte.

Este não é um roadmap de estudo de React, mas uma fonte rápida e concisa para consulta da terminologia e uma breve explicação sobre algumas bibliotecas interessantes. Recomendo utilizar este guia como um primeiro passo para se familiarizar com React e, depois, buscar cursos específicos sobre cada tema tratado aqui (além de consultar a documentação de cada biblioteca, que costuma ser uma ótima forma de aprofundar os estudos).

Introdução

React é uma biblioteca para desenvolvimento de aplicações web, desenvolvida pelo Facebook (atual Meta), sendo utilizada largamente para criar aplicações web complexas que precisam ser atualizadas em tempo real. Ele é uma biblioteca modular, o que permite que os seus componentes possam ser facilmente reutilizados e compartilhados entre diferentes partes da aplicação. Além disso, podemos utilizá-lo em conjunto com o React Native para o desenvolvimento de aplicativos móveis para Android e iOS. Para converter o código escrito em uma versão mais recente do ECMAScript para uma versão compatível com navegadores mais antigos, o React se utiliza do Babel.

DOM (Document Object Model) é uma estrutura hierárquica em forma de árvore que organiza elementos como HTML, CSS, e JavaScript. Ele captura e organiza esses elementos, criando a representação visual exibida no navegador. O objeto global "document" referencia o HTML e permite interagir com o conteúdo e elementos da página.

Anatomia do React

Um componente funcional é um tipo de componente no React que é definido como uma função Javascript, que recebe as propriedades como argumento e retorna o elemento React que deseja renderizar. Cada componente é um pedaço de código que segue um determinado padrão e, que pode ser reutilizado várias vezes ao longo de sua aplicação.

Props são um tipo de dados que podem ser passados para um componente React, como texto, imagens, números ou outros componentes.

React-DOM é uma biblioteca que fornece métodos para manipular o DOM, permitindo renderizar os seus componentes utilizando dois métodos principais: createRoot e render. O método createRoot cria uma raiz do React, que é um ponto de entrada para o seu aplicativo React no DOM. Já o método render, renderiza um elemento React no DOM, usando a raiz do React criada pelo método createRoot.

JSX é uma extensão da linguagem Javascript que é utilizada pelo React para criar interfaces de usuário, que permite misturar código Javascript com a sintaxe HTML, tornando mais fácil escrever componentes em um único arquivo de código. O TSX funciona da mesma forma, sendo uma extensão da linguagem Typescript. Exemplo:

Router DOM refere-se aos métodos e funcionalidades nativas do DOM para manipulação do histórico de navegação no navegador, incluindo métodos como pushState, replaceState e popstate. Ele permite mudar o URL exibido no navegador e responder a essas mudanças sem uma página ser totalmente recarregada.

Ciclo de vida no React

O ciclo de vida de um componente é o conjunto de etapas que um componente passa ao ser criado, montado, atualizado e desmontado em uma aplicação. Os componentes funcionais não possuem métodos de ciclo de vida como os componentes de classe, mas eles se utilizam de hooks para gerenciar o estado e executar ações em resposta às mudanças no estado ou nas propriedades.

Os Reacts hooks são funções que permitem utilizar o estado e outros recursos do React em componentes funcionais. Existem diversos hooks, cada um com um propósito específico. Os principais são:

●useEffect: permite executar código em resposta a mudanças no estado ou nas propriedades de um componente. Ele é bastante útil para executar ações assíncronas, como fazer requisições HTTP ou alterar o DOM quando o estado ou as propriedades mudam.

●useLayoutEffect: é semelhante ao useEffect, mas é chamado de forma síncrona após todas as mutações do DOM, sendo mais adequado para operações que precisam ler e escrever no DOM e garantir que as mudanças sejam aplicadas antes da próxima repintura;

●useState: permite adicionar estado a componentes funcionais, para manter e atualizar estados internos.

●useRef: permite criar uma referência persistente que pode ser anexada a um elemento DOM (permitindo manipulação direta, como foco, seleção, etc) ou armazenar valores mutáveis sem causar uma nova renderização do componente, sendo útil para acessar diretamente elementos DOM e para manter valores que não necessitam desencadear uma renderização quando alterados.

●useMemo: permite memorizar valores calculados para otimizar a performance de componentes funcionais, sendo utilizado para evitar cálculos "caros" ou operações intensivas de renderização em cada renderização, recalculando o valor apenas quando uma das dependências muda.

●useCallback: retorna uma versão memorizada de uma função de callback. Isso é útil para otimizar componentes que dependem de callbacks que, se recriados em cada renderização, poderiam causar renderizações desnecessárias de componentes filhos ou disparar efeitos colaterais adicionais.

O hook useLayoutEffect, quando criado com um array vazio, atua como o componentWillMount (invocado imediatamente antes do componente ser montado na DOM). É usado quando você precisa mudar algo visualmente antes do componente aparecer, para que não haja aquele problema da tela piscar assim que a tela carrega (por exemplo, para alterar o tema para light/dark).

useLayoutEffect(() => {
…
},[])

O useEffect com o array de dependências vazio atua como o componentDidMount, diferente do useLayoutEffect, ele executa assim que o componente é renderizado, normalmente é utilizado para fazer chamadas para o servidor ou fazer algum cálculo com props passados.

useEffect(() => {
…
}, [])

O componentWillUpdate pode ser feito tanto pelo useLayoutEffect quanto pelo useEffect, desde que tenha uma variável no array de dependências e, à partir da primeira execução, ambos atuarão como componentWillUpdate, sempre executando quando essa variável mudar.

useEffect(() => {
…
}, [variavel])

Para invocar o componentWillUnmount em hooks, basta retornar uma função dentro do useEffect, pois desta forma, essa função dentro do return só será executada quando o componente estiver desmontando. É bastante usado para clearTimeout, clearInterval ou para enviar informações de acesso daquele componente para outro lugar.

useEffect(() => {
return () => {
…
}
},[])

Redux

Redux é uma biblioteca Javascript criada com o objetivo de resolver problemas de fluxo de informação de uma aplicação front-end, armazenando todos os estados de nossa aplicação e os disponibilizando em todo e qualquer componente. Os seus componentes principais são: a View, as Actions, os Dispatcher, os Reducers e o Store. Vejamos cada um com mais detalhes:

Fonte: https://redux.js.org/tutorials/fundamentals/part-1-overview

View é a parte visual, onde adicionamos nossos componentes React.

Action são ações que devem ser disparadas quando queremos que algo seja mudado no nosso estado global. Ela é uma função que retorna um objeto, contendo um type e, opcionalmente, um payload. O objeto representa uma ação que será feita em um reducer.

Dispatch é a ação de disparar uma action. A action sozinha é apenas um objeto com a "assinatura" que o redux aceita, já o dispatch é uma função que oficializa que aquela action está sendo disparada para o redux. É utilizado através do uso do hook useDispatch().

Reducers são pequenos estados dentro do Store (são pedaços do nosso estado global), que permite sabermos o valor atual do estado e o que deve ser mudado, de acordo com cada action. São funções que aceitam um estado inicial (chamado de state) e as actions como argumentos e sempre retornam um novo estado.

Store é o estado total do Redux, com todos os reducer e algumas funções utilitárias, como getState() e dispatch(), entre outras.

Outros Termos do Redux

Immer é uma biblioteca capaz de lidar com imutabilidade (ato de nunca alterar um dado) mais facilmente, para que você não precise se preocupar em estar mutando um estado ou não.

Type é um identificador de uma action, que será utilizado pelo reducer para identificar aquela ação e saber o que fazer com ela. Se o type é "incrementar" dentro do reducer deve haver um tratamento para caso a action seja do type incrementar. Caso esteja utilizando o Redux Toolkit, o type é criado automaticamente.

useSelector é um hook que permite acessar o state toda a aplicação. Com ele, é possível receber todo o estado de uma só vez ou pegar exatamente o que é preciso. É recomendável que seja utilizado para filtrar exatamente o necessário para o seu componente atual, visto que o seu componente fica "conectado" ao estado entregue ao useSelector, atualizando sempre que aquele estado mudar.

State normalmente se refere ao estado de um reducer (no contexto do Redux). Dentro de useSelector, ele representa o estado de todo o Store.

Initial State é o estado inicial de um reducer. Ele é obrigatório, pois é utilizado como o primeiro ponto de um estado antes das alterações que as actions disparadas farão.

Provider é um componente da biblioteca react-redux que permite prover o Store para todos os componentes que estão abaixo dele.

Redux Toolkit é uma biblioteca que facilita a criação de diversas coisas no Redux, como criar Reducers abstratos utilizando Slices, o que cria automaticamente actions, conseguindo resolver os estados com imutabilidade de forma automática.

Slice é o termo utilizado pelo React Toolkit para se referir ao pedaço que criamos que corresponderá ao Reducer, as Actions e as Actions types correspondentes àquele reducer. Ele é criado com a função createSlice do Redux Toolkit.

Middleware se refere a uma camada intermediária de software que processa, modifica ou manipula dados enquanto eles estão sendo transferidos de uma parte do sistema para outra. Em aplicações frontend, o middleware pode ser usado para interceptar e processar requisições de API, adicionando cabeçalhos de autorização, manipulando tokens de autenticação, etc.

Redux Thunk é um middleware poderoso que estende a capacidade do Redux de lidar com operações assíncronas de forma limpa e organizada. Ele permite que as action creators sejam usadas para fazer requisições assíncronas, mantendo o fluxo de dados previsível e síncrono, característico do Redux. Ao permitir que as ações sejam funções em vez de objetos simples, o Redux Thunk facilita a integração de operações assíncronas em aplicações Redux.

Bibliotecas essenciais no ecossistema React

React Router é uma biblioteca para gerenciamento de rotas no React. Ele abstrai e facilita o gerenciamento de navegação e URLs dentro de uma aplicação React.

PropTypes é uma ferramenta de validação de tipos usada em componentes React para garantir que as props passadas para um componente tenham os tipos esperados. É uma forma de melhorar a robustez e a legibilidade do código, ajudando a capturar erros de tipo durante o desenvolvimento.

Axios é uma biblioteca de cliente HTTP baseada em Promises para fazer requisições HTTP no navegador e no Node.js.

Styled-components é uma biblioteca que permite escrever estilos CSS reutilizáveis diretamente nos componentes, usando uma sintaxe similar ao CSS tradicional, mas com benefícios extras, como props dinâmicas e variáveis. Isso permite gerar estilos com base nas props dos componentes, facilitando a criação de designs dinâmicos e responsivos. É ideal para projetos que requerem uma abordagem mais orientada a componentes, com um foco maior na reutilização, manutenção e encapsulamento de estilos, especialmente em projetos maiores ou mais complexos.

React Query é uma biblioteca para gerenciar o estado de dados assíncronos em aplicações React. Ela simplifica o processo de busca, armazenamento, sincronização e atualização de dados remotos, permitindo que você se concentre mais na lógica da aplicação e menos no gerenciamento de estado.

Jest é uma biblioteca de testes unitários em Javascript, amplamente utilizada no React.

Cypress é uma ferramenta de teste E2E moderna e robusta para aplicações web. Ela é projetada para ser fácil de configurar e usar, oferecendo uma experiência de desenvolvimento rica para escrever testes E2E, testes de integração e testes unitários.

React Hook Form é uma biblioteca leve e simples que se concentra em usar hooks do React para criar formulários sem a necessidade de uma grande quantidade de código.

Formik é uma biblioteca mais completa e robusta que fornece uma solução mais tradicional para o gerenciamento de formulários em React.

Yup é uma biblioteca de validação de esquemas para JavaScript que permite definir regras de validação de forma simples e expressiva, garantindo que os dados de entrada atendam aos critérios especificados. Yup é comumente utilizado em conjunto com outras bibliotecas de formulários, como Formik e React Hook Form, para realizar validações de formulários de maneira eficaz e fácil.

i18next é uma biblioteca JavaScript para internacionalização (i18n) em aplicativos web. Ele fornece uma maneira simples e flexível de adicionar suporte a vários idiomas e localizações em seus projetos, permitindo que você traduza facilmente o conteúdo do seu aplicativo e adapte-o para diferentes regiões do mundo.

ESLint é uma ferramenta de linting para JavaScript e TypeScript. Seu principal objetivo é analisar o código para encontrar e corrigir problemas, garantindo que ele siga um conjunto definido de regras e padrões.

Biome.js é uma ferramenta poderosa para formatação de código, linting e automação em projetos JavaScript. Ela combina várias funcionalidades úteis em uma única ferramenta, visando melhorar a qualidade do código e produtividade.

Bibliotecas auxiliares

Tailwind CSS é uma biblioteca de estilos CSS utilitários. Em vez de fornecer componentes pré-estilizados, ele fornece uma ampla variedade de classes utilitárias que podem ser aplicadas diretamente ao HTML para estilizar os elementos. Normalmente é utilizado em projetos onde a velocidade de desenvolvimento e a flexibilidade são prioridades, especialmente em projetos menores ou onde a prototipagem rápida é necessária.

Fuse.js é uma biblioteca JavaScript de pesquisa baseada em fuzzy search (pesquisa aproximada) que permite buscar dados de forma eficiente mesmo quando há pequenas discrepâncias ou erros de digitação nas consultas de pesquisa. É especialmente útil quando você deseja proporcionar uma experiência de pesquisa robusta em aplicações web, onde os usuários podem cometer erros de digitação ou não conhecer a terminologia exata.

Emotion é uma biblioteca JavaScript para estilização de componentes em aplicações React (similar ao Styled-Component). Ela oferece uma maneira poderosa e flexível de adicionar estilos CSS aos componentes, utilizando uma combinação de CSS-in-JS, tagged templates e API simplificada.

Zod é uma biblioteca de validação de esquemas altamente eficiente e tipada para o TypeScript. Ela foi projetada para tornar a validação de dados em projetos TypeScript mais simples, robusta e segura, fornecendo uma sintaxe expressiva e tipada para definir e validar esquemas de dados.

Moment.js é uma biblioteca JavaScript de análise, manipulação e formatação de datas e horas. Ela oferece uma série de recursos poderosos para lidar com datas, facilitando tarefas como análise de strings de data, cálculos de diferença entre datas, formatação de datas para diferentes formatos, etc.

Humps é uma biblioteca JavaScript que fornece funções utilitárias para converter chaves de objetos entre diferentes convenções de nomenclatura, como camelCase, snake_case e kebab-case. Essa biblioteca é especialmente útil quando você precisa interoperar com APIs ou bibliotecas que seguem convenções de nomenclatura diferentes das suas.

Ramda é uma biblioteca JavaScript funcional que oferece uma série de funções utilitárias para manipulação de dados de forma funcional e declarativa. Ela é especialmente útil para projetos que adotam o paradigma de programação funcional e desejam aproveitar os benefícios da imutabilidade, composição de funções e currying.

Downshift é uma biblioteca JavaScript para criar componentes de seleção (dropdowns) acessíveis, flexíveis e de alto desempenho em React. Desenvolvida pelo Airbnb, ela oferece uma abordagem simples e poderosa para construir componentes de seleção personalizados com suporte à acessibilidade.

Recoil é uma biblioteca para gerenciamento de estado em aplicações React (similar ao Redux), que oferece uma maneira simples e eficiente de gerenciar o estado da aplicação, especialmente em casos onde o estado precisa ser compartilhado entre vários componentes. Ela é uma excelente opção para projetos menores, ou para partes específicas de uma aplicação, onde a simplicidade, a flexibilidade e a acessibilidade são prioritárias. É uma escolha mais direta para quem está familiarizado com React Hooks e deseja uma experiência de desenvolvimento mais simplificada, comparada com o Redux.

MUI (Material-UI) é uma biblioteca de componentes React que implementa os princípios do Material Design, criado pelo Google. Ela fornece um conjunto robusto de componentes prontos para uso, altamente personalizáveis e acessíveis, que podem ser usados para criar interfaces de usuário modernas e consistentes.

hoist-non-react-statics é uma biblioteca JavaScript muito útil para copiar propriedades estáticas de um componente para outro componente. Isso é especialmente útil em situações onde você tem um componente de "alto nível" que contém funcionalidades ou métodos estáticos que você deseja expor em um componente "de baixo nível" que é renderizado dentro do componente de alto nível. Por exemplo, suponha que você tenha um componente HighOrderComponent com algumas propriedades estáticas importantes que você deseja expor em um componente LowOrderComponent:

Dessa forma, LowOrderComponent agora terá acesso à propriedade estática myStaticMethod definida em HighOrderComponent.

Outros Termos

Next.js é um framework React que permite a construção de aplicações web modernas e otimizadas com funcionalidades adicionais fora da caixa, como renderização do lado do servidor (SSR), geração estática de páginas (SSG), suporte a rotas dinâmicas e API routes, entre outros. Desenvolvido e mantido pela Vercel, Next.js é projetado para fornecer uma excelente experiência de desenvolvedor e desempenho superior.

Create React App (CRA) é uma ferramenta para configurar rapidamente uma nova aplicação React com uma configuração padronizada e zero de configuração manual. Ele abstrai toda a complexidade inicial de configuração, proporcionando um ambiente de desenvolvimento moderno, pronto para uso.

Vite é uma ferramenta de build de desenvolvimento rápida e moderna para projetos front-end. Vite resolve alguns dos principais problemas enfrentados por ferramentas tradicionais como Webpack e CRA, oferecendo um desempenho significativamente melhorado e uma experiência de desenvolvimento mais fluida.

Prop Drilling é um processo de passar dados de um componente pai para um componente filho através de várias camadas de componentes intermediários. Isso pode levar a um código difícil de manter e a uma complexidade desnecessária quando muitos componentes intermediários não precisam diretamente dos dados ou funções que estão sendo passados. Um dos modos que podemos evitar prop drilling é através do React Context, que é uma forma de passar dados entre a árvore de componentes sem precisar passar props manualmente em cada nível.

Context API é uma funcionalidade do React que permite passar dados através da árvore de componentes sem a necessidade de passar props manualmente em cada nível. É uma maneira eficiente de compartilhar valores entre componentes que estão "distantes" na árvore de componentes, sem a necessidade de prop drilling.

WAI-ARIA (Accessible Rich Internet Applications) é uma especificação desenvolvida pelo W3C que define um conjunto de atributos adicionais que podem ser aplicados a elementos HTML para melhorar a acessibilidade de aplicativos da web. O seu objetivo principal é tornar aplicativos da web mais acessíveis para pessoas com deficiência, especialmente aquelas que usam tecnologias assistivas, como leitores de tela.

Prettier é um formatador de código opinativo que enfoca a consistência de estilo, independentemente das preferências individuais dos desenvolvedores.

Linter é uma ferramenta que analisa o código-fonte para detectar erros de programação, violações de estilo, más práticas e outros problemas que podem causar bugs ou reduzir a qualidade do código. A principal função de um linter é ajudar os desenvolvedores a manter um código limpo, consistente e livre de erros.

SSR (Server-Side Rendering) é uma técnica usada no desenvolvimento web onde a renderização das páginas é feita no servidor, em vez de no cliente (navegador). Isso significa que o servidor gera o HTML completo para uma página e o envia ao cliente, em vez de enviar apenas os arquivos JavaScript e deixar que o cliente construa a página.

CSR (Client-Side Rendering) é uma técnica usada quanto a renderização é feita no cliente, com o navegador baixando os arquivos JavaScript e gerando o HTML. Isso pode resultar em tempos de carregamento iniciais mais longos, mas uma navegação subsequente mais rápida.

XMLHttpRequest (XHR) é uma API disponível em navegadores que permite fazer requisições HTTP e HTTPS para servidores web. É uma parte fundamental do Ajax (Asynchronous JavaScript and XML), permitindo que as páginas web sejam atualizadas dinamicamente sem a necessidade de recarregar a página inteira. Com XHR, você pode enviar e receber dados de um servidor web de forma assíncrona.

Lighthouse é uma ferramenta automatizada e de código aberto desenvolvida pelo Google para melhorar a qualidade das páginas web. Ela pode ser executada em qualquer página da web, pública ou que exija autenticação. Lighthouse gera relatórios sobre o desempenho da página, acessibilidade, práticas recomendadas, SEO e PWA (Progressive Web Apps).