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

Característica	JavaScript Vanilla	React
Interface	Manipulação direta do DOM	Componentes declarativos
Reutilização	Funções e módulos	Componentes e Hooks
Estado	Gerenciamento manual	Hooks e outras soluções
Atualização visual	Controlada pelo desenvolvedor	Coordenada pelo React
Dependências	Pode funcionar sem bibliotecas	Requer React

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

12. Resumo dos conceitos

Conceito	Descrição
React	Biblioteca JavaScript para interfaces
JSX	Sintaxe de marcação utilizada com JavaScript
Component	Unidade reutilizável da interface
Props	Informações recebidas por um componente
State	Dados que podem mudar ao longo do tempo
useState	Hook para gerenciar estado
useEffect	Hook para sincronização externa
Conditional Rendering	Exibição baseada em condições
Keys	Identificadores de elementos em listas

🌷 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. ✨