Learning React

1. O React simplifica o desenvolvimento de interfaces com componentes reutilizáveis.

O objetivo deste livro é evitar confusões no processo de aprendizagem, organizando as informações em uma sequência: um roteiro de aprendizado.

Arquitetura baseada em componentes. A principal força do React reside em sua arquitetura baseada em componentes, que permite aos desenvolvedores dividir interfaces complexas em partes menores, gerenciáveis e reutilizáveis. Esses componentes encapsulam tanto a estrutura (HTML) quanto o comportamento (JavaScript) de um elemento da interface, facilitando a compreensão e a manutenção.

Benefícios da reutilização. Componentes reutilizáveis promovem a eficiência do código, reduzem a redundância e melhoram a consistência em toda a aplicação. Ao criar uma biblioteca de componentes bem definidos, os desenvolvedores podem montar rapidamente interfaces complexas com mínimo esforço. Por exemplo, um componente de botão pode ser utilizado em toda a aplicação com diferentes estilos e funcionalidades, garantindo uma experiência do usuário consistente.

Escalabilidade e manutenibilidade. A abordagem baseada em componentes também melhora a escalabilidade e a manutenibilidade das aplicações React. Quando são necessárias mudanças, os desenvolvedores podem se concentrar em modificar componentes individuais sem afetar toda a aplicação. Essa modularidade facilita a adição de novas funcionalidades, a correção de bugs e a refatoração do código.

2. JSX oferece uma sintaxe concisa para criar elementos React.

Sim, no React, você escreve código que se parece com HTML diretamente no seu código JavaScript.

Sintaxe baseada em tags. JSX (JavaScript XML) é uma extensão de sintaxe que permite aos desenvolvedores escrever código semelhante ao HTML diretamente em seus arquivos JavaScript. Isso proporciona uma maneira mais intuitiva e legível de definir elementos React, facilitando a visualização da estrutura da interface.

Benefícios do JSX:

• Leitura aprimorada: O código JSX é mais fácil de entender e manter em comparação ao código JavaScript puro para criar elementos React.
• Sintaxe concisa: O JSX reduz a quantidade de código necessária para definir elementos da interface, tornando o desenvolvimento mais rápido e eficiente.
• Familiaridade: O JSX se assemelha ao HTML, facilitando o aprendizado e o uso para desenvolvedores com experiência em desenvolvimento web.

Transformação Babel. O código JSX não é compreendido diretamente pelos navegadores. Ele precisa ser transformado em código JavaScript padrão usando uma ferramenta como o Babel. Esse processo de transformação converte as tags JSX em chamadas React.createElement(), que o navegador pode então interpretar e renderizar.

3. A programação funcional melhora a legibilidade e testabilidade do código React.

Um efeito colateral interessante de trabalhar com o React é que isso pode torná-lo um desenvolvedor JavaScript mais forte, promovendo padrões que são legíveis, reutilizáveis e testáveis.

Ênfase em funções puras. Os princípios da programação funcional, como a imutabilidade e as funções puras, se alinham bem com a arquitetura baseada em componentes do React. Funções puras, que sempre retornam a mesma saída para uma determinada entrada e não têm efeitos colaterais, tornam o código mais previsível e mais fácil de testar.

Benefícios da programação funcional no React:

• Leitura aprimorada: O código funcional tende a ser mais conciso e mais fácil de entender.
• Testabilidade aprimorada: Funções puras são naturalmente testáveis, pois sua saída é determinada exclusivamente pela sua entrada.
• Reutilização aumentada: Componentes funcionais podem ser facilmente compostos e reutilizados em toda a aplicação.

Transformações de dados. A programação funcional enfatiza a transformação de dados de uma forma para outra usando funções. Essa abordagem promove a imutabilidade e evita a modificação direta dos dados, levando a um código mais previsível e manutenível.

4. Hooks permitem gerenciamento de estado e efeitos colaterais em componentes funcionais.

Mais recentemente, em 2019, vimos o lançamento dos Hooks, uma nova maneira de adicionar e compartilhar lógica com estado entre componentes.

Estado e efeitos colaterais. Os Hooks são um recurso no React que permite que componentes funcionais gerenciem estado e realizem efeitos colaterais, que anteriormente eram possíveis apenas em componentes de classe. Isso simplifica a lógica dos componentes e promove a reutilização do código.

Hooks comumente usados:

• useState: Gerencia o estado do componente.
• useEffect: Realiza efeitos colaterais, como busca de dados ou manipulação do DOM.
• useContext: Acessa valores do contexto do React.
• useRef: Cria referências persistentes a elementos do DOM ou valores.

Hooks personalizados. Hooks personalizados permitem que os desenvolvedores extraiam e reutilizem lógica com estado entre múltiplos componentes. Isso promove a modularidade do código e reduz a redundância. Por exemplo, um Hook personalizado pode ser criado para lidar com validação de entrada de formulários ou busca de dados, e depois reutilizado em diferentes componentes que requerem funcionalidade semelhante.

5. O React Router facilita a navegação em aplicações de página única.

Afinal, o React foi apresentado como uma biblioteca: preocupada em implementar um conjunto específico de funcionalidades, e não em fornecer uma ferramenta para cada caso de uso.

Roteamento do lado do cliente. O React Router é uma biblioteca que habilita o roteamento do lado do cliente em aplicações de página única (SPAs). Ele permite que os desenvolvedores definam rotas que mapeiam URLs para componentes específicos, proporcionando uma experiência de navegação contínua sem a necessidade de recarregar a página inteira.

Componentes principais do React Router:

• BrowserRouter: Fornece o contexto de roteamento para a aplicação.
• Route: Define um mapeamento entre um caminho de URL e um componente.
• Link: Cria links de navegação que atualizam a URL sem acionar um recarregamento completo da página.
• useParams: Acessa parâmetros da URL atual.

Roteamento dinâmico. O React Router suporta roteamento dinâmico, que permite que os desenvolvedores definam rotas com parâmetros que podem ser usados para passar dados para os componentes. Isso é útil para criar interfaces dinâmicas que exibem conteúdo diferente com base na URL.

6. Testes garantem a confiabilidade dos componentes React e a qualidade do código.

Um efeito colateral interessante de trabalhar com o React é que isso pode torná-lo um desenvolvedor JavaScript mais forte, promovendo padrões que são legíveis, reutilizáveis e testáveis.

Importância dos testes. Os testes são um aspecto crucial do desenvolvimento de software que garante a confiabilidade e a qualidade dos componentes React. Testes unitários verificam se componentes individuais funcionam como esperado, enquanto testes de integração garantem que diferentes partes da aplicação funcionem juntas de forma harmoniosa.

Frameworks de teste populares:

• Jest: Um framework de teste JavaScript que vem pré-configurado com o Create React App.
• React Testing Library: Uma biblioteca que fornece utilitários para testar componentes React de uma maneira centrada no usuário.
• Enzyme: Uma utilidade de teste JavaScript para React que facilita a afirmação, manipulação e navegação na saída dos seus componentes React.

Desenvolvimento Orientado a Testes (TDD). TDD é uma prática de desenvolvimento onde os testes são escritos antes do código. Essa abordagem ajuda os desenvolvedores a esclarecer requisitos, projetar um código melhor e garantir que toda a funcionalidade seja testada de forma abrangente.

7. Estratégias de busca de dados são cruciais para aplicações React dinâmicas.

Com a web moderna, precisamos realizar tarefas assíncronas.

Operações assíncronas. Aplicações web modernas frequentemente precisam buscar dados de APIs externas ou realizar outras operações assíncronas. O React fornece várias técnicas para lidar com essas operações, incluindo:

Técnicas de busca de dados:

• Fetch API: Uma API JavaScript embutida para fazer requisições HTTP.
• Axios: Uma biblioteca de terceiros popular para fazer requisições HTTP.
• useEffect Hook: Usado para realizar efeitos colaterais, como busca de dados, em componentes funcionais.

Gerenciamento de estados de carregamento e erro. Ao buscar dados, é importante lidar com estados de carregamento e erro de forma adequada. Isso pode ser alcançado usando variáveis de estado para rastrear o status da requisição e renderizando elementos de interface apropriados com base no estado atual.

8. Suspense lida com operações assíncronas para uma melhor experiência do usuário.

Mais recentemente, em 2019, vimos o lançamento dos Hooks, uma nova maneira de adicionar e compartilhar lógica com estado entre componentes.

Busca de dados declarativa. O Suspense é um recurso do React que permite que os desenvolvedores especifiquem de forma declarativa como lidar com operações assíncronas, como busca de dados. Ele fornece uma maneira de suspender a renderização até que os dados estejam disponíveis, melhorando a experiência do usuário ao prevenir piscadas ou interfaces incompletas.

Componentes principais do Suspense:

• Componente Suspense: Envolve componentes que podem suspender a renderização.
• Prop fallback: Especifica a interface a ser renderizada enquanto o componente está suspenso.
• Função lazy: Usada para carregar componentes de forma assíncrona.

Limites de erro. Limites de erro são componentes que podem capturar erros JavaScript em qualquer lugar na árvore de componentes filhos, registrar esses erros e exibir uma interface de fallback. Eles fornecem uma maneira de evitar que erros derrubem toda a aplicação e melhoram a experiência do usuário ao fornecer mensagens de erro informativas.

9. O Webpack otimiza aplicações React para produção.

Como exemplo, vamos olhar para uma função de seta com alguns argumentos padrão:

Empacotamento de módulos. O Webpack é um empacotador de módulos que pega todos os diferentes arquivos em um projeto JavaScript (JavaScript, CSS, imagens, etc.) e os transforma em um único arquivo ou um conjunto de arquivos que podem ser implantados em um servidor web.

Benefícios do Webpack:

• Divisão de código: Divide o código em pedaços menores que podem ser carregados sob demanda, melhorando o tempo de carregamento inicial.
• Minificação: Remove caracteres desnecessários do código, reduzindo o tamanho do arquivo.
• Otimização de ativos: Otimiza imagens e outros ativos para melhorar o desempenho.
• Substituição de Módulo Quente (HMR): Permite que os desenvolvedores vejam mudanças no código sem atualizar a página.

Loaders e plug-ins. O Webpack usa loaders para transformar diferentes tipos de arquivos e plug-ins para realizar tarefas adicionais, como minificação e divisão de código.

10. O ESLint e o Prettier mantêm a consistência e legibilidade do código.

Muitos dos recursos que estão incluídos na sintaxe mais recente do JavaScript estão presentes porque apoiam técnicas de programação funcional.

Linting de código. O ESLint é uma ferramenta que analisa o código JavaScript em busca de erros potenciais, violações de estilo e outros problemas. Ele ajuda os desenvolvedores a manter a qualidade e a consistência do código, aplicando padrões de codificação.

Formatação de código. O Prettier é um formatador de código opinativo que formata automaticamente o código de acordo com um conjunto de regras predefinidas. Ele ajuda os desenvolvedores a manter a legibilidade e a consistência do código, eliminando debates sobre estilo de código.

Benefícios do ESLint e do Prettier:

• Qualidade de código aprimorada: O ESLint ajuda a identificar erros potenciais e a aplicar padrões de codificação.
• Leitura aumentada: O Prettier garante que o código seja formatado de maneira consistente, facilitando a leitura e compreensão.
• Redução do tempo de revisão de código: Ao automatizar a formatação e o linting do código, o ESLint e o Prettier reduzem o tempo gasto em revisões de código.

Última atualização: February 23, 2025