Introdução ao JSX

Fala meus queridos, turo bom?

Vamos voltar aquela serie maravilhosa sobre o maravilhoso mundo de React?

Desta vez vamos aprender sobre o tão famoso JSX, desmitificar e saber o porque bolhufas usamos isso dentro do nosso código.

Vamos considerar que declaremos uma variável neste formato:

É esse tipo de programagia que vamos aprender, esse pedaço de código não é HTML nem JavaScript, é JSX. Melhor dizendo é uma extensão de sintaxe para o nosso JS, usamos ela no mundo do React para descrever como nossos elementos vão parecer na tela, ou seja como seu “html” vai ser tratado, lembrando que usando JSX você não perde por um segundo o poder total do JavasScript.

Mas usamos o JSX para produzir elementos para nosso código React (desconheço algum outro lugar que usa JSX, se souber comenta ai!!), vamos explorar como eles são renderizados pelo DOM no meu próximo artigo, para que esse não fique muito cansativo.

Mas por que devemos usar JSX?

React abraça o JSX com a mesma força que sua mãe apertava suas bochechas quando você era pequeno, pois ele adota o fato de ser reativo as mudanças feitas pelo usuário na UI (user interface) ou seja a renderização é inerentemente associada a outra logica da interface do usuário.

Para não criarmos vários arquivos e tecnologias colocando códigos em vários arquivos que se completam, React separa tudo com unidades fracamente acopladas que no nosso mundo chamamos de “componentes”, que contem logica e interface. Também iremos aprender mais sobre componentes em outro artigo.

Certeza que esta pensando que é obrigatório o uso de JSX com React correto?

Mas felizmente isso não é obrigatório apesar de ser a pratica da maioria dos programadores pois é muito útil e fácil de se usar, aumenta muito na produção para desenvolver o visual da sua aplicação.

Agora que já passamos por essa parte mais teórica vou mostrar um pouco de código!

Usando Expressões no JSX

Vamos declarar uma variável chamada “nome” e usar ela dentro:

Simplesmente adicionamos dentro da nossa tag padrão de titulo em HTML a variável dentro das nossas chaves, simples não?

Você pode fazer muito mais coisas dentro das chaves, por exemplo uma expressão em JavaScript é valida, mas geralmente é aconselhável usar somente expressões de uma linha para que seu código não comece a ficar muito confuso.

Olha mais este exemplo onde vou imprimir o nome de uma pessoa mais o cargo dela dentro de uma tag “h1” usando uma expressão em JS.

Lembrando que somente separei em varias linhas o código para aumentar a legibilidade o que é uma boa pratica, mas nada impede de deixar tudo dentro da tag “h1”.

Mas também podemos usar JSX dentro de uma expressão:

Neste código apenas verificamos se uma pessoa foi passada e retornamos, se ele existir danos ola pra ela se não existir uma pessoa damos ola para o estranho. Também podemos colocar atributos dentro de nossas tags alem das de atributo padrão do HTML:

Não use quotes ao redor das chaves quando esta colocando expressões em JS no atributo. Deve se usar quotes “” para valores em string e chaves para expressões JS mas não os dois no mesmo atributo.

Por hoje aprendemos a usar o básico do JSX no nosso próximo artigo vamos aprender a renderizar elementos no DOM.

Ate a próxima pessoal!