Fazer da interface um sistema
React incentiva a compor uma página a partir de componentes focados, em vez de tratá-la como um único modelo extenso. Você trabalhará limites, propriedades e estado para manter padrões consistentes e tornar as mudanças mais fáceis de compreender.
Escolher como a página chega ao navegador
Gatsby e Next.js oferecem formas de criar e renderizar experiências web modernas. A renderização no servidor e a geração estática descrevem momentos diferentes em que a saída de uma página é preparada. Entender essas opções ajuda a escolher a abordagem de acordo com a necessidade, e não por hábito.
Conectar a interface e publicá-la
Um front-end torna-se aplicação quando a interface se conecta a serviços reais e lida com os estados que eles produzem. A etapa apresenta então a publicação com Cloudflare ou Vercel, levando o trabalho do ambiente local a um endereço web acessível.
Do conceito ao código funcional
Estes trechos mostram como os conceitos de cada nível aparecem em projetos reais. São pontos de partida para ler, questionar, adaptar e testar — não código para copiar sem entender.
Compor peças reutilizáveis
ProgramCard contém a marcação de um programa; ProgramList organiza a coleção e o título. As props evitam duplicação e cada item repetido recebe uma chave estável.
function ProgramCard({ title, duration, href }) {
return (
<article className="program-card">
<p className="program-card__duration">{duration}</p>
<h2>{title}</h2>
<a href={href} aria-label={`Explore the ${title} program`}>
View program <span aria-hidden="true">→</span>
</a>
</article>
);
}
export function ProgramList({ programs }) {
return (
<section aria-labelledby="programs-title">
<h1 id="programs-title">Choose a learning path</h1>
<div className="program-grid">
{programs.map((program) => (
<ProgramCard key={program.id} {...program} />
))}
</div>
</section>
);
}Buscar dados durante a renderização
Esta página App Router busca dados em um Server Component assíncrono. Revalidar a cada cinco minutos funciona para conteúdo que muda ocasionalmente; a verificação evita apresentar uma resposta inválida como válida.
async function getPrograms() {
const response = await fetch("https://api.example.com/programs", {
next: { revalidate: 300 },
});
if (!response.ok) throw new Error("Programs could not be loaded");
return response.json();
}
export default async function ProgramsPage() {
const programs = await getPrograms();
return (
<main>
<h1>Programs</h1>
<ProgramList programs={programs} />
</main>
);
}Leia e depois adapteAltere um requisito, preveja o resultado e execute o código para conferir. Na revisão, explique a escolha feita e uma melhoria que faria a seguir.