React series: Iniciando com React

Muitos confundem ou comparam o React com algum framework front end MVC como o Angularjs ou Vue.js. A verdade é que o react se responsabiliza apenas pelo V do MVC. Usando o Virtual DOM e a idéia de componentização o react proporciona um fácil aprendizado e uma boa performance em seus projetos.

Oque é o React

Como comentado anteriormente, o ReactJs é uma biblioteca desenvolvida pelo Facebook e que nos últimos anos vem ganhando cada vez mais aceitação na comunidade, basta visualizar o crescimento do número de pesquisas no google trends pelo termo.

Essa tendência se da talvez pelo fato de ter uma grande empresa como o Facebook por trás. Mas a verdade é que o React proporciona em seu desenvolvimento um workflow simples e produtivo, e que oferece uma stack simples e interessante para se trabalhar atraindo com isso muitos desenvolvedores.

A ‘Mágica’ do Virtual DOM

A ‘mágica’ que o React faz no Virtual DOM de mágica não tem nada, a verdade é que o algoritmo do React faz uma especie de diff das mudanças realizadas no dom, e muda isso e somente isso no mesmo. Para entender o algoritmo desse funcionamento, o Christopher Chedeau em 2013 publicou um post detalhado explicando tudo.

Pensando em componentização com React

Além do uso do virtual DOM, uma das grandes sacadas do React é o uso da componentização. A idéia em si é muito simples, consiste em dividir as responsabilidades da aplicação em pequenos (ou não) componentes e subcomponentes, afim de viabilizar uma melhor manutenção e modularização do código.

Para entendermos melhor esse conceito, vamos analizar a imagem abaixo.

Imagine que o YouTube seja feito em React, se fossemos dividir a página de exibição de vídeos em componentes e subcomponentes, poderiamos separá-la em algo semelhante ao que é apresentado na imagem acima.

Note que na imagem temos exemplos de componentes e subcomponentes. Os subcomponentes são os<Video/>, que são ‘filhos’ do <ListVideo/>, e todos os demais componentes não apresentam subcomponentes, a estrutura organizacional pode ser apresentada dessa forma:

Organizando a aplicação dessa forma, notasse a divisão de responsabilidades, modularização e a facilidade que será testar esses componentes individualmente. Com isso fica evidente o aumento de produtividade que se ganha trabalhando com a idéia de componentização no React. Via de regra, o ideal é sempre que possível quebrar componentes ‘grandes’ em componentes ‘menores’, é o chamado ‘Dividir para conquistar’.

Configurando o ambiente de desenvolvimento

Um dos pré-requisitos para desenvolver com React é primeiramente configurarmos um ambiente para isso, além do React instalado, vamos precisar do yarn, babel, webpack e lógicamente do es2015. Indo por partes …

Yarn

O Yarn é uma alternativa ao já conhecido Npm. Desenvolvido pelo Facebook, a ferramenta atrela a praticidade já conhecida do Npm a uma maior velocidade na instalação dos pacotes além de ter por trás do seu desenvolvimento o Facebook.

Para instalarmos o yarn em nossa máquina, tudo que devemos fazer com o nodejs devidamente instalado é executar o comando abaixo:

$ npm install -g yarn

E por fim verificar se deu tudo certo:

$ yarn -v
yarn install v0.20.3
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.50s.

Babel

O babel é o transpiler que irá transpilar o nosso código de EcmaScript 6 (ou ES6) para a versão ‘tradicional’ do javascript, possibilitando com isso desenvolvermos utilizando os novos recursos do javascript mesmo sem os browsers darem suporte ainda.

A primeira coisa que devemos fazer é criar um package.json para salvarmos todas as nossas dependências, para isso execute:

$ yarn init -y

O comando acima irá gerar um arquivo package.json em nosso diretório raiz, e será nele que salvaremos todas as dependências usadas em nosso projeto.

As primeiras dependências que instalaremos será o babel-core e o babel-loader, ambos responsáveis por realizar nossos transpiles, para isso execute:

$ yarn add babel-core babel-loader --save-dev

O parâmetro --save-dev indica que salvaremos essas dependências como dependências de desenvolvimento tendo em vista que não será utilizadas em produção.

Instalada essas dependências é hora de instalarmos nosso presets que serão os responsáveis por entender nosso código em es2015 e o código React, para isso execute:

$ yarn add babel-preset-es2015 babel-preset-react --save-dev

Finalizado essa etapa o conteúdo do nosso package.json será algo proximo a isso:

Webpack

O webpack é um module loader que se encarregará de vasculhar todos os seus módulos javascript e empacotar isso para web.

Para instalarmos o webpack execute o comando abaixo:

$ yarn global add webpack webpack-dev-server --save-dev

usamos o parâmetro global para indicarmos que a instalação desses módulos será em mobo global, ou seja podemos executar o webpack como um comando no terminal.

Com o webpack instalado é hora de configurar nosso webpack.config.js, esse arquivo é o arquivo que o webpack por padrão usa para guardar todas as suas configurações. O conteúdo mínimo que podemos inserir nele é apresentado abaixo:

Como você pode notar, o nosso arquivo webpack.config.js é um arquivo javascript normal que expõe um módulo com várias configurações, para entender-mos uma a uma vamos lista-las abaixo:

  • entry — O Entry é referente ao entry point do nossos arquivos, é apartir dele que o webpack irá começar a vasculhar e empacotar nossos arquivos, no nosso caso será apartir do arquivo index.jsx.
  • output — O Output é referente a saida do empacotamento dos arquivos, é nele onde especificamos o diretório onde o arquivo de empacotamento será criado informado no path, e o nome do arquivo em questão informado no filename, no nosso caso o bundle.js será criado no diretório public do nosso projeto.
  • devServer — O devServer é referente ao nosso servidor de desenvolvimento, nele especificamos a porta que será usada informada no port, e o conteúdo que será exibido presente em um diretório, no nosso caso usaremos a porta 8080 e exibiremos o conteúdo do diretório public.

Terminada a configuração básica, precisamos agora configurar nossos loaders e os presets para o React funcionar sem nenhum problema, para isso adicionamos o conteúdo abaixo do devServer deixando nosso webpack.config.js dessa forma:

  • test — O nosso loader aplica um teste através de uma expressão regular e verifica se o arquivo carregado tem a extensão .jsx.
  • loader — O loader é responsável por carregar o módulo que fará nosso transpile, no caso o babel.
  • exclude — O exclude indica os diretórios no qual o webpack não deve vasculhar, ou seja, todos os módulos instalados via yarn ficam armazenados no diretório node_modules, e por tanto devem ser ignorados.
  • query — O query é um objeto que armazena algumas informações, a que nos interessa no momento são os presets são necessários para reconhecer predefinições que por padrão o webpack não reconhece, ou seja, se precisarmos trabalhar com React, precisamos configurar um preset do React para que ocorra o transpile do mesmo via webpack. No nosso arquivo configuramos o preset do es2015, e do react que instalamos anteriormente.

es2015

O es2015 é a nova versão do javascript … se você quiser um site de referências sobre as novas features do es2015, acesse: http://es6-features.org/

Criando uma aplicação React

Com as dependências devidamente instaladas, é hora de criar nossa primeira aplicação com react, para isso crie uma diretório chamada public, e em seguida crie um arquivo chamado public/index.html dentro desse diretório com o conteúdo abaixo:

Atente-se para a div com o id ‘app’, será nela que o nosso conteúdo oriundo do React será renderizado, e ao bundle.js, é esse arquivo que será gerado após o webpack realizar o transpile dos nossos componentes React.

Antes de começarmos a trabalhar no primeiro componente React, precisamos instalá-lo em nosso projeto, para isso execute:

$ yarn add react react-dom --save

Com o React devidamente instalado, no diretório onde se encontra o diretório public, crie um arquivo chamado index.jsx, esse arquivo servirá como endpoint para todos os demais componentes react que criaremos.

Esse componente em si é muito simples, primeiro importamos o React e o ReactDOM, que são as duas dependências necessárias para tudo funcionar. e por fim utilizamos o método render do ReactDOM para renderizar o nosso H1 na div que tem o id app lá no nosso index.html, fácil né?

Finalizado todo esse processo, abra o arquivo package.json e adicione o script abaixo:

Esse script agilizará o processo de execução do webpack-dev-server. No terminal execute:

$ yarn run dev

Sua aplicação executará na porta 8080, acesse http://localhost:8080 e veja o resultado.

Agilizando seu workflow com create-react-app

O processo descrito acima apesar de ser simples, é um tanto trabalhoso, não seria legal se tivessemos a nossa disposição uma ferramenta que otimizasse todo esse processo de configuração de ambiente para que focassemos apenas no desenvolvimento dos componentes react? Pois é, nós temos. Pensando nisso a equipe do React criou o create-react-app, que é uma cli que nos ajuda nesse processo, para instalá-lo é muito simples, basta executar o comando abaixo:

$ yarn global add create-react-app

Com a ferramenta instalada, podemos criar nossa aplicação executando:

$ create-react-app my-app

Será criado um diretório chamado my-app com um scaffold do projeto já todo configurado, para executá-lo dentro da pasta criada execute:

$ yarn run start

O React irá transpilar todos os arquivos e abrir o browser automáticamente para você.

Bem mais fácil né? Até a próxima.

❤ Gostou? Vamos espalhá-lo — curte e compartilha aí o/

Like what you read? Give Hudson Brendon a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.