Fundamentos de React

• Q1-Q3: componentes de mensagem com props e default.
• Q4-Q5: telas de login e criação de conta.
• Q6-Q8: cartões/listas de contato e endereço.
• Q9-Q12: fluxo com API, useState, useEffect e listas.
• Q13-Q16: categorias/refeições e surpresa com APIs externas.

• Componentes React e reutilização.
• Props para dados de entrada e parametrização.
• useState para dado mutável local.
• useEffect para carregamento inicial e dependente.
• map para listas com key estável.
• Renderização condicional para carregamento, erro e vazio.
• Inputs e selects controlados.
• fetch + response.json().
• Dado derivado versus estado redundante.
• CSS suficiente para legibilidade e organização visual.

// Exemplo de dado derivado
const usuarioSelecionado =
  usuarios.find((u) => String(u.id) === usuarioId) || null;

src/
  componentes/
    msg/Erro.jsx, Atencao.jsx, Sucesso.jsx
    contatos/Contato.jsx, Endereco.jsx
    posts/ListaPosts.jsx
    refeicoes/ListaCategorias.jsx
  paginas/
    Ex01 ... Ex16
  App.jsx
  main.jsx

export default function Erro({ titulo = "ERRO", mensagem }) {
  return (
    <div className="msg-card erro">
      <h3>{titulo}</h3>
      <p>{mensagem}</p>
    </div>
  );
}

• Q2 e Q3 seguem o mesmo padrão mudando default e classe CSS.
• Conceito central: componente parametrizado por props.
• Validação: sem enviar titulo, o default deve aparecer corretamente.

export default function Login() {
  return (
    <div className="auth-box">
      <h2>Login</h2>
      <form className="auth-form">
        <label>Email</label>
        <input type="email" />
        <label>Senha</label>
        <input type="password" />
        <button type="submit">Entrar</button>
      </form>
    </div>
  );
}

const contatosFixos = Array.from({ length: 5 }, () => ({
  id: faker.string.uuid(),
  nome: faker.person.fullName(),
  email: faker.internet.email(),
  telefone: faker.phone.number(),
}));

{contatosFixos.map((contato) => (
  <Contato key={contato.id} contato={contato} />
))}

• Q6: cartão de contato a partir de objeto por props.
• Q7: lista de cartões com dados fixos gerados pelo Faker.
• Q8: cartão de endereço com CEP, logradouro, complemento, bairro, localidade e UF.

const [cep, setCep] = useState("");
const [endereco, setEndereco] = useState(null);
const [erro, setErro] = useState("");

const cepLimpo = cep.replace(/\D/g, "");
if (cepLimpo.length !== 8) {
  setErro("CEP inválido.");
  return;
}

• Sem CEP válido, não chama API.
• Se API retornar erro, exibe mensagem clara ao usuário.
• Se retornar endereço, renderiza cartão de endereço.

useEffect(() => {
  async function carregarUsuarios() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    setUsuarios(await response.json());
  }
  carregarUsuarios();
}, []);

useEffect(() => {
  async function carregarPosts() {
    if (!usuarioId) {
      setPosts([]);
      return;
    }
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts?userId=${usuarioId}`
    );
    setPosts(await response.json());
  }
  carregarPosts();
}, [usuarioId]);

• Q10: dropdown de usuários e exibição do selecionado.
• Q11: lista completa de posts.
• Q12: posts filtrados por usuário selecionado.

// Q14: carregar refeições por categoria
const response = await fetch(
  `https://www.themealdb.com/api/json/v1/1/filter.php?c=${encodeURIComponent(categoriaSelecionada)}`
);

// Q15: surpresa de receita
const randomResponse = await fetch(
  "https://www.themealdb.com/api/json/v1/1/random.php"
);

• Q13: listar categorias com nome e descrição.
• Q14: ao trocar categoria, atualizar lista de refeições.
• Q15: botão Me Surpreenda para receita aleatória.

const response = await fetch(
  "https://restcountries.com/v3.1/all?fields=name,capital,region,population,flags,cca3"
);
const data = await response.json();
const indice = Math.floor(Math.random() * data.length);
setPais(data[indice]);

• Campos recomendados: nome, nome oficial, capital, região, população e bandeira.
• Uso de fields= reduz payload e simplifica o consumo.
• Renderização condicional evita acesso a campo inexistente antes da resposta.

• Confundir props com estado.
• Fazer tudo em App.jsx sem componentização.
• Esquecer key em listas.
• Não tratar caso vazio/erro de API.
• Criar estado demais quando o valor é derivável.
• Entregar interface sem estilização mínima exigida.

• Q1-Q3 com título default funcionando por props.
• Q4-Q5 com formulário organizado e estilizado.
• Q6-Q8 com cartões de contato/endereço completos.
• Q7 com Faker + map + key.
• Q9 com consulta de CEP e tratamento de erro.
• Q10 com dropdown de usuários e exibição dinâmica.
• Q11 com lista de posts da API.
• Q12 com posts filtrados por usuário selecionado.
• Q13-Q14 com categorias e refeições por seleção.
• Q15 com receita aleatória.
• Q16 com país aleatório e mínimo de 5 dados.

• Props: os componentes recebem dados de fora quando o enunciado pede parametrização?
• Estado: inputs, seleções, resultados de API e mensagens de erro estão em useState quando precisam mudar?
• Dado derivado: algum valor foi calculado a partir de outro, em vez de virar estado redundante?
• Listas: toda lista dinâmica foi renderizada com map e key estável?
• Efeitos: carregamentos iniciais usam useEffect com dependências corretas?
• API: o código usa fetch, response.json() e leitura correta do payload?
• Renderização condicional: erro, vazio, seleção e resultado aparecem apenas quando fazem sentido?
• Estilo: os componentes estão visualmente organizados, legíveis e compatíveis com a ideia de "estilizado"?

• Estrutura no padrão do acervo: BASE + EX.01..EX.11 + CHECK.
• Título final aplicado: Fundamentos de React.
• Conteúdo cobrindo fundamentos, Q1..Q16, erros e checklist.
• Identidade visual, navegação e scripts compartilhados preservados.