React: do básico ao avançado - Parte 5

React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.

Esta é a quinta parte de uma série de artigos que ensina a desenvolver e estruturar aplicações com JavaScript e React.

Clique aqui caso você ainda não tenha lido a quarta parte.

Na parte anterior, aprendemos como funciona a propriedade children e como criamos elementos no React. Agora vamos entender o que é JSX.

O que é JSX?

JSX é apenas açúcar sintático 🍫, ele torna possível escrever XML dentro de código JavaScript.

XML?! Não seria HTML? Não. JSX também é usado em outras plataformas, por exemplo, para desenvolvimento de apps iOS e Android.

No iOS você pode renderizar um datepicker assim:

<DatePickerIOS   date="2016-12-31"   onDateChange={() => console.warn('🎉')} /> 

Legal, né? Se todos os artigos atingirem mais de 100 curtidas, vou estender a série e falar sobre desenvolvimento de apps iOS e Android com React. Senão, não. 😈

JSX é totalmente opcional e você não precisa usá-lo se não quiser. No caso de desenvolvimento de apps com React, tudo que JSX faz, React.createElement() também faz.

Como assim, no caso de desenvolvimento de apps com React?! JSX não foi feito pra funcionar só com React? 😨 Não. JSX é uma especificação e qualquer pré-processador de código JavaScript pode usar a especificação para transformar JSX em qualquer coisa útil.

JSX não foi criado para ser implementado por motores JavaScript (SpiderMonkey, V8, etc.) ou browsers. Ele também não é uma proposta de funcionalidade a ser incluída na especifição ECMAScript. JSX é apenas uma especificação criada para que pré-processadores JavaScript transformem sintaxe XML em JavaScript comum.

Se você não lembra o que é ECMASCript, leia a primeira parte desta série.

No caso de React, JSX é convertido em chamadas ao React.createElement(), porém outros projetos podem converter JSX em qualquer código JavaScript que quiserem.

Para resumir, no React, JSX é usado para criar elementos, ou seja, JSX é apenas uma alternativa mais elegante ao React.createElement().

Como nesta série estamos usando a ferramenta Create React App para criar projetos React, você pode escrever JSX normalmente e ele será convertido para JavaScript sem qualquer esforço da sua parte.

Se você não quiser usar o Create React App, você irá precisar fazer o setup do Babel no seu projeto. Babel é um pré-processador JavaScript, e não vamos falar sobre ele nesta série porque estamos usando o Create React App, que faz toda a configuração necessária do Babel para nós.

Provavelmente agora você deve estar se perguntando se deve usar JSX ou não. 🤔

Infelizmente, não posso te responder isso, mas posso te ajudar a tomar essa decisão. No próximo artigo, vou te explicar como usar JSX e listar algumas vantagens e desvantagens.

Resumo

Nessa parte aprendemos o que é JSX. Na próxima parte desta série, vamos nos aprofundar no seu uso e funcionamento.