Componentização em React

Construindo Interfaces Modernas

Módulo 1: A Essência da Componentização

O que é um Componente?

Pense em LEGOs. Você não constrói um carro com uma única peça. Você usa blocos independentes e reutilizáveis.

Em React, um componente é um bloco de construção da sua interface (UI).

• Encapsula: Lógica, HTML (JSX) e Estilos.
• Independente: Pode ser desenvolvido e testado de forma isolada.
• Reutilizável: Use o mesmo botão em 10 lugares diferentes.

Por que usar Componentes?

• Reutilização: Escreva uma vez, use em todo lugar.
• Manutenibilidade: Corrija um bug em um só lugar.
• Legibilidade: Código mais limpo e organizado.
• Escalabilidade: Facilita o crescimento da aplicação.

Tipos de Componentes: Funcional vs. Classe

Componentes de Classe (Legado)

class BoasVindas extends React.Component {
  render() {
    return <h1>Olá, {this.props.nome}</h1>;
  }
}

Componentes Funcionais (Moderno & Recomendado)

function BoasVindas(props) {
  return <h1>Olá, {props.nome}</h1>;
}

Nosso foco será 100% nos Componentes Funcionais com Hooks!

Módulo 2: Props - Passando Dados

O que são Props?

Props (propriedades) são a forma de passar dados de um componente pai para um componente filho.

• São como argumentos de uma função.
• Fluxo de dados unidirecional (de cima para baixo).
• São somente leitura! O filho não pode modificar as props que recebe.

Props: Exemplo Prático

No componente filho (BoasVindas.js), recebemos props:

// src/components/BoasVindas.js

function BoasVindas(props) {
  return <h1>Bem-vindo(a), {props.nome}!</h1>;
}

export default BoasVindas;

Props: Exemplo Prático

No componente pai (App.js), passamos os dados como atributos:

// src/App.js
import BoasVindas from './components/BoasVindas';

function App() {
  return (
    <div>
      <BoasVindas nome="Ana" />
      <BoasVindas nome="Carlos" />
    </div>
  );
}

Resultado:

<h1>Bem-vindo(a), Ana!</h1>
<h1>Bem-vindo(a), Carlos!</h1>

A Prop Especial: children

E se quisermos passar JSX dentro de um componente, como no HTML?

<MinhaDiv>
  <p>Isso é um parágrafo</p>
  <img src="..." />
</MinhaDiv>

O conteúdo que vai "dentro" do seu componente é acessado através de uma prop especial chamada children. Isso é perfeito para criar componentes "contêineres" genéricos.

children: Exemplo Prático

Vamos criar um componente Card que renderiza qualquer conteúdo dentro dele.

// src/components/Card.js

function Card(props) {
  return (
    <div className="card-container">
      {props.children}
    </div>
  );
}

Agora, usamos o Card para "embrulhar" outros elementos:

// src/App.js
import Card from './components/Card';

function App() {
  return (
    <Card>
      <h1>Título do Card</h1>
      <p>Este é o conteúdo que será renderizado dentro do nosso componente Card.</p>
      <button>Clique Aqui</button>
    </Card>
  );
}

Módulo 3: State - Gerenciando o Estado Interno

O que é State?

Enquanto props vêm de fora, o estado (state) é a informação que um componente gerencia internamente.

• É a "memória" do componente.
• Pode mudar em resposta a ações do usuário.
• Quando o estado muda, o React re-renderiza o componente.

O Hook useState

Usamos o hook useState para adicionar estado a componentes funcionais.

import { useState } from 'react';

// Dentro do componente...
const [valorAtual, funcaoParaAtualizar] = useState(valorInicial);

useState retorna um array com duas coisas:

1. A variável de estado.
2. A função que atualiza essa variável.

useState: Exemplo de um Contador

import React, { useState } from 'react';

function Contador() {
  // A variável 'contagem' guarda o estado.
  const [contagem, setContagem] = useState(0);

  return (
    <div>
      <p>Você clicou {contagem} vezes</p>
      
      {/* setContagem atualiza o estado e causa uma nova renderização */}
      <button onClick={() => setContagem(contagem + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Módulo 4: Ciclo de Vida com useEffect

O que são Efeitos Colaterais?

São ações que interagem com o mundo fora do React.

• Buscar dados de uma API (fetch).
• Manipular o DOM diretamente.
• Adicionar e remover event listeners (scroll, resize).

Para isso, usamos o hook useEffect.

Como useEffect funciona

A função passada para o useEffect executa após a renderização.

useEffect(() => {
  //  Seu código de efeito colateral aqui
}, [arrayDeDependencias]); //  Controla QUANDO o efeito executa

O Array de Dependências é a chave:

• [] Executa só uma vez (após a montagem).
• [estado, props.id] Executa quando estado ou props.id mudam.
• Sem array Executa em toda renderização (CUIDADO!).

useEffect: Exemplo Prático

Atualizando o título da página com o valor do contador.

import React, { useState, useEffect } from 'react';

function ContadorComTitulo() {
  const [contagem, setContagem] = useState(0);

  // Este efeito executa sempre que 'contagem' mudar
  useEffect(() => {
    document.title = `Você clicou ${contagem} vezes`;
  }, [contagem]);

  return (
    <div>
      <p>Você clicou {contagem} vezes</p>
      <button onClick={() => setContagem(contagem + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Módulo 5: Compondo Componentes

A verdadeira força do React: construir UIs complexas combinando componentes simples.

Vamos montar uma lista de tarefas a partir de 3 componentes:

1. ItemTarefa: Um <li> para uma tarefa.
2. ListaTarefas: Uma <ul> que renderiza vários ItemTarefa.
3. App: O componente principal que segura os dados.

Composição: O Código

// ItemTarefa.js
const ItemTarefa = (props) => <li>{props.texto}</li>;

// ListaTarefas.js
const ListaTarefas = (props) => (
  <ul>
    {props.tarefas.map((tarefa, index) => (
      <ItemTarefa key={index} texto={tarefa} />
    ))}
  </ul>
);

// App.js
function App() {
  const [tarefas] = useState(["Estudar React", "Tomar café"]);

  return <ListaTarefas tarefas={tarefas} />;
}

Perguntas?