Primeiros passos com React – Conhecendo o JSX

Primeiros passos com React – Conhecendo o JSX

29/09/2018 0 Por Alisson Suassuna

No artigo dessa semana vamos continuar estudando React, caso não tenha lido o nosso primeiro artigo, nele aprendemos como criar um elemento e renderiza-lo no browser clique aqui para ler. O artigo de hoje vamos conhecer outra forma de criar e renderizar elementos usando JSX.

O que é JSX?

JSX (JavaScript + XML) é uma forma de representar componentes com um visual próximo ao HTML, é importante lembrarmos sempre que, JSX não é  String e muito menos HTML, e sim JavaScript puro.

Por que JSX?

Segundo a própria documentação “Em vez de separar artificialmente as tecnologias, colocando HTML e lógica em arquivos separados, o React separa as preocupações com unidades fracamente acopladas chamadas “componentes” que contêm ambos “. Desde sempre aprendemos a escrever nosso HTML, CSS e JavaScript separados, mas o React mudou completamente e diz que faz mais sentido termos tudo em um só lugar e chamá-los de componentes.

Código base – conhecendo o JSX

Vamos escrever o nosso elemento com JSX e renderiza-lo em nossa <div> com Id ‘app’ e ver esse código rodando no browser.

JSX

Quando tentamos usar JSX, o JavaScript nos retorna um erro dizendo “Oh meu camarada eu não conheço essa sintaxe” e se pensamos bem faz todo sentido, porque o JSX não faz parte da linguagem nativamente, ele é apenas uma extensão, então temos um problema, como faço para fazer o browser interpretar essa sintaxe nova?

Babel

Para usarmos de fato JSX precisamos antes compilar esse código para JavaScript para que ele se transforme na função React.createElement() e depois mandarmos para o browser redenrizar esse elemento, para realizar essa tarefa usamos uma ferramenta chamada Babel, o babel é uma ferramenta usada para compilar código JavaScript ele é amplamente usado no desenvolvimento frontend o próprio React recomenda o uso da babel, não vou explicar a fundo, mas quem deseja saber mais sobre clique aqui.

Para importar o babel vamos usar o CDNJS, precisamos também especificar o tipo “text/babel”

JSX

Veja que agora deu tudo certo, por baixo dos panos o babel pegou o código escrito em JSX transformou na função React.createElement() e renderizou para nós.

Recomendações de Cursos e Livros

React + Redux: Fundamentos e Duas Apps do ABSOLUTO ZERO!

Ótimo curso galera…

CLIQUE AQUI PARA VISUALIZAR O CURSO

Javascript. O Guia Definitivo

Esse livro é muito bom galera, muito completo tenho ele ha algum tempo e me ajudou muito a entender o JavaScript de verdade, vale muito apena o investimento.

CLIQUE AQUI PARA VISUALIZAR O LIVRO


CLIQUE AQUI PARA VISUALIZAR O LIVRO