React: do básico ao avançado – Parte 1

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

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

JavaScript vs. ECMAScript

ECMAScript é o nome da versão padronizada do JavaScript, ou seja, é a especificação
utilizada para desenvolver implementações de JavaScript.

Podemos dizer que ECMAScript é a receita de bolo pra criar implementações

JavaScript, como por exemplo, o SpiderMonkey da Mozilla, o V8 do Google e o Chakra
da Microsoft. São essas implementações que tornam possível rodar JavaScript no seu
browser.

ECMAScript possui várias versões, as mais conhecidas são a 5.1, 2015 (antes conhecida
como 6), 2016 (antes conhecida como 7) e 2017 (antes conhecida como 8). Cada nova
versão traz novas funcionalidades. Nenhuma nova versão quebra a anterior.

Nesta série, presumimos que você conheça ECMAScript até a versão 5.1. Sempre que
utilizarmos uma funcionalidade que foi adicionada após a versão 5.1, vamos falar dela
em detalhes.

Não se preocupe se utilizarmos uma funcionalidade que seu browser preferido ainda
não implementou, ela vai funcionar mesmo assim sem nenhum esforço da sua parte. �

React vs. JavaScript

Imagem meramente ilustrativa, não se preocupe se você não entendeu.

JavaScript é uma linguagem e React é uma biblioteca.

É importante ter em mente que, ao desenvolver aplicações utilizando React, na maior
parte do tempo, você estará escrevendo JavaScript “puro”, por isso a importância de
dominar JavaScript.

Isso não quer dizer que, para desenvolver aplicações com React, você precisa ser um
mestre em JavaScript. Quer dizer que, quanto mais você souber JavaScript, melhor e
mais simples seu código ficará.

Gosto de dizer, que só aprendi JavaScript de verdade quando conheci React, porém isso
não aconteceu do dia para a noite, fui aprendendo ao longo do tempo.

React vs. AngularJS vs. Vue.js

Já usei diversos frameworks e bibliotecas JavaScript, como Sammy.js, Backbone.js,
AngularJS 1, Vue.js, entre outros.

Não concordo muito com comparações que tentam buscar um ganhador entre
tecnologias para desenvolvimento de apps.

A verdade é que cada biblioteca ou framework tem suas vantagens e desvantagens.

Você precisa decidir qual a melhor, baseado na necessidade da sua aplicação e time de
desenvolvimento, ou seja, cada caso é um caso, e não existe biblioteca ou framework
perfeito para todos os casos.

Ao invés de comparar React com outras bibliotecas ou frameworks, nas próximas partes
desta série, vou explicar porque React torna a estruturação e o desenvolvimento de apps
mais fácil e divertido e quais suas melhores features.

React, Flux, Redux ou MobX?

Imagem meramente ilustrativa, não se preocupe se você não entendeu.

React fornece soluções nativas para comunicação entre componentes:

  Comunicação entre componentes que possuem relação de pai para filho ou de
filho para pai;
 Comunicação entre componentes-irmãos.

Porém, para comunicação entre componentes distantes um do outro, você precisa criar
seu próprio sistema de gerenciamento de estado ou utilizar uma solução pronta, como
Flux, Redux ou MobX.

Já utilizei Flux, Redux, MobX e várias outras variantes do Flux em meus projetos. O
veredicto é que, cada biblioteca traz vantagens e desvantagens, não existe uma solução
definitiva para gerenciamento de estado. A escolha depende do tipo de aplicação que
você está desenvolvendo e do seu time.

Infelizmente, percebo que vários desenvolvedores optam por Redux somente porque
ela é a biblioteca mais famosa de gerenciamento de estado, sem nem parar para
pensar se o projeto realmente precisa de uma biblioteca para gerenciamento de
estado.

Toda biblioteca introduz um nível de complexidade adicional ao projeto, você deve

avaliar se você realmente precisa dela e se já não há soluções dentro das bibliotecas que
você já utiliza.

Para 90% dos projetos front-end que não precisavam funcionar offline, nem mesmo
precisei utilizar uma biblioteca para gerenciamento de estado, React “puro” resolveu
meu problema.

Nas próximas partes desta série, vou falar sobre cada biblioteca de gerenciamento de
estado, inclusive como utilizar apenas React para gerenciamento de estado local e
global.

Resumo
Nesta série, vamos ensinar como desenvolver apps utilizando JavaScript e React.

Presumimos que você conheça ECMAScript até a versão 5.1 e sempre que utilizarmos
uma funcionalidade que foi adicionada após a versão 5.1, vamos falar dela em detalhes.

Não vamos fazer comparações com outras bibliotecas ou frameworks. Em vez disso,
vamos focar em falar sobre as funcionalidades do React e como ele resolve os
problemas que enfrentamos no dia a dia.

Também vamos falar sobre routing, gerenciamento de estado e quando utilizar uma
solução pronta ou criar uma própria.
React: do básico ao avançado – Parte 2
React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.

Esta é a segunda 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 primeira parte.

Acredito que você esteja ansioso para criar sua primeira app utilizando React. Então
vamos lá!

Node.js e npm

Antes de começar, certifique-se de que você instalou Node.js (v4+) no seu computador.

Node.js é utilizado para rodar programas JavaScript no seu computador.

No caso de aplicações front-end criadas com React, utilizamos Node.js apenas para
rodar, testar e criar um build para produção do nosso projeto.

O Node.js possui um gerenciador de pacotes chamado npm (Node Package Manager),

ele é automaticamente instalado quando você instala o Node.js.

Nesta série, não vamos falar muito sobre Node.js e npm, porém vamos explicar o que
cada comando que usarmos faz.

Hello React!
Abra uma nova aba ou janela na sua linha de comando e execute:

npm install -g create-react-app

create-react-app hello-react
cd hello-react
npm start

Após isso, você pode abrir a URL http://localhost:3000 no seu navegador preferido para
visualizar sua app.

Se você quiser alterar o código-fonte, abra o arquivo correspondente, faça as alterações

e salve. A URL http://localhost:3000 será atualizada automaticamente (desde que você
esteja rodando o comando npm start).
Importante: além de arquivos JavaScript, você pode importar arquivos CSS, imagens,
entre outros. Vamos falar sobre importação de arquivos em detalhes nas próximas
partes desta série.

Quando você estiver pronto para colocar sua app em produção, basta executar npm run
build ao invés de npm start. Uma versão para produção será gerada na pasta build,
basta copiar estes arquivos para seu servidor de produção.

Simples assim! �

O primeiro comando que executamos ( npm install -g create-react-app) instala e

torna disponível um novo comando chamado create-react-app.

Create React App é uma ferramenta criada e mantida pelos criadores do React. Ela é
utilizada para criar apps sem a necessidade de configurar ferramentas de building e
testing como webpack, Babel, Autoprefixer, ESLint, Jest, entre outras.

Se você tinha medo de aprender React porque iria precisar aprender um monte de outras
ferramentas, pode ficar tranquilo! Graças ao time do React você só precisa se preocupar
com JavaScript e React.

Resumindo, Create React App faz o trabalho “sujo” para que você não se preocupe com
ferramentas de building e testing. Você pode se concentrar apenas no desenvolvimento
da sua app sem precisar se preocupar com webpack, Babel, Autoprefixer, etc. Tudo está
pronto para você apenas usar, sem necessidade de prévia configuração.

O segundo comando (create-react-app hello-react) cria um projeto React na

pasta hello-react e instala os pacotes necessários.

O terceiro comando navega até a pasta hello-react.

O quarto – e último – comando torna disponível o acesso ao app através da URL

http://localhost:3000.

Componentize tudo!
Imagem retirada de How we unit test React components using expect-jsx

A ideia principal do React é que você crie componentes para absolutamente tudo e que
você fuja do estilo imperativo e adote o estilo declarativo.

Mais para frente, vou explicar porque a componentização é interessante, o que é estilo
imperativo e o que é estilo declarativo. No momento, apenas memorize que, com React,
você estará 100% do tempo criando componentes que fazem apenas uma coisa, mas
as fazem muito bem.

Nosso primeiro componente.

Ao memorizarmos que, com React, estaremos criando componentes que fazem apenas
uma coisa – e as fazem muito bem – vamos criar nosso primeiro componente.

Abra o arquivo App.js na pasta src do projeto hello-react recém-criado e substitua

todo o código-fonte existente por:

Snippet 1 – https://github.com/hnordt/react-do-basico-ao-

avancado/blob/master/snippet-1.js

Após salvar o arquivo, caso a URL http://localhost:3000 esteja aberta, ela será
atualizada automaticamente e você poderá ver o resultado.

Ufa! Consegui. E agora?

Se você chegou até aqui, muito bem! Você instalou Node.js, rodou sua primeira React
app e criou seu primeiro componente.

Provavelmente, você só copiou e colocou o código-fonte sem entender muito o que está
acontecendo e está cheio de perguntas, talvez até frustrado.
Se este é seu caso, não se preocupe. Isso era esperado. Ao invés de mostrar um “Hello
World!” comum, eu quis mostrar um exemplo que engloba praticamente tudo que você
vai usar no seu dia a dia com React.

Sério?! React é só isso?!?! Existem várias outras funcionalidades que veremos

posteriormente, mas isso é praticamente tudo que você usa no dia a dia pra criar front-
end apps com React.

Nesta série vamos falar profundamente sobre todas as funcionalidades do React, routing
e gerenciamento de estado, porém você provavelmente não irá usar todas as features no
dia a dia, e isso é intencional. Menos é mais.

É importante conhecer todas as funcionalidades das tecnologias que você usa, porém é
sábio as usar somente quando realmente necessário e preferir sempre código simples e
legível.

O segredo para criar apps escaláveis, e que, podem crescer sem quebrar funcionalidades
já existentes, é escrever código simples e legível. Isso também permite a inclusão ou
troca de desenvolvedores sem grandes dores.

Os três tipos de desenvolvedores

Apenas para complementar, acredito que existem três tipos de desenvolvedores:

1. Iniciante: possui pouco ou nenhum domínio sobre a tecnologia que está usando
e fica extremamente feliz quando algo funciona.
2. Intermediário: domina a tecnologia que está usando e escreve código
complexo, utilizando técnicas avançadas ou otimizando prematuramente, gosta
de mostrar pra todo mundo que escreveu um código que quase ninguém entende
apenas para mostrar que possui conhecimento.
3. Avançado: possui total domínio sobre a tecnologia que está usando e escreve
código extremamente simples e legível para que até mesmo um iniciante
entenda. Conhece e domina técnicas avançadas, mas as usa apenas quando
estritamente necessário.

Resumo
Nesta parte da série você instalou Node.js e rodou sua primeira app com React.
Também aprendeu que com React você cria componentes para absolutamente tudo, e
que cada componente faz apenas uma coisa, mas a faz muito bem.

Se você não entendeu nada ou pouco do que o Snippet 1 faz, não tem problema. As
próximas partes desta série irão explicar cada conceito de forma detalhada e fácil de
entender.

React: do básico ao avançado – Parte 3

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

Esta é a terceira 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 segunda parte.

Imagino que você deve estar ansioso para escrever código, mas antes quero explicar
alguns conceitos que irão ajudar a entender o que o código escrito com React realmente
faz.

Que problema React soluciona?

React foi criado para resolver apenas um problema: desenvolver apps pequenas, médias
ou grandes, que possuem dados que mudam ao longo do tempo.

Para atingir este objetivo, com React, você só precisa descrever como sua app deve se
apresentar num determinado momento com base nos dados recebidos do usuário,
browser ou back-end.

Quando algum dado muda, React simplesmente “aperta” o botão refresh e sabe como
atualizar somente as partes que mudaram, ou seja, as atualizações de interface são
gerenciadas automaticamente para você. �

É por isso que React incentiva você a escrever código declarativo em vez de imperativo.
Ao invés de dizer como fazer, você diz o que quer, e o React faz o trabalho chato pra
você.
Hum. Não sei se entendi…
Certo, vou ilustrar a explicação anterior com pseudocódigo.

Se você ainda não usou React, provavelmente você só trabalhou com classes e
instâncias. Por exemplo, com o Backbone.js, você pode criar um componente Button
criando uma classe. Quando a app estiver rodando, instâncias do componente Button
serão criadas, cada uma com suas próprias propriedades.

Neste modelo tradicional, cabe a você criar, atualizar e destruir instâncias de

componentes filhos. Se um componente Form deseja renderizar um Button, ele precisa
criar uma instância do Button, manter a instância atualizada após o recebimento de
novos dados e destruí-la quando não precisar mais dela.

Segue uma pseudo implementação do componente Form:

class Form extends TraditionalView { render() { if (!this.submitted &&

!this.button) { // Form ainda não foi submetido, // e uma instância de
Button ainda não foi criada.

// Vamos criar uma instância de Button,

this.button = new Button()

// adicioná-la a este Form,

this.el.appendChild(this.button.el)

// definir alguns atributos,

this.button.attrs.type = 'primary'
this.button.attrs.label = this.attrs.buttonLabel

// e por fim, renderizar a instância criada.

this.button.render()
}

if (this.submitted && this.button) {

// Form foi submetido,
// e uma instância de Button foi criada.

// Vamos remover a instância de Button deste Form,

this.el.removeChild(this.button.el)

// e destruí-la para limpar a memória.

this.button.destroy()
 }

if (this.submitted && !this.message) {

// Form foi submetido,
// e uma instância de Message ainda não foi criada.

// Vamos criar uma instância de Message,

this.message = new Message()

// adicioná-la a este Form,

this.el.appendChild(this.message.el)

// definir um atributo,
this.message.attrs.content = 'Sucesso!'

// e por fim, renderizar a instância criada.

this.message.render()
}

}
}

Este é um pseudocódigo e não vai funcionar.

Como dito, isto é apenas pseudocódigo, porém é mais ou menos o que você escreve
quando usa bibliotecas tradicionais como o Backbone.js.

No modelo tradicional, cada instância de um componente precisa manter sua referência

no DOM, além de criar, atualizar e destruir instâncias de componentes-filhos. O código
cresce de forma absurda caso o componente pai possua diversos componentes filhos ou
diversos tipos de estado. Além disso, como os componentes-pai possuem acesso direto
às instâncias dos componentes filhos, é extremamente difícil de desacoplá-los no futuro.

Como React é diferente?

No React foi criado o conceito de elementos. Um elemento é um objeto que descreve
uma instância e suas propriedades. Essa instância pode ser um componente, uma tag
HTML ou uma tag SVG.

É importante entender que, na verdade, um elemento não é uma instância, ao invés

disso, ele é apenas a forma que você diz para o React que quer renderizar algo na
tela, por isso elementos não possuem métodos e são imutáveis.

Elementos são, nada mais, nada menos, que objetos com apenas duas propriedades:
type e props.

Quando type é uma string, o elemento representa uma tag HTML ou SVG e seus
atributos.

Segue um exemplo:

const myAwesomeInput = { type: 'input', props: { type: 'text', value:

'����' } }
// myAwesomeInput representa a seguinte estrutura HTML:
<input type="text" value="����" />

Este é um pseudocódigo e não vai funcionar.

Nota: se você ficou curioso para descobrir o que é ����, assista este vídeo. �

No exemplo acima, type define a tag HTML e props seus atributos.

Como elementos, na verdade, são apenas objetos que descrevem uma instância, eles são
muito mais leves que instâncias verdadeiras.

Além de uma string, você pode passar um componente que você criou para type, e esta,
é a ideia principal do React.

Elementos que descrevem um componente criado por você, são como elementos que
descrevem uma tag HTML ou SVG. Não há diferença. Eles podem ser aninhados e
combinados.

Esta funcionalidade permite que você crie um componente chamado Button com uma
propriedade color específica, sem se procupar se o Button vai renderizar um button,
um div ou qualquer outra coisa.

Segue um exemplo da definição e uso do componente Button:

function Button(props) {
return {
type: 'button',
props: {
style: {
color: props.color
},
children: props.children }
}
}

const myAwesomeButton = { type: Button, props: { color: 'blue',

children: '����' } }

// myAwesomeButton representa a seguinte estrutura HTML:

<Button color="blue"> ���� </Button>

// ...que quando for renderizada pelo React, // vai se transformar em:

<button style="color: blue;"> ���� </button >

Este é um pseudocódigo e não vai funcionar.

Você notou que usamos uma propriedade chamada children. Esta propriedade nativa
do React foi criada para que o elemento-pai possa receber um ou mais elementos-filhos.
É através dela que podemos criar árvores de elementos.

Não vamos entrar em detalhes sobre a propriedade children agora, o importante é ter
em mente que no exemplo anterior, passamos uma string para children, e o React sabe
como renderizá-la corretamente. Ao invés de uma string, poderíamos também ter
passado um ou mais elementos, optamos por uma string porque queremos mostrar um
texto básico como conteúdo do Button.

Agora que sabemos como elementos funcionam, podemos reescrever nosso Form
utilizando React e o conceito de elementos.

Segue uma pseudo implementação:

function Form(props) {
if (props.submitted) {
// Form foi submetido,
// vamos pedir para o React renderizar
// um elemento do tipo Message
// com uma propriedade
return { type: Message, props: { content: 'Sucesso!' }
}
}

// Form não foi submetido,

// vamos pedir para o React renderizar
// um elemento do tipo Button
// com algumas propriedades
return {
type: Button,
props: {
type: 'primary',
label: props.buttonLabel
}
}
}

Este é um pseudocódigo e não vai funcionar.

Como você pode perceber, nós delegamos para o React a criação, atualização e
destruição de instâncias. Apenas dizemos para o React de forma declarativa o que
queremos, e ele se encarrega de gerenciar as instâncias.

Nota: as explicações e exemplos foram baseadas no artigo React Components,

Elements, and Instances criado pelo Dan Abramov.

Resumo
Nesta parte da série, aprendemos o que React soluciona e como ele soluciona.
React: do básico ao avançado – Parte 4
React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.

Esta é a quarta 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 terceira parte.

Na parte anterior, aprendemos o que React soluciona e como ele soluciona. Nesta parte,
vamos falar sobre a propriedade children e como criar elementos.

A propriedade children
Todo componente possui um tipo (type) e, opcionalmente, propriedades.

Além das propriedades que as tags HTML possuem e as propriedades que criamos para
nossos componentes customizados, existe uma propriedade especial chamada children.

Segue um exemplo:

const myAwesomeButton = {
type: 'button',
props: {
children: 'Submit'
}
}

// myAwesomeButton representa a seguinte estrutura HTML:

<button>Submit</button>

Como você pode ver neste exemplo, children representa o conteúdo da tag HTML
button, ou seja, tudo que você passar para children, será interpretado como o conteúdo
da tag HTML ou componente React:

const myAwesomeDangerButton = {
type: DangerButton,
props: {
children: 'Delete'
}
}

// myAwesomeDangerButton representa a seguinte estrutura HTML:

<DangerButton>Delete</DangerButton>

No exemplo acima, DangerButton é um componente criado por nós, e o children dele é

a string “Delete”.

O mais interessante, é que children funciona como qualquer outra propriedade, ou seja,
além de strings, você pode passar numbers, booleans, objects, arrays, functions e um ou
mais elementos (tags HTML ou componentes).
Apesar de poder passar qualquer valor para children, no dia a dia é provável que você
vá passar apenas strings, elementos e functions.

Passar uma function para children é uma das funcionalidades mais poderosas do React.
Vamos falar dela mais para frente.

Aproveitando, a biblioteca que uso em todos meus projetos foi criada utilizando a
funcionalidade de passar uma function para children. Vamos falar desta biblioteca
posteriormente, porém, se você quiser apoiar um projeto brasileiro, deixe sua �� no
GitHub do Smalldots. ��

Criando elementos
React.createElement() é a função utilizada para criar elementos no React.

Até o momento, estávamos usando objetos para representar um elemento React e, de

fato, esta representação está correta, porque de uma forma resumida,
React.createElement() apenas retorna um objeto com type e props para nós.

No entanto, para criar elementos no React você sempre deve utilizar a função
React.createElement(), além de uma série de validações, ela registra o elemento no
registro interno do React, assim as instâncias são gerenciadas automaticamente sem
qualquer trabalho da nossa parte.

Não existe qualquer outra forma de criar elementos no React, a única API disponível é
React.createElement(), e isso é ótimo, porque temos uma API extremamente simples! �

Nota: na verdade, existem duas outras formas de criar elementos, React.createFactory()

e React.DOM.x() (x é o nome da tag que você quer criar. No entanto, o uso destas
funções foram desencorajadas pelo time responsável pelo React e, provavelmente, serão
deprecadas num futuro próximo. Por isso, não vamos falar delas.

Caso você já conheça React, você pode argumentar que também podemos criar
elementos com JSX. Isso é verdade, porém quando JSX é compilado para JavaScript,
tudo será convertido para chamadas ao React.createElement().

// Com JSX, se você escrever:

<p id="apple">
Pineapple
</p>

// Isso será convertido para:

React.createElement('p', { id: 'apple' }, 'Pineapple')

Vamos falar sobre JSX na próxima parte desta série.

Utilizando React.createElement()
Na segunda parte desta série, aprendemos a criar projetos React com a ferramenta
Create React App. Caso você ainda não a tenha instalado, leia a segunda parte
novamente para realizar a instalação.

Crie um novo projeto:

create-react-app superlab
cd superlab
npm start

superlab será nosso laboratório de testes.

Imagem retirada de http://breakingbad.wikia.com/wiki/Superlab

Após a criação do projeto superlab finalizar e você rodar o comando npm start, abra o
arquivo src/App.js.

Remova a seguinte declaração:

<p className="App-intro">
To get started, edit <code>src/App.js</code > and save to reload.
</p>

Ao invés de criar este parágrafo com JSX, vamos utilizar React.createElement().

A API oficial é a seguinte:

React.createElement(type, [props], [...children])

O primeiro argumento é o tipo de elemento que queremos criar, ou seja, pode ser uma
tag HTML ou um componente que você criou. Lembre-se que tags HTML devem ser
passadas como string.

O segundo argumento é opcional e é um objeto contendo todas as propriedades que

você quer passar para o elemento.

Lembra da propriedade especial children? Você não deve defini-la dentro do segundo
argumento props, e sim, no terceiro argumento. O terceiro argumento também é
opcional.

E os três pontinhos? O que significa?! children é o plural de child, então children é

composto por um ou mais child, sendo que cada child pode ser uma string, um number,
um elemento, etc.

Por isso, os três pontinhos. Significa que a partir do terceiro argumento você pode
passar um ou mais child, assim formando children.

Após ter removido a declaração que falamos anteriormente, adicione no lugar:

{React.createElement(
'p',
{ className: 'App-intro' },
'To get started, edit ',
React.createElement('code', null, 'src/App.js'),
' and save to reload.'
)}

Observe que, no primeiro argumento, passamos o tipo de elemento que queremos. Já no

segundo argumento, passamos as propriedades do elemento. No terceiro argumento,
passamos uma string como o primeiro child. No quarto argumento, passamos um novo
elemento como segundo child, e no quinto argumento passamos uma string como
terceiro child, ou seja, o terceiro, quarto e quinto argumento formam children.

É importante notar que, quando você quiser passar children, mas o elemento não possui
nenhuma outra propriedade, você deve passar null como segundo argumento. Lembre-se
também de que cada child de children não precisa ser – necessariamente – um elemento,
ele pode ser uma string, um number, etc.

Importante!

Não esqueça das chaves no início e fim, pois como src/App.js está utilizando JSX. Elas
indicam que o compilador deve passar a interpretar JavaScript ao invés de JSX. Vamos
falar sobre isso em detalhes na próxima parte.

Como class é uma palavra reservada no JavaScript moderno, devemos utilizar

className para passar classes para elementos no React.

Não se preocupe se você não sabe o que é JSX e não entende como funciona. A próxima
parte será sobre JSX.
Agora salve o arquivo e no seu browser navegue até http://localhost:3000. Se você não
digitou nada errado, tudo deve funcionar como esperado.

Resumo
Aprendemos como funciona a propriedade children e como criamos elementos no
React.

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.