Esta é a primeira parte de uma série de artigos que ensina a desenvolver e estruturar
aplicações com JavaScript e React.
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. �
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.
Não concordo muito com comparações que tentam buscar um ganhador entre
tecnologias para desenvolvimento de apps.
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.
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.
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.
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.
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:
Após isso, você pode abrir a URL http://localhost:3000 no seu navegador preferido para
visualizar sua app.
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! �
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.
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.
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.
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.
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.
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.
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.
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.
// definir um atributo,
this.message.attrs.content = 'Sucesso!'
}
}
Como dito, isto é apenas pseudocódigo, porém é mais ou menos o que você escreve
quando usa bibliotecas tradicionais como o Backbone.js.
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:
Nota: se você ficou curioso para descobrir o que é ����, assista este vídeo. �
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.
function Button(props) {
return {
type: 'button',
props: {
style: {
color: props.color
},
children: props.children }
}
}
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.
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!' }
}
}
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.
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'
}
}
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'
}
}
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.
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! �
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().
<p id="apple">
Pineapple
</p>
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.
create-react-app superlab
cd superlab
npm start
Após a criação do projeto superlab finalizar e você rodar o comando npm start, abra o
arquivo src/App.js.
<p className="App-intro">
To get started, edit <code>src/App.js</code > and save to reload.
</p>
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.
Por isso, os três pontinhos. Significa que a partir do terceiro argumento você pode
passar um ou mais child, assim formando children.
{React.createElement(
'p',
{ className: 'App-intro' },
'To get started, edit ',
React.createElement('code', null, 'src/App.js'),
' and save to reload.'
)}
É 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.
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.
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.
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.
<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.
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.