Aprenda React 18: Apresentando JSX

Criamos um componente country no final de nosso tutorial anterior sobre como criar um primeiro componente React e renderizou como esperávamos. No entanto, escrevemos muito código para criar um componente simples.

Este tutorial vai te ensinar sobre JSX. JSX é a abreviação de JavaScript XML e nos permite escrever o que parece HTML dentro de JavaScript. Isso torna muito mais fácil definir nossos componentes e criar uma interface de usuário complicada.

O JSX que escrevemos é transpilado por uma variedade de ferramentas em código JavaScript real que os navegadores podem entender.

Introdução ao JSX

A melhor maneira de se familiarizar com o JSX é converter o código do nosso Country componente do tutorial anterior em JSX. Aqui está o código original que escrevemos:

function Country(props) {
    return React.createElement('div', {
        className: "container"
    }, React.createElement('h2', {
        className: "country-name"
    }, `Country Name: ${props.name}`), React.createElement('p', {
        className: "capital"
    }, `Capital: ${props.capital}`), React.createElement('p', {
        className: "population"
    }, `Population: ${props.population}`));
}

Podemos escrevê-lo da seguinte forma com a ajuda do JSX:

function Country(props) {
    return (
        

            
Country Name: {props.name}
            
Capital: {props.capital}
            
Population: {props.population}
        
    );
}

É evidente que tivemos que escrever muito menos código e agora é muito mais fácil entender a estrutura geral dos componentes. O JSX dentro de nossa função também está retornando um elemento React assim como nossa versão original de JavaScript puro.

Agora podemos renderizar nosso Country componente dentro do navegador usando o seguinte código:

let countryElement = (
  
);

let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);

Tente adicionar informações sobre a área dos Estados Unidos a este componente. Você verá que é muito mais fácil fazer isso com JSX.

Coisas importantes para lembrar

Existem algumas regras que você precisa ter em mente ao trabalhar com JSX.

1. É XML, não HTML!

Eu gostaria de repetir que o código que escrevemos acima pode parecer HTML, mas na verdade é XML. Isso significa que você terá que seguir regras de XML ao compor a estrutura do componente. Isso significa que você precisa fechar todos os elementos adicionados ao componente. Elementos com filhos precisarão ter uma tag de abertura e de fechamento. Elementos que não possuem filhos precisarão de uma tag de fechamento automático.

2. Aspas duplas != Aspas simples

Os valores de atributo que possuem strings precisam usar aspas duplas. Esta é a razão pela qual usamos aspas duplas ao especificar o valor da className atributo acima.

3. Expressões JavaScript dentro do JSX

Você pode incorporar qualquer expressão JavaScript válida dentro do código JSX, desde que esteja entre colchetes. Foi o que usamos em nosso Country componente quando acessamos valores como capital e população.

4. As tags diferenciam maiúsculas de minúsculas

Elementos HTML regulares precisam ter tags em minúsculas. Isso significa que não poderíamos usar Div ao invés de div ao criar nosso componente. Isso ocorre porque, basicamente, estamos trabalhando com JavaScript e é uma linguagem que diferencia maiúsculas de minúsculas. Precisamos ser explícitos que queremos um HTML div elemento especificando tudo em letras minúsculas.

4. Cuidado com palavras-chave reservadas em JSX

Você não pode usar palavras-chave reservadas dentro do JSX que está escrevendo. Por isso tivemos que usar className especificar o valor de class atributo. De forma similar, for é uma palavra-chave reservada, então precisaremos usar htmlFor para especificar um valor para o for atributo em HTML.

5. Um elemento de cada vez

o return declaração que você escreve para seus componentes só pode retornar um elemento. O próprio elemento pode ter vários filhos. É por isso que retornamos um único contêiner div acima de. Também é uma boa ideia envolver sua instrução de retorno entre parênteses para formatação e legibilidade adequadas. Isso também reduz as chances de JavaScript adicionar implicitamente quaisquer valores de retorno não intencionais.

Pensamentos finais

Chegamos ao final deste tutorial e espero que você esteja confortável o suficiente para começar a usar o JSX ao criar qualquer aplicativo React. No próximo tutorial, aprenderemos sobre a separação de JSX e JavaScript ao definir nossos componentes.