React do básico ao avançado.pdf

React: do básico ao avançado –  Parte  Parte 1  React  é uma biblioteca JavaSc  JavaScript  ript  para  para desenvolvimento de interfaces inter faces de usuário.

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

JavaScript vs. ECMAScript  ECMAScript  é

 JavaScript  cript , ou seja, é a especificação o nome da versão padronizada do  JavaS  JavaS cript . 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  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 utilizar mos 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 mera mente ilustrativa, não se preocupe p reocupe se você não entendeu. entende u.  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).

I mportante:  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.

é 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. Create React App

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 preocup e 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 pratic amente 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  frontend 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:

 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 children: '' } }

=

{

type:

Button,

props:

{

color:

'blue',

// myAwesomeButton representa a seguinte estrutura HTML:   // ...que quando for renderizada pelo React, // vai se transformar em:  

 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 utilizando React e o conceito de elementos.

Form

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: Submit

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: Delete

 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:

Pineapple

// Isso será convertido para: React.createElement('p', { id: 'apple' }, 'Pineapple')

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

Utilizando React.createE lement()

 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:

To get started, edit src/App.js and save to reload.

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: 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.cr eateE lement() .

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.