dev.study #02 - React.js: Fundamentos, Componentes, Props e Hooks ⚛️

React é uma biblioteca JavaScript de código aberto utilizada para construir interfaces de usuário interativas, reutilizáveis e baseadas em componentes.

Desenvolvido originalmente pelo Facebook (atual Meta), o React introduz uma abordagem declarativa para a criação de interfaces, permitindo que a aplicação atualize sua apresentação conforme os dados e estados são modificados.

Neste estudo, vamos explorar seus principais fundamentos e entender como aplicá-los na prática.

01. O que é React?

O React permite dividir uma interface em partes independentes chamadas componentes.

Cada componente representa um elemento da aplicação, como um botão, formulário, menu ou card.

Essa abordagem oferece algumas vantagens:

• Reutilização: o mesmo componente pode ser utilizado em diferentes partes da aplicação.
• Manutenção: alterações podem ser realizadas de forma isolada.
• Organização: a interface é dividida em estruturas menores.
• Interatividade: componentes podem reagir às ações do usuário e às mudanças de dados.

React é uma biblioteca, não um framework completo. Funcionalidades como roteamento e determinadas estratégias de carregamento de dados dependem da arquitetura e das ferramentas escolhidas.

02. JSX — JavaScript XML

JSX é uma extensão de sintaxe que permite escrever marcação semelhante ao HTML dentro do JavaScript.

function Welcome() { const name = "Developer"; return <h1>Hello, {name}! 👋</h1>; } 

As chaves {} permitem inserir expressões JavaScript no JSX.

Algumas regras importantes:

• Retornar um único elemento raiz ou utilizar fragments (<>...</>).
• Utilizar className no lugar de class.
• Fechar todas as tags.
• Utilizar camelCase em propriedades como onClick.

O JSX é transformado pelas ferramentas de compilação para que o React possa utilizá-lo.

03. Components — Componentes

Componentes são funções JavaScript que retornam elementos React.

function Button() { return ( <button className="btn"> Click me </button> ); } export default Button; 

Para utilizar esse componente:

import Button from "./Button"; function App() { return ( <main> <h1>React Study</h1> <Button /> </main> ); } 

Conceito principal: componentes devem possuir responsabilidades bem definidas e podem ser combinados para construir interfaces mais complexas.

04. Props — Propriedades

Props permitem passar informações de um componente pai para um componente filho.

function UserCard({ name, role }) { return ( <div className="card"> <h2>{name}</h2> <p>{role}</p> </div> ); } 

Utilização:

<UserCard name="Pricila" role="Software Developer" /> 

Os valores recebidos são utilizados para personalizar o componente.

Importante: props são imutáveis do ponto de vista do componente que as recebe. Para modificar informações ao longo do tempo, podemos utilizar estados.

05. State — Gerenciamento de estado

O estado representa informações que podem ser alteradas durante a execução da aplicação.

Para gerenciar um estado local, podemos utilizar o Hook useState.

import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); function increment() { setCount(previous => previous + 1); } return ( <div> <p>Count: {count}</p> <button onClick={increment}> Increment </button> </div> ); } 

Nesse exemplo:

• count: valor atual do estado.
• setCount: função responsável por solicitar a atualização.
• useState(0): inicializa o estado com zero.
• onClick: registra o evento de clique.

Quando o estado muda, o React agenda uma nova renderização do componente.

06. Conditional Rendering

Renderização condicional significa apresentar elementos diferentes dependendo de determinada condição.

function Dashboard({ isLoggedIn }) { return ( <div> {isLoggedIn ? ( <h2>Welcome back!</h2> ) : ( <h2>Please log in.</h2> )} </div> ); } 

O operador ternário permite escolher qual conteúdo será renderizado.

Esse recurso é muito utilizado em autenticação, carregamento de dados, permissões e estados vazios.

07. Lists and Keys

O React permite renderizar listas utilizando métodos JavaScript como map().

const technologies = [ { id: 1, name: "React" }, { id: 2, name: "JavaScript" }, { id: 3, name: "TypeScript" } ]; function TechnologyList() { return ( <ul> {technologies.map(tech => ( <li key={tech.id}> {tech.name} </li> ))} </ul> ); } 

A propriedade key ajuda o React a identificar os elementos de uma lista entre renderizações.

Prefira identificadores estáveis e únicos entre os elementos irmãos, principalmente quando a lista pode sofrer alterações.

08. useEffect — Sincronização com sistemas externos

O Hook useEffect é utilizado para sincronizar um componente com sistemas externos, como eventos do navegador, conexões e APIs externas.

import { useEffect, useState } from "react"; function WindowWidth() { const [width, setWidth] = useState( window.innerWidth ); useEffect(() => { function handleResize() { setWidth(window.innerWidth); } window.addEventListener("resize", handleResize); return () => { window.removeEventListener( "resize", handleResize ); }; }, []); return <p>Width: {width}px</p>; } 

Nesse exemplo, useEffect registra um listener para acompanhar o redimensionamento da janela.

A função retornada realiza a limpeza do listener quando necessário.

Observação: nem toda transformação de dados exige useEffect. Cálculos que dependem apenas de props e estados geralmente podem ser realizados diretamente durante a renderização.

09. Virtual DOM e Renderização

O React utiliza uma representação dos elementos da interface em memória, frequentemente associada ao conceito de Virtual DOM.

Quando ocorre uma atualização:

1. O React renderiza novamente os componentes necessários.
2. Compara a nova estrutura de elementos com a anterior durante a reconciliação.
3. Determina quais mudanças precisam ser aplicadas.
4. Realiza as atualizações necessárias no ambiente de renderização.

Esse processo ajuda a organizar as atualizações da interface sem exigir manipulação manual do DOM para cada alteração.

Entretanto, o Virtual DOM não significa que toda aplicação React será automaticamente mais rápida que uma implementação em JavaScript puro.

10. Criando um projeto com Vite

O Vite é uma ferramenta que permite criar e executar projetos React com uma configuração inicial simples.

Para criar um projeto:

npm create vite@latest react-study -- --template react 

Entre no diretório:

cd react-study 

Instale as dependências:

npm install 

Inicie o servidor de desenvolvimento:

npm run dev 

A aplicação estará acessível pelo endereço informado no terminal.

Para executar esse processo, é necessário ter uma versão do Node.js compatível com os requisitos do Vite instalado.

11. React x JavaScript Vanilla

Ambas as abordagens são válidas. A escolha depende da complexidade, dos requisitos e da arquitetura da aplicação.

12. Resumo dos conceitos

🌷 Conclusão

Estudar React permite compreender uma abordagem moderna para a construção de interfaces web.

Os conceitos de componentização, propriedades, gerenciamento de estado e renderização declarativa são fundamentais para desenvolver aplicações organizadas e escaláveis.

Mais importante do que memorizar a sintaxe é compreender o fluxo de dados, as responsabilidades dos componentes e a maneira como o React reage às mudanças de estado.

Com esses fundamentos, é possível avançar para assuntos como roteamento, gerenciamento de estado global, custom Hooks, consumo de APIs e otimização de desempenho.

📚 Referências

• React — Official Documentation
• React — Quick Start
• React — Built-in Hooks
• Vite — Getting Started

dev.study — Anotações e estudos sobre desenvolvimento de software. ✨