JSX: JavaScript encontrando a interface

JSX deixa escrever marcação perto da lógica que produz aquela marcação. Ele lembra HTML, mas continua dentro do JavaScript e segue algumas regras próprias.

const user = {
  name: 'Ada',
  avatar: 'https://i.pravatar.cc/160?img=47',
};

export default function Profile() {
  const isOnline = true;

  return (
    <section className="profile">
      <img src={user.avatar} alt={`Foto de ${user.name}`} />
      <h1>{user.name}</h1>
      <p>{isOnline ? 'Online agora' : 'Offline'}</p>
    </section>
  );
}

As chaves {} abrem uma "janela" para expressões JavaScript. className ocupa o lugar de class, e tags sem conteúdo precisam ser fechadas, como <img />. Quando um componente precisa devolver elementos irmãos, use um elemento pai ou um Fragment.

return (
  <>
    <Header />
    <Main />
    <Footer />
  </>
);

• JSX: é uma sintaxe para descrever a interface dentro do JavaScript.
• Chaves {}: recebem expressões: variáveis, chamadas e operações que retornam valor.
• Fragment <>...</>: agrupa elementos sem criar uma div extra no DOM.

Dica: if, for e outras instruções não entram diretamente dentro das chaves. Calcule antes do return ou use expressões como ternário e map.

No próximo nó, vamos separar a interface em componentes reutilizáveis.