Resumo React

Componente React — estrutura básica

// Um componente é uma função que retorna JSX (HTML + JS misturados)
// Deve começar com letra maiúscula
function MeuComponente() {
  return (
    <div>
      <h1>Olá mundo</h1>
    </div>
  )
}
export default MeuComponente  // exporta para usar em outro arquivo

// Importando e usando:
import MeuComponente from './MeuComponente'
<MeuComponente />

useState — estado local

import { useState } from 'react'

function Contador() {
  // useState(valorInicial) retorna [valorAtual, funçãoParaAtualizar]
  const [contador, setContador] = useState(0)
  const [nome, setNome]         = useState("")
  const [lista, setLista]       = useState([])
  const [user, setUser]         = useState({})

  // Para atualizar: SEMPRE usar o setter, nunca modificar direto
  return <button onClick={() => setContador(contador + 1)}>{contador}</button>
}

Props — passando dados entre componentes

// Pai passa dados via atributos (props)
<CartaoUsuario nome="João" idade={21} />

// Filho recebe como parâmetro
function CartaoUsuario(props) {
  return <p>{props.nome} — {props.idade} anos</p>
}

// Ou com destructuring direto (mais comum):
function CartaoUsuario({ nome, idade }) {
  return <p>{nome} — {idade} anos</p>
}

map() — renderizando listas

const produtos = [
  { id: 1, nome: 'Mouse' },
  { id: 2, nome: 'Teclado' },
]

// map transforma cada item do array em JSX
// key={item.id} é obrigatório — usa o ID único do banco
<ul>
  {produtos.map((item) => (
    <li key={item.id}>{item.nome}</li>
  ))}
</ul>

Renderização condicional

// && → renderiza só se a condição for verdadeira
{isLoading && <p>Carregando...</p>}
{erro && <p>Deu erro</p>}

// Ternário → um ou outro
{logado ? <Dashboard /> : <Login />}

Destructuring — extraindo valores de objetos

// Sem destructuring (verboso)
const nome  = usuario.nome
const email = usuario.email

// Com destructuring (compacto) — mesmo resultado
const { nome, email } = usuario

// Muito usado em eventos de formulário:
const { name, value } = event.target  // pega name e value do input

// E em arrays (useState, hooks customizados):
const [dados, setDados] = useState([])

Spread operator — copiando objetos

// ... (três pontos) copia todas as propriedades de um objeto
const original = { nome: 'João', email: 'j@j.com' }

// Copia tudo e substitui só o email
const atualizado = { ...original, email: 'novo@j.com' }
// → { nome: 'João', email: 'novo@j.com' }

// É exatamente o que o onChange do formulário faz:
// copia o form inteiro e atualiza só o campo que mudou
setForm({ ...form, [name]: value })

Import / Export

// Export padrão — um por arquivo, importado com qualquer nome
export default MinhaFuncao
import MinhaFuncao from './MinhaFuncao'

// Export nomeado — vários por arquivo, importado com chaves {}
export function soma() { ... }
export const PI = 3.14
import { soma, PI } from './utils'

// Biblioteca externa (node_modules)
import axios from 'axios'
import { useState, useEffect } from 'react'

Arrow function — funções curtas

// Função normal
function somar(a, b) { return a + b }

// Arrow function equivalente
const somar = (a, b) => a + b

// Com corpo (mais de uma linha)
const buscar = async () => {
  const res = await axios.get('...')
  setDados(res.data)
}

// Inline em JSX — muito comum
<button onClick={() => setAberto(true)}>Abrir</button>

Métodos HTTP — CRUD

Status Codes — o que o servidor responde

Anatomia de uma requisição

• URL / Endpoint: endereço do recurso — ex: https://api.com/usuarios/1
• Headers: metadados enviados junto — Authorization, Content-Type: application/json
• Body: dados enviados ao servidor (só POST / PUT / PATCH) — sempre em JSON
• JSON: formato de dados padrão — { "nome": "João", "idade": 21 }

Instalação

npm install axios

Antes de tudo: o que é uma operação assíncrona?

GET — Buscar dados (os dois estilos)

import axios from 'axios'

// ── Estilo 1: .then() / .catch() ──────────────────────────────────
// .then  → executado quando a resposta chega com sucesso
// .catch → executado quando ocorre qualquer erro
axios.get('https://api.com/produtos')
  .then((response) => {
    console.log(response.data)       // os dados ficam em response.data
  })
  .catch((error) => {
    console.log(error.response.data)
  })

// ── Estilo 2: async / await ───────────────────────────────────────
// "async" marca a função como assíncrona (obrigatório para usar await)
// "await" pausa aqui até a Promise resolver — sem travar o browser
// "try/catch" captura erros
const buscar = async () => {
  try {
    const response = await axios.get('https://api.com/produtos')
    console.log(response.data)
  } catch (error) {
    console.log(error)
  }
}

POST — Criar (body como 2º argumento)

axios.post('https://api.com/usuarios', {
  nome: 'João',
  email: 'joao@email.com',
  senha: '123456'
}).then((res) => console.log(res.data))

PUT — Atualizar (id na URL, dados no body)

axios.put('https://api.com/usuarios/1', {
  nome: 'João Atualizado',
  email: 'novo@email.com'
}).then((res) => console.log(res.data))

DELETE — Deletar (id na URL, sem body)

axios.delete('https://api.com/usuarios/1')
  .then(() => console.log('Deletado com sucesso'))

Enviando Headers — ex: token JWT

const token = localStorage.getItem('token')

// GET com header de autenticação
axios.get('/api/rota-privada', {
  headers: { Authorization: `Bearer ${token}` }
})

// POST com body + header (body é 2º arg, config é 3º)
axios.post('/api/posts', { titulo: 'Meu post' }, {
  headers: { Authorization: `Bearer ${token}` }
})

Axios dentro de um componente React

import { useState, useEffect } from 'react'
import axios from 'axios'

export function TelaProdutos() {
  const [produtos, setProdutos] = useState([])

  useEffect(() => {
    axios.get('/api/produtos')
      .then((res) => setProdutos(res.data))
  }, [])  // [] = executa uma única vez ao montar

  return (
    <ul>
      {produtos.map((p) => <li key={p.id}>{p.nome}</li>)}
    </ul>
  )
}

async/await dentro do useEffect — ATENÇÃO

// ❌ ERRADO
useEffect(async () => { ... }, [])

// ✅ CORRETO — função async interna
useEffect(() => {
  const buscar = async () => {
    try {
      const res = await axios.get('/api/dados')
      setDados(res.data)
    } catch (err) {
      console.log('Erro:', err)
    }
  }
  buscar()  // define e já chama
}, [])

useEffect — array de dependências

// Sem array — roda TODA vez que o componente renderizar
// ❌ Quase sempre causa loop infinito:
// setDados() → re-renderiza → useEffect roda → setDados() → loop
useEffect(() => { axios.get('...').then((r) => setDados(r.data)) })

// Array vazio [] — roda UMA VEZ quando o componente aparece na tela
// ✅ Ideal para busca inicial: "ao entrar na tela, carrega os produtos"
useEffect(() => { axios.get('/api/produtos').then(...) }, [])

// [id] — roda na montagem E toda vez que "id" mudar
// ✅ Ideal quando a tela depende de algo da URL ou de um estado:
// ex: usuário clica no produto 1, depois no produto 2 → id muda → re-busca
useEffect(() => { axios.get(`/api/produtos/${id}`).then(...) }, [id])

// [a, b] — roda quando "a" OU "b" mudar
// ✅ Ideal para filtros combinados: re-busca quando qualquer filtro muda
useEffect(() => { axios.get(`/api/produtos?cat=${cat}&ordem=${ordem}`).then(...) }, [cat, ordem])

LocalStorage — persistência no browser

// Salvar
localStorage.setItem('chave', 'valor')

// Ler
const valor = localStorage.getItem('chave')  // → "valor" (sempre string)

// Remover
localStorage.removeItem('chave')

// Objetos: converter para string e voltar
localStorage.setItem('user', JSON.stringify({ id: 1, nome: 'João' }))
const user = JSON.parse(localStorage.getItem('user'))

Regras obrigatórias

• Nome começa com use — obrigatório (ex: useForm, useRequestData)
• Mesmas regras dos hooks nativos: não chamar dentro de if, loops ou funções aninhadas
• Crie quando: mesma lógica em 2+ componentes, ou componente fica grande demais

useRequestData(url) — hook genérico para GET

// hooks/useRequestData.js
// Encapsula: chamada axios + estado de loading + estado de erro
import { useState, useEffect } from "react"
import axios from "axios"

export const useRequestData = (url) => {
  const [data, setData]           = useState(undefined)  // undefined = ainda não chegou
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError]         = useState("")

  useEffect(() => {
    setIsLoading(true)
    axios.get(url)
      .then((res) => { setIsLoading(false); setData(res.data) })
      .catch((err) => { setIsLoading(false); setError(err) })
  }, [url])

  return [data, isLoading, error]
}

// Usando em qualquer componente:
const [produtos, isLoading, error] = useRequestData("/api/produtos")
const [usuario, isLoading, error]  = useRequestData("/api/usuario")

Tratando as 4 situações na tela

return (
  <div>
    {isLoading &&
      <p>Carregando...</p>}

    {!isLoading && error &&
      <p>Ocorreu um erro.</p>}

    {!isLoading && data && data.length > 0 && (
      <ul>{data.map((item) => <li key={item.id}>{item.nome}</li>)}</ul>
    )}

    {!isLoading && data && data.length === 0 &&
      <p>Nenhum item encontrado.</p>}
  </div>
)

Instalação

npm install react-router-dom

Componentes e hooks — visão geral

Estrutura base — App.jsx

import { BrowserRouter } from "react-router-dom"

function App() {
  return (
    <BrowserRouter>
      <Menu />       {/* fora do Routes → aparece em todas as páginas */}
      <AppRoutes />
    </BrowserRouter>
  )
}

routes/AppRoutes.jsx

import { Routes, Route } from "react-router-dom"

function AppRoutes() {
  return (
    <Routes>
      <Route path="/"              element={<HomePage />}           />
      <Route path="/sobre"        element={<SobrePage />}          />
      <Route path="/login"        element={<LoginPage />}          />
      <Route path="/produtos"     element={<ProdutosPage />}       />
      <Route path="/produtos/:id" element={<ProdutoDetalhesPage />} />
      <Route path="*"             element={<NotFoundPage />}        />
    </Routes>
  )
}

Link vs NavLink — quando usar cada um

import { Link, NavLink } from "react-router-dom"

// Link → qualquer lugar fora de menu (cards, botões, listas)
<Link to="/sobre">Sobre</Link>

// NavLink → menus de navegação — adiciona classe "active" na rota atual
<NavLink
  to="/sobre"
  className={({ isActive }) => isActive ? 'menu-ativo' : ''}
>Sobre</NavLink>

<NavLink
  to="/sobre"
  style={({ isActive }) => ({
    color:      isActive ? '#61dafb' : 'white',
    fontWeight: isActive ? 'bold'    : 'normal'
  })}
>Sobre</NavLink>

useNavigate — navegação por código

const navigate = useNavigate()

navigate("/rota")                        // vai para /rota
navigate(-1)                             // volta (como botão ←)
navigate("/rota", { replace: true })    // vai sem adicionar ao histórico

Path Params — useParams()

// 1. Declarar a rota — dois pontos marcam parâmetro dinâmico
<Route path="/produtos/:id" element={<ProdutoPage />} />

// 2. Ler no componente
const { id } = useParams()   // /produtos/42 → id = "42" (sempre string)

useEffect(() => {
  axios.get(`/api/produtos/${id}`).then((res) => setProduto(res.data))
}, [id])  // re-busca quando o id muda

// 3. Navegar para a rota
<Link to={`/produtos/${produto.id}`}>Ver detalhes</Link>

Search Params — useSearchParams()

// URL: /produtos?busca=mouse&pagina=2
const [searchParams] = useSearchParams()
const busca  = searchParams.get("busca")   // → "mouse" | null
const pagina = searchParams.get("pagina")  // → "2"

Organização de arquivos recomendada

src/
  ├── components/    → Menu, Button, Card (reutilizáveis)
  ├── pages/         → HomePage, LoginPage, ProdutosPage...
  ├── routes/        → AppRoutes.jsx, coordinator.js
  ├── hooks/         → useRequestData.js, useForm.js
  ├── contexts/      → GlobalState.js, GlobalStateContext.js
  ├── App.jsx
  └── main.jsx

Coordinator — centralizando as strings de rota

// routes/coordinator.js
export function goToHome(navigate)               { navigate("/") }
export function goToLogin(navigate)              { navigate("/login") }
export function goToProductDetails(navigate, id) { navigate(`/produtos/${id}`) }
export function goBack(navigate)                 { navigate(-1) }

JWT — JSON Web Token

• String com 3 partes separadas por ponto: Header.Payload.Assinatura
• O Payload contém: id, email, role (permissão), data de expiração
• O back-end assina com chave secreta — se alguém alterar o token, a assinatura fica inválida
• Não precisa de sessão no servidor — o token carrega tudo

Cookies vs LocalStorage

Fluxo completo com LocalStorage

// 1. LOGIN — receber e salvar o token
const handleLogin = async () => {
  try {
    const res = await axios.post('/api/login', { email, senha })
    localStorage.setItem('token', res.data.token)
    navigate('/', { replace: true })  // replace → sem volta para /login
  } catch (err) { alert('Credenciais inválidas') }
}

// 2. REQUISIÇÃO PROTEGIDA — enviar token no header
const token = localStorage.getItem('token')
axios.get('/api/meus-dados', {
  headers: { Authorization: `Bearer ${token}` }
})

// 3. ROTA PROTEGIDA — redirecionar se não tiver token
useEffect(() => {
  if (!localStorage.getItem('token')) navigate('/login')
}, [])

// 4. LOGOUT — apagar e redirecionar
const logout = () => {
  localStorage.removeItem('token')
  navigate('/login')
}

Formulário completo com handler unificado

function Login() {
  // Um objeto para todos os campos — não um useState por campo
  const [form, setForm] = useState({ email: "", password: "" })

  // Um único handler para todos os inputs
  // event.target.name = qual campo | event.target.value = o que foi digitado
  const onChange = (event) => {
    const { name, value } = event.target
    setForm({ ...form, [name]: value })  // [name] = chave dinâmica
  }

  const handleSubmit = (event) => {
    event.preventDefault()  // cancela o reload padrão do HTML — SEMPRE necessário
    axios.post('/api/login', form).then(...)
  }

  return (
    <form onSubmit={handleSubmit}>  {/* onSubmit na <form>, não onClick no botão */}
      <input name="email"    value={form.email}    onChange={onChange} type="email"    required />
      <input name="password" value={form.password} onChange={onChange} type="password" required />
      <button type="submit">Entrar</button>
    </form>
  )
}

Validações HTML nativas

REGEX — padrões para o atributo pattern

<input pattern="[A-Za-z]{3,}"       />  // letras (maiú ou minú), mínimo 3
<input pattern="[0-9]{8}"          />  // exatamente 8 dígitos
<input pattern=".{6,}"             />  // qualquer coisa, mínimo 6 chars
<input pattern="[0-9]{5}-[0-9]{3}" />  // CEP: 12345-678

Custom Hook useForm()

// hooks/useForm.js
const useForm = (initialState) => {
  const [form, setForm] = useState(initialState)
  const onChange = (event) => {
    const { name, value } = event.target
    setForm({ ...form, [name]: value })
  }
  return [form, onChange]
}

// Usando:
const [form, onChange] = useForm({ email: "", password: "" })
// Cada input: name="campo"  value={form.campo}  onChange={onChange}

Problemas com estados locais em apps grandes

Props Drilling — visualizando o problema

// ❌ Filho1 e Filho2 recebem "carrinho" só para repassar — não usam
<App carrinho={carrinho}>
  <Filho1 carrinho={carrinho}>        {// não usa, só repassa}
    <Filho2 carrinho={carrinho}>      {// não usa, só repassa}
      <Filho3 carrinho={carrinho} />  {// usa de verdade}
    </Filho2>
  </Filho1>
</App>

Estado Global — como deve funcionar

• Uma camada de dados única, acessada diretamente por qualquer componente
• Fluxo: API ↔ Estado Global ↔ Componentes (sem props)
• Componentes não chamam a API diretamente — pedem ao estado global

Opções de implementação

Os 3 passos — criar, fornecer e consumir

import React, { useState, useContext } from "react"

// PASSO 1: Criar o contexto (geralmente em arquivo separado)
export const MeuContexto = React.createContext()

// PASSO 2: Provider — envolve quem vai precisar dos dados
// Qualquer nível dentro dele pode acessar o "value"
function App() {
  const [cor, setCor] = useState("azul")
  return (
    <MeuContexto.Provider value={{ cor, setCor }}>
      <ComponenteA />
      <ComponenteB />
    </MeuContexto.Provider>
  )
}

// PASSO 3: Consumer — acessa em qualquer nível, sem prop drilling
function ComponenteB() {
  const { cor, setCor } = useContext(MeuContexto)  // recebe o value
  return <p>Cor: {cor}</p>
}

Onde o Context aparece na prática

• Dados do usuário logado: nome, foto, permissões em qualquer tela
• Tema visual (dark/light) — o ThemeProvider do Material UI é um Context
• Idioma — textos traduzidos disponíveis globalmente
• O próprio <BrowserRouter> usa Context para que useNavigate e useParams funcionem em qualquer lugar

Os 3 arquivos da arquitetura

GlobalStateContext.js

import React from "react"
const GlobalStateContext = React.createContext()
export default GlobalStateContext

GlobalState.js — coração do sistema

import React, { useState } from "react"
import axios from "axios"
import GlobalStateContext from "./GlobalStateContext"

const GlobalState = (props) => {

  // ── estados ────────────────────────────────────────────
  const [produtos, setProdutos] = useState([])
  const [usuario, setUsuario]   = useState({})
  const [carrinho, setCarrinho] = useState([])

  // ── requisições ────────────────────────────────────────
  const getProdutos = () => {
    axios.get('/api/produtos').then((res) => setProdutos(res.data))
  }
  const getUsuario = () => {
    axios.get('/api/usuario').then((res) => setUsuario(res.data))
  }

  // ── 3 grupos para facilitar o consumo ─────────────────
  const states   = { produtos, usuario, carrinho }
  const setters  = { setProdutos, setUsuario, setCarrinho }
  const requests = { getProdutos, getUsuario }

  return (
    <GlobalStateContext.Provider value={{ states, setters, requests }}>
      {props.children}
    </GlobalStateContext.Provider>
  )
}
export default GlobalState

App.jsx — GlobalState como wrapper mais externo

function App() {
  return (
    <GlobalState>
      <BrowserRouter>
        <Menu />
        <AppRoutes />
      </BrowserRouter>
    </GlobalState>
  )
}

Consumindo em qualquer componente

import { useContext, useEffect } from "react"
import GlobalStateContext from "../contexts/GlobalStateContext"

function TelaProdutos() {
  const { states, setters, requests } = useContext(GlobalStateContext)

  const { produtos }    = states
  const { getProdutos } = requests

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

  return (
    <ul>{produtos.map((p) => <li key={p.id}>{p.nome}</li>)}</ul>
  )
}