React do Básico ao "Badass" — Introdução

Eu acredito que você, assim como eu, tem ouvido bastante "bafafa" em relação a um "framework" (que não é framework), e promete trazer conceitos da programação funcional para utilizarmos com javascript, e assim finalmente dominar o mundo… Certo, apesar de ainda não ter descoberto uma maneira de dominar o mundo utilizando ReactJS (eu falei, "ainda") mais conhecido como React. Existem diversas coisas legais que podemos fazer utilizando o React de uma forma digamos, um pouco mais: rápida, divertida e manutenível. É isso aí, o hype é real, e existem motivos para isso, iremos discutir alguns deles durante este post, chega mais perto e vamos entender o porque de todo esse "bafafa".

Aqui cabe um pequeno disclaimer. Escrevi este post pensando em leitores completamente leigos em React, mas que tem uma base sólida de javascript, e conceitos de web components. Esse é só o primeiro de uma série que resolvi chamar de React do Básico ao “Badass”. A série de artigos discorrerá sobre os seguintes assuntos.

• Introdução (artigo atual)
• ECMA6 para a Todos Governar
• JSX e Dumb Components (Componentes Burros)
• Lifecycle e Smart Components (Componentes Inteligentes)
• Proptypes (Verificação de Tipos)
• TODO List com React (Simplesmente porque é clássico)

Caso você não conheça muito bem de javascript aconselho ler o meu post inicial sobre O que você deveria saber sobre javascript, antes de programar em javascript.

Afinal O que é ReactJS?

React diferentemente de outras tecnologias javascript não é um framework MVC como angular, ele não se importa com controllers ou models, a única parte do MVC que o react se importa é a view. React é uma biblioteca não um framework, a diferença é simples, frameworks são opinativos e geralmente possuem um único caminho feliz para chegar a uma determinada solução, enquanto bibliotecas são geralmente agnósticas ao determinar caminhos mas te oferecem recursos para que você possa chegar a eles. React é uma biblioteca para desenvolver componentes de interface, apenas isso. PAREM DE TENTAR COMPARAR REACT COM ANGULAR (caso não tenham percebido, isso foi um grito dramático).

Porquê React?

Você sabe que você é assim, até eu sei que você é assim (não tente me enganar), sempre querendo utilizar algum tipo de tecnologia nova/alternativa para resolver seus problemas simplesmente porque é legal. Apesar de ser bem legal de fato, muitas vezes não é muito aconselhável, não adianta utilizarmos uma tecnologia simplesmente porque algum carinha importante de alguma empresa fintech da modinha disse que está utilizando. Apesar de isso acontecer bastante no mundo real não é bom pensarmos dessa forma, no lugar disso faremos uma análise das qualidades e o que o React traz de positivo para melhorar a sua vida.

Aprenda uma vez, rode em qualquer lugar: Já faz um tempo que não construímos uma aplicação para um tipo específico de plataforma, geralmente tínhamos que escrever diferentes códigos para a mesma solução. Também já faz um tempo que existem soluções para evitarmos essa redundância, vulgo Phonegap (cordova), Ionic, etc. Essas soluções funcionavam como uma interface entre o dispositivo e a aplicação permitindo o acesso aos recursos que antes não eram acessíveis pelo browser. Porém essas soluções possuíam limitações, tanto em relação a quantidade de recursos disponíveis do dispositivo quanto a performance que deixa a desejar por se tratar de uma aplicação webview, e não uma aplicação nativa. O React traz pra nós a opção realmente de compilar o nosso código javascript para um código nativo rodando com as mesmas capacidades de um código nativo Android, IOS, etc. A diferença é que você não terá que aprender uma nova tecnologia para isso ;).

Baseado em componentes: React cria interfaces baseadas em componentes reutilizáveis, a ideia é quebrar a interface em partes menores, e resolver em uma abordagem do menor para o maior. Uma arquitetura componentizada te permite isolar comportamentos específicos para futuras reutilizações, dentro ou fora do contexto em que o componente se encontra

Virtual DOM: Você já deve saber que um dos maiores problemas de performance de aplicações de webview, é o nosso amigo não tão amado DOM (Document Object Model), ele é o responsável por vários gaps relacionados ao desenvolvimento web, sendo o principal deles é a performance, para resolver esse problema o React implementa o Virtual DOM, uma abstração do DOM, que simplificando ao máximo, ele trabalha como uma camada entre o DOM real e a aplicação fazendo uma diff do modelo e atualizado no DOM real apenas o que é realmente necessário, melhorando a performance significativamente.

Colocando a mão na massa

Para rodar o react você precisa ter instalado no seu ambiente o node e seu gerenciador de dependências npm. Para criar um projeto você utiliza duas dependências básicas o react e o react-dom, esses dois módulos vão prover os recursos necessários do react, porém como nem tudo é um arco-íris em um céu azul, precisamos de mais algumas coisinhas para rodar nossa aplicação no react. O react foi segue baseando suas especificações nas novas versões do Javascript, o ECMA6 (ou se preferir ecma 2015) e posteriores, como a maioria dos browsers ainda não dão 100% de suporte a essa versão do javascript precisamos de um transpiler (transpilador) que vai traduzir o nosso código em javascript standart que é compatível com a maioria dos browsers, para resolver esse problema, utilizamos o babel, um dos transpilers mais conhecidos e utilizados no mercado. Mas não acaba por aí, além do transpiler vamos utilizar um bundler, que basicamente vai fazer as tarefas de minificar, juntar e carregar nossos arquivos fontes em apenas um arquivo, o recomendado pelos próprios desenvolvedores do facebook é utilizar o Webpack. Ufaaa, terminou?!

Eu sei que nesse momento tem o grande risco de você estar se sentindo dessa forma…

Terei que aprender tudo isso para fazer uma aplicação com react? A boa notícia é que não! Nossos amigos engenheiros do facebook acharam por bem criar um módulo (CLI) que já faz toda a configuração necessária e cria um start de projeto básico, para você que como eu, não quer perder seu tempo configurando milhões de arquivos para buildar seu projeto, afinal você tem coisas um pouco mais importantes para se preocupar né?! (como dominar o mundo :)) .

Create React App

Para instalação e uso do create-react-app rode os seguintes comandos no seu terminal:

npm install -g create-react-app //Instala globalmente o modulo

create-react-app my-app //Cria projeto com o nome my-app
cd my-app/ //Entra no projeto
npm start //Inicia seu projeto em um servidor local para dev

Se tudo funcionou corretamente você deverá ver uma janela do seu browser abrindo com a aplicação do react iniciada exibindo uma página default do módulo.

Conclusão

Esse foi só o início da série, espero que tenha sido uma leitura agradável. Dúvidas ou Erratas são bem vindas nos comentários, abraços a todos e até o próximo ;).