JSX

O que é o JSX?

O JSX é uma extensão da linguagem JavaScript e permite que você escreva código JavaScript contendo tags de linguagem de marcação parecidas com o HTML, tornando a criação de interfaces de usuário mais intuitiva e legível.

O que é uma linguagem de marcação?

Para entender como funciona o JSX, é importante entendermos o HTML. Apesar de não ser exatamente a linguagem HTML sendo utilizada, entendendo o HTML, veremos que o JSX é exatamente como o HTML, só que inserido dentro de um arquivo JavaScript e trocando as tags HTML por componentes do React.

O HTML e o JSX é composto por uma série de elementos que definem a estrutura e o conteúdo de uma página da web. Cada elemento é representado por uma tag, que é cercada por colchetes angulares. Por exemplo, a tag <p> é usada para definir um parágrafo de texto no HTML. No React Native, textos só podem ser escritos dentro de um componente Text ou derivados, então ficaria da seguinte forma:

  <Text>Texto no React Naive</Text>

Declarando um componente em React

Após entender o que é um componente e quando criar um, vamos para o código. Todo componente (Componente ou Tela) não é obrigado estar em um arquivo separado, mas é altamente recomendado para manter uma melhor organização de código. Este arquivo deve ter o nome desejado e terminar com .js ou .jsx, sendo mais recomendado a segunda opção:

// Dependendo da configuração do projeto, pode ser
// necessário importar o React para que o JSX funcione corretamente
import React from "react"
import {Pressable, Image, Text} from "react-native"

export default function CartaoMembro(propriedades){
  function verDetalhes(){
    // Navegar para tela de detalhes do membro
  }

  return (
    <Pressable onPress={verDetalhes}>
      <Image source={{uri:propriedades.imagem}} />
      <Text>{propriedades.nome}</Text>
    </Pressable>
  )
}

Tá, calma… Muita coisa acontecendo, vamos por partes:

Importações: Todo arquivo do react vai ter bastante importações, mas calma que a sua IDE sempre vai te ajudar a importar os arquivos corretamente. Todos os componentes que forem utilizados no arquivo, devem ser importados no início desse arquivo
- import {Pressable, Image, Text} from "react-native": Importa os componentes que já vêm prontos do React Native
export default function CartaoMembro(propriedades): Todo componente, a nivel de código, é uma função que recebe como parametro suas propriedades e retorna o que deve ser exibido. Essa função é exportada como padrão (export default), para que outros arquivos possam importá-la
function verDetalhes(){}: Declara a função que navegaria o usuário para a tela de detalhes do membro, mas não foi implementada, está apenas como exemplo.
return (JSX do componente): Como dito anteriormente, o retorno da função é o que o componente exibirá na tela. Antes do retorno fica a declaração de lógicas e váriaveis
<Pressable onPress={verDetalhes}> ... </Pressable>: Para chamar um componente dentro de outro, utilizamos a notação do JSX vista anteriormente, que é utilizando < e > para indicar o nome do componente, passar propriedades para este componente e seus componentes “filhos” entre a tag de inicialização (<Pressable ...>) e a de fechamento (</Pressable>)
- Para passarmos propriedades para os componentes, passamos da seguinte forma: nomeDaPropriedade={valorDaPropriedade}. Caso o valor da propriedade seja uma string, as chaves podem ser trocadas por aspas, ficando da seguinte forma nomeDaPropriedade="valorDaPropriedade"
- No caso do Pressable, passamos a função verDetalhes como propriedade onPress. Dessa forma, a função verDetalhes será chamada quando pressionarmos no cartão
<Image source={{uri:propriedades.imagem}} />:
- Aqui temos o caso de uma self-closing tag: Image é um componente que não recebe nenhum filho, então podemos escrever uma “tag que se fecha”. É o mesmo que escrever <Image source={{uri:propriedades.imagem}}></Image>
- source={{uri:propriedades.imagem}}: passamos o objeto {uri:propriedades.imagem} para a propriedade source do componente Image. Esse objeto pode parecer complicado, mas é só dar uma olhada na documentação do componente Image que lá explica o que ele espera como propriedades. No caso, uri seria a url da imagem, mas poderia ser passada a importação do arquivo, que seria de uma forma diferente e a documentação mostra bem como fica no caso de importação de arquivo (com require).
<Text>{propriedades.nome}</Text>:
- Sempre que vamos inserir uma variável dentro do JSX para ser exibida no componente, utilizamos {}. No caso estamos passando a string de propriedades.nome para ser exibida no componente Text
- Podemos ver também aqui como acessar as propriedades passadas para o componente, utilizando o . para pegar o nome do atributo do objeto propriedades, em propriedades.nome.

Por fim, para chamarmos o componente CartaoMembro, seria da seguinte forma:

import React from "react"
import CartaoMembro from "pasta-em-que-se-encontra-o-arquivo/CartaoMembro.jsx"

export default function App(){
  return <CartaoMembro nome="John Doe" imagem="url da imagem" />
}

Dessa forma, conseguimos criar nosso primeiro componente. Ele exibirá tudo que foi passado para ele, mas ainda não estará estilizado como gostaríamos. Na próxima seção, veremos uma introdução para estilização.