JSX

A sintaxe que deixa escrever algo parecido com HTML dentro do JavaScript.

Também aparece como "TSX", "sintaxe do React", "className".

JSX é o que faz um arquivo de React parecer HTML no meio do código. Não é HTML de verdade, é JavaScript disfarçado, mas se lê quase igual.

function Cartao({ titulo, itens }) {
  return (
    <article className="cartao">
      <h2>{titulo}</h2>
      <ul>
        {itens.map((item) => (
          <li key={item.id}>{item.nome}</li>
        ))}
      </ul>
    </article>
  );
}

Chaves { } são a porta de entrada do JavaScript no meio da marcação. Tudo que está entre chaves é código sendo executado.

As diferenças que pegam todo mundo

HTML	JSX	Por quê
`class`	`className`	`class` já é palavra reservada do JavaScript
`for`	`htmlFor`	mesma coisa
`onclick`	`onClick`	eventos em camelCase
`<br>`	`<br />`	toda tag precisa fechar

O key da lista

Quando você monta uma lista com map, cada item precisa de um key único. É como o React sabe qual item é qual quando a lista muda de ordem ou tamanho. Esquecer o key é o aviso amarelo mais comum do console, e ele existe por um motivo real.

Outros termos de React

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.