Introdução ao JSX

Considere esta declaração de variável:

const element = <h1>Hello, world!</h1>;

Esta divertida sintaxe de tag não é nem uma string nem HTML.

É chamada de JSX, e é uma extensão de sintaxe para o JavaScript.Nós recomendamos ela com React para descrever como o UI deve ser. JSX pode lembrar uma linguagem de template, porém ela vem com todo o poder do JavaScript.

JSX produz "elementos" React. Nós iremos explorar a renderização para o DOM na próxima seção. Abaixo, você pode visualizar o básico do JSX necessário para começar.

Incorporando expressões no JSX #

Você pode incorporar qualquer expressão JavaScript em JSX colocando-a entre chaves.

Por exemplo, 2 + 2, user.name, e formatName(user) são todas expressões válidas:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Teste este código no CodePen.

Nós dividimos o JSX em múltiplas linhas para facilitar a leitura. Embora não não seja mandatório, ao fazer isto, nós recomendamos colocar entre parenteses para evitar armadilhas de inserção automática de ponto e vírgula.

JSX também é uma expressão #

Depois da compilação, expressões JSX viram objetos JavaScript.

Isto significa que você pode usar JSX dentro de expressões if e laços for, atribuí-los a variáveis, são aceitos como argumentos e retorno de funções:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Especificando atributos com JSX #

Você pode usar aspas para especificar uma string literal como atributos:

const element = <div tabIndex="0"></div>;

Você também pode usar chaves para incorporar expressões JavaScript em um atributo:

const element = <img src={user.avatarUrl}></img>;

Especificando filhos com JSX #

Se uma tag é vazia, você pode fechá-la imediatamente com />, como no XML:

const element = <img src={user.avatarUrl} />;

Tags JSX podem conter filhos:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Caveat:

Uma vez que JSX é mais próximo de JavaScritp que do HTML, React DOM usa a convenção de nome camelCase ao invés dos nomes de atributo do HTML.

Por exemplo, class torna-se className em JSX, e tabindex torna-se tabIndex.

Prevensão de ataques de injeção com JSX #

É seguro incorporar entradas do usuário em JSX:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

Por padrão, React DOM escapa qualquer valor incorporado em JSX antes de renderizá-lo. Assim, garante que você nunca pode injetar nada que não está explicitamente escrito em sua aplicação. Tudo é convertido para uma string antes de ser renderizado. Isto ajuda a previnir ataques do tipo XSS (cross-site-scripting).

JSX representa objetos #

Babel compila JSX para chamadas React.createElement().

Estes dois exemplos são identicos:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() executa algumas verificações para ajudar você a escrever código livre de bugs, ele essencialmente cria um objeto como este:

// Nota: esta estrutura é simplificada
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

Estes objetos são chamados de "React Elements". Você pode pensar neles como descrições do que você quer ver na tela. React lê estes objetos e usa-os para construir o DOM e mantê-lo atualizado.

Nós iremos explorar a renderização de elementos React no DOM na próxima seção.

Dica:

Nós recomendamos procurar por um esquema de sintaxe "Babel" para o editor da sua escolha. Ambos os códigos em ES6 e JSX são propriamente destacados.