Fundamentos de React: JavaScript, APIs e Primeiros Componentes
Um guia prático sobre variáveis, funções, fetch, ReactDOM e componentes iniciais
As questões desta página foram organizadas para desenvolver uma base real de construção de interfaces com JavaScript e React, sem atalhos e sem maquiagem técnica. O desafio não está apenas em fazer “algo aparecer na tela”, mas em compreender como cada parte da solução se sustenta: como os dados são declarados, transformados, exibidos, buscados externamente e, por fim, renderizados em interfaces mais organizadas com React.
Ao longo das atividades, você alterna entre explicação conceitual e execução prática: entender o que é React, qual o papel da CDN, manipular variáveis com let e const, trabalhar com arrays e objetos, consumir APIs com fetch, converter resposta com json() e organizar fluxo assíncrono com async/await. Em seguida, o foco muda para renderização declarativa com ReactDOM e componentes funcionais simples.
Quem percorre corretamente esse conjunto de exercícios desenvolve competências introdutórias, mas reais, em front-end: domínio de JavaScript aplicado à interface, distinção entre cálculo interno e saída visual, consumo de dados externos e base sólida para entender elementos React, props e listas renderizadas. O objetivo final é sair do “copio e colo” e entrar no “sei por que funciona”.
Para não transformar a resolução em repetição mecânica, use dois modelos-base: HTML/CSS/JavaScript puro para exercícios de lógica e explicação visual, e React + ReactDOM para exercícios de renderização declarativa.
Parte dos exercícios pede apenas uma página simples que mostre o resultado na tela. Nesses casos, um esqueleto com HTML, CSS e JavaScript já é suficiente, desde que exista uma área de saída para renderizar o resultado de forma explícita.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercício</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 24px;
background: #f7f7f7;
}
.caixa {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
max-width: 700px;
}
</style>
</head>
<body>
<div class="caixa">
<h1>Resultado</h1>
<div id="saida"></div>
</div>
<script>
// código do exercício aqui
</script>
</body>
</html>console.log.Quando o exercício pede React, a página precisa de um elemento root e scripts de React, ReactDOM e Babel. Isso já é suficiente para praticar JSX, elementos React e componentes funcionais sem depender de build tool no começo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// código React aqui
</script>
</body>
</html>div com <p>.React é uma biblioteca JavaScript usada para construir interfaces de usuário de forma organizada, reutilizável e dinâmica. A solução do exercício é armazenar essa explicação em uma variável e renderizar dentro da área de saída da página.
<script>
const explicacao = "React é uma biblioteca JavaScript usada para criar interfaces de usuário de forma organizada, reutilizável e dinâmica.";
document.getElementById("saida").innerHTML = `<p>${explicacao}</p>`;
</script>Resposta objetiva: React foi criado no Facebook para facilitar o desenvolvimento de interfaces dinâmicas e reutilizáveis. A finalidade principal é construir telas com componentes e atualizar a interface de forma eficiente quando os dados mudam.
<script>
const explicacao = "O React foi criado no Facebook para facilitar o desenvolvimento de interfaces dinâmicas. Sua principal finalidade é construir telas com componentes reutilizáveis e atualizar a interface de forma eficiente quando os dados mudam.";
document.getElementById("saida").innerHTML = `<p>${explicacao}</p>`;
</script><p>.CDN significa Content Delivery Network: rede de servidores distribuídos para entregar recursos com mais rapidez e eficiência. Em contexto de front-end inicial, ajuda a carregar bibliotecas sem setup local completo.
<script>
const explicacao = "CDN significa Content Delivery Network. Ela é usada para distribuir arquivos por vários servidores, tornando o carregamento de bibliotecas, imagens e outros recursos mais rápido e eficiente.";
document.getElementById("saida").innerHTML = `<p>${explicacao}</p>`;
</script>let e erro com const.O exercício reforça a diferença entre variáveis reatribuíveis e constantes. A forma mais didática é capturar o erro em try/catch e exibir a explicação na própria interface.
<script>
let nome = "Luiz";
nome = "Therezinha";
const sobrenome = "Silva";
let mensagemErro = "";
try {
sobrenome = "Souza";
} catch (erro) {
mensagemErro = erro.message;
}
document.getElementById("saida").innerHTML = `
<p>Nome atual: ${nome}</p>
<p>Sobrenome: ${sobrenome}</p>
<p>Ao tentar alterar a constante, ocorre o erro: <strong>${mensagemErro}</strong></p>
<p>Isso acontece porque <code>const</code> não permite reatribuir a variável.</p>
`;
</script>Esse exercício mistura declaração de tipos com pequenas mudanças de valor e validação por comparação booleana. O resultado precisa aparecer no HTML, não só no console.
<script>
let idade = 30;
let ehMaiorDeIdade = idade >= 18;
let nomeCompleto = "Jorge Silva";
nomeCompleto = "Teresa Silva";
let casado = false;
casado = true;
document.getElementById("saida").innerHTML = `
<p>Idade: ${idade}</p>
<p>É maior de idade? ${ehMaiorDeIdade}</p>
<p>Nome completo: ${nomeCompleto}</p>
<p>Casado: ${casado}</p>
`;
</script>O objetivo é consolidar tipos referenciados: atualizar propriedade de objeto, inserir item em array e exibir lista com map. Aqui já aparece o padrão típico de renderização de dados em React.
export default function App() {
const pessoa = {
nome: "Luiz",
idade: 20,
sobrenome: "Silva"
};
pessoa.idade = 25;
pessoa.profissao = "Desenvolvedor";
const familia = [
pessoa,
{ nome: "Maria", idade: 30, sobrenome: "Silva", profissao: "Professora" },
{ nome: "Pedro", idade: 40, sobrenome: "Silva", profissao: "Motorista" }
];
familia.push({
nome: "Ana",
idade: 18,
sobrenome: "Silva",
profissao: "Estudante"
});
familia[1].nome = "Mariana";
return (
<div style={{ padding: "20px", fontFamily: "Arial" }}>
<h1>Família</h1>
<ul>
{familia.map((membro, index) => (
<li key={index}>
{membro.nome} {membro.sobrenome} - {membro.idade} anos - {membro.profissao}
</li>
))}
</ul>
</div>
);
}A sequência correta é: requisitar com fetch, converter com response.json(), acessar o índice [0] e renderizar o campo name.
<script>
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(usuarios => {
document.getElementById("saida").innerHTML = `
<p>Primeiro usuário: ${usuarios[0].name}</p>
`;
})
.catch(error => {
document.getElementById("saida").innerHTML = `
<p>Erro ao buscar dados: ${error}</p>
`;
});
</script>O problema é o mesmo do exercício anterior, mas com estrutura assíncrona mais clara: função de obtenção de dados, função de renderização e try/catch no uso.
<script>
async function obterDados() {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const dados = await response.json();
return dados;
}
async function mostrarPrimeiroUsuario() {
try {
const usuarios = await obterDados();
document.getElementById("saida").innerHTML = `
<p>Primeiro usuário: ${usuarios[0].name}</p>
`;
} catch (erro) {
document.getElementById("saida").innerHTML = `
<p>Erro ao buscar dados: ${erro}</p>
`;
}
}
mostrarPrimeiroUsuario();
</script>O exercício trabalha dois loops: um para construir a lista visual e outro para somar comprimentos dos nomes usando length.
<script>
const nomes = ["João", "Maria", "Pedro", "Ana"];
let listaHTML = "<ul>";
for (let i = 0; i < nomes.length; i++) {
listaHTML += `<li>${nomes[i]}</li>`;
}
listaHTML += "</ul>";
let total = 0;
for (let i = 0; i < nomes.length; i++) {
total += nomes[i].length;
}
document.getElementById("saida").innerHTML = `
${listaHTML}
<p>Total de caracteres: ${total}</p>
`;
</script>O ponto central é consolidar função como bloco reutilizável: recebe parâmetros, processa e retorna valor com return.
<script>
function somar(a, b) {
return a + b;
}
function maiorNumero(a, b) {
return a > b ? a : b;
}
const resultadoSoma = somar(10, 20);
const resultadoMaior = maiorNumero(10, 20);
document.getElementById("saida").innerHTML = `
<p>Soma de 10 e 20: ${resultadoSoma}</p>
<p>Maior entre 10 e 20: ${resultadoMaior}</p>
`;
</script>A lógica é idêntica à função tradicional; muda a forma de declarar. Isso ajuda a ler código moderno em React sem perder o raciocínio.
<script>
const dobrar = numero => numero * 2;
const multiplicar = (a, b) => a * b;
const resultadoDobro = dobrar(10);
const resultadoMultiplicacao = multiplicar(10, 20);
document.getElementById("saida").innerHTML = `
<p>Dobro de 10: ${resultadoDobro}</p>
<p>10 x 20 = ${resultadoMultiplicacao}</p>
`;
</script>map.O padrão React aparece de forma clara aqui: dado entra, JSX descreve, ReactDOM renderiza no ponto de montagem.
<script type="text/babel">
const numeros = [1, 2, 3, 4, 5];
const elemento = (
<div>
<h1>Lista de números</h1>
<ul>
{numeros.map(numero => (
<li key={numero}>{numero}</li>
))}
</ul>
</div>
);
ReactDOM.createRoot(document.getElementById("root")).render(elemento);
</script>Esse item reforça equivalência entre estilos de função. O raciocínio computacional é o mesmo; só muda a sintaxe de declaração.
<script>
const somar = (a, b) => a + b;
const maiorNumero = (a, b) => (a > b ? a : b);
const resultadoSoma = somar(10, 20);
const resultadoMaior = maiorNumero(10, 20);
document.getElementById("saida").innerHTML = `
<p>Soma de 10 e 20: ${resultadoSoma}</p>
<p>Maior entre 10 e 20: ${resultadoMaior}</p>
`;
</script>Array.from e renderizar com estilo inline em React.O exercício combina geração de dados e apresentação visual: construir os pares programaticamente, renderizar com map e aplicar estilo na caixa principal.
<script type="text/babel">
const pares = Array.from({ length: 10 }, (_, i) => (i + 1) * 2);
const estiloCaixa = {
fontFamily: "Arial",
padding: "20px",
backgroundColor: "#f4f4f4",
borderRadius: "10px",
width: "300px",
margin: "20px auto",
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
};
const elemento = (
<div style={estiloCaixa}>
<h2>Números pares</h2>
<ul>
{pares.map(numero => (
<li key={numero}>{numero}</li>
))}
</ul>
</div>
);
ReactDOM.createRoot(document.getElementById("root")).render(elemento);
</script>Array.from({ length: 10 }, (_, i) => (i + 1) * 2) gera exatamente [2, 4, 6, ..., 20].h1.É o exercício mais direto: criar elemento JSX e renderizar. Serve para consolidar o ciclo básico React + ReactDOM sem distrações extras.
<script type="text/babel">
const elemento = <h1>Seja bem-vindo ao React!</h1>;
ReactDOM.createRoot(document.getElementById("root")).render(elemento);
</script>O objetivo é demonstrar componente funcional recebendo dados por props. É a base para composição de interface mais organizada em React.
<script type="text/babel">
function Usuario(props) {
return <h1>Nome do usuário: {props.nome}</h1>;
}
ReactDOM.createRoot(document.getElementById("root")).render(
<Usuario nome="João" />
);
</script>Se você olhar o conjunto inteiro, ele cobra cinco competências centrais: transformar enunciado em código, dominar JavaScript básico aplicado à interface, distinguir console de saída visual, entender fluxo assíncrono com API e dar os primeiros passos corretos em React com elementos, listas e componentes.
O padrão mental mais útil é: ler o pedido, identificar o tipo de dado, decidir como mostrar na tela, codificar e validar visualmente. Em termos práticos: se pede texto, renderize string; se pede lista, itere; se pede API, busque e extraia campo; se pede React, transforme dados em JSX e renderize com ReactDOM.