O que é, e como funciona a sintaxe JSX?

Ao estudar React Native,nós usamos um tipo de sintaxe chamada JSX e com ela, podemos progamar de maneira muito mais agradável,semelhante ao Html, mesmo assim, as diferenças param por aí pois a extensão do JavaScript é muito diferente. Meditando sobre isso, pode se perguntar: O que é, e como funciona a sintaxe JSX?

O JSX, com seu nome original(JavaScript XML) resumidamente é uma sintaxe feita para indicar como uma UI deve se parecer.

Devemos saber que essa sintaxe não é obrigatória, e que é normalmente usada no Javascript e frameworks(React,ReactJs e React Native) para facilitar o processo de desenvolvimento. O bom de usar o JSX é que no React, não se utiliza Html, ou seja, qualquer projeto ali não poderá usar linguagem de estilização. Felizmente, a extensão além de ser facilmente escrita pelo desenvolvedor,aproveita da praticidade da marcação de hipertexto ,trazendo consigo os recursos do JavaScript.

<MyButton color="blue" shadowSize={2}>
Clique aqui
</MyButton>

No exemplo acima, vemos o código SEM uso JSX. Vejamos abaixo com o uso do JSX.

React.createElement(
MyButton, 
{color: 'blue', shadowSize: 2}, 
'Clique aqui'
)

Percebeu a diferença? O JSX é muito prático e por isso é escolhido pelos desenvolvedores,e ele até facilita na mensagem de erros de algum código. Como dito anteriormente, o JSX não é apenas uma sintaxe visual mas tem consigo outros atributos do JavaScript, vejamos:

• Uso de expressões com JSX:

Utilizando o JSX, o desenvolvedor pode continuar seu código fazendo uma variável, e utilizando o JSX para envolvê-la em chaves.

function App() {
const text = 'Hello World';
return (
<div className="App">
<p> [text] </p>
</div>
);
}

Qualquer outra expressão do JS é compatível ao uso do JSX.
Ele funciona muito como Syntatc Sugar, uma forma de deixar o código agradável.

• Uso de Props no JSX:

<MyComponent foo={1 + 2 + 3 + 4} />

Nessa expressão acima o valor será 10, pois o resultado da soma do MyComponent é 10.

• Elementos filhos no JSX:

Já fizemos a comparação do JSX com o Html e de fato os dois são bem parecidos, e isso inclui no caso dos elementos filhos que são muito utilizados no Html e podem ser utilizados por aqui também, veja abaixo:

<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>

Também é possível fazer uso de Elementos filhos e Arrays intergrados:

render() {
return [
// Não esqueça das keys :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}

As possibilidades com o JSX vão muito além. Com isso, tente fazer uso do JSX em seu próximo projeto React, sua simplicidade será de grande valor.

Obrigado pela leitura!!!
Espero que este artigo tenha o ajudado a entender o que realmente é o JSX e seu funcionamento.