Front End

5 mar, 2019

Desenvolvendo aplicações Web com React – Parte 01

Publicidade

Fala, galera! Tudo bem?

Vamos começar uma nova série sobre React! Começaremos com uma introdução, explicando o que é o React, os principais conceitos e evolução, para que a partir da segunda parte possamos começar nossos estudos aplicando tudo na prática.

Já adiantando e gerando aquela ansiedade básica na galera: após esta série pretendo iniciar uma continuação, abordando o React Native, onde daremos início ao desenvolvimento de aplicações Mobile (nativas!) aproveitando tudo que aprendemos e vimos nesta série.

Mas antes de tudo, vamos começar com uma pergunta básica:

O que é React?

React é uma biblioteca voltada para UI, construída em JavaScript pelo Facebook. Ela permite a construção de interfaces de usuário através do modelo de componentes.

A biblioteca foi criada para que você possa usá-la de forma gradual, ou seja, você pode adicionar pequenos componentes em sua aplicação web, iniciando uma melhoria na experiência final do usuário, ou até mesmo adotar como base para uma nova aplicação web do zero.

No React trabalhamos com uma nova sintaxe, chamada JSX, que nada mais é do que uma extensão da sintaxe padrão do JavaScript. Veremos mais a frente os detalhes do JSX: vantagens, cuidados e etc.

Meu principal uso do React no dia a dia é para o desenvolvimento de Single Page Applications.

O que são Single Page Applications?

Também conhecidas pela sigla SPA, elas são aplicações que apresentam uma experiência mais rica ao usuário, dado que a cada navegação entre as páginas – ou componentes – de nossa aplicação não necessariamente precisa existir uma chamada ao servidor e que o usuário aguarde a transferência do conteúdo HTML do servidor.

Uma SPA é uma aplicação feita com HTML, CSS e principalmente JavaScript, que é carregada inicialmente pelo browser, armazenando os resources estilos, campos das telas, lógica de exibição das views em cache, de forma que novas requisições ao servidor normalmente são referentes a dados necessários para popular informações na view ou mesmo componentes carregados sob demanda (veremos isso quando entrarmos no assunto Lazy Loading).

O nome Single Page inclusive remete a um carregamento de uma única página, onde o JavaScript irá manipular os elementos nela contidos e renderizar estes conforme necessário.

Com isso, o usuário tem um feedback mais rápido e rico quando navega entre as telas de nossa aplicação, sendo que muitas vezes existe parte da lógica no código JS já baixado, não sendo necessária a comunicação com o servidor. Isso, além de melhorar a experiência, também economiza a banda de rede do usuário.

Apenas um detalhe que vamos abordar em partes mais avançadas: ter parte da lógica ou mesmo validações nas telas, não significa que nosso servidor não deva validar o que ele recebe, ok? JavaScript, por mais que seja minificado, sempre está disponível ao usuário pelo browser e pode ser modificado.

Alinhado o conceito básico de uma SPA, voltamos à biblioteca React.

Como o React funciona?

Quem já manipulou elementos diretamente no DOM, seja através de jQuery ou VanillaJS, sabe que isso é custoso e em algumas situações, lento, chegando até mesmo a congelar a UI do browser por alguns segundos, dependendo da máquina do cliente e tamanho dos objetos manipulados.

O React trabalha com o conceito de Virtual DOM, que nada mais é que uma árvore, onde os objetos nada mais são do que objetos simples, que trazem uma performance muito maior que a do browser.

Ao final da construção do Virtual DOM, esta árvore é comparada com a árvore do DOM real no browser e apenas os componentes que precisam de uma nova renderização são modificados. Isso torna a renderização dos componentes muito mais rápida. Abaixo temos um diagrama para deixar mais claro o fluxo de renderização.

Exemplificando o “diff” entre o DOM real e virtual e a aplicação da renderização apenas onde necessário.

E como o React sabe quais componentes ele precisa atualizar na árvore virtual?

Estado e ciclo de vida dos componentes

Existe uma trigger principal que ativa o processo de atualizar o Virtual DOM e renderizar o DOM novamente, que é quando o estado do componente muda.

O “coração” de todo componente no React é o estado (state), que nada mais é do que um objeto que armazena informações no component, permitindo que este possa apresentar conteúdo dinâmico e determina como e quando o componente é renderizado e seu comportamento.

Em resumo, é como uma máquina de estados. Sempre que o estado for alterado por uma ação específica, ele informa ao controle do DOM Virtual que um nó e seus filhos tiveram informações modificadas e isso dispara o fluxo de renderização dos componentes.

Para exemplificar melhor, temos o diagrama a seguir, complementando o diagrama de renderização, agora com o estado nele.

Uma ação altera o estado, que dispara uma atualização do Virtual DOM e consequentemente a renderização do DOM.

Existem outras formas de controlar o estado em uma aplicação como usando através do Flux ou Hooks, mas são tópicos mais avançados que discutiremos mais à frente nesta série.

O que preciso saber para usar o React?

Resumindo: JavaScript. Principalmente em questões de funcionalidades da versão ES6. Discutirei como esta questão de features do JS e transpiladores funcionam em outro artigo, aqui vamos focar apenas no React, ok?

Instalando o Node, React e criando um projeto

Antes de tudo, precisamos ter instalado em nossa máquina a engine do NodeJS, que pode ser obtida em https://nodejs.org/.

Eu, particularmente, utilizo a última versão, que no momento em que estou escrevendo este artigo é a 11.10.0, mas a versão LTS pode ser utilizada sem problemas.

Utilizaremos uma ferramenta chamada create-react-app, criada pelo Facebook para iniciar um novo projeto.

Para instalar o CLI do create-react-app, vamos executar o comando npm install -g create-react-app, como na imagem a seguir.

Instalando o CLI do create-react-app

Agora vamos executar o comando create-react-app todo-list para criar uma aplicação chamada todo-list. Neste momento, o CLI criará uma estrutura de projetos e fará o download das dependências, utilizando o Yarn, que faz o mesmo papel do comando NPM, mas com algumas otimizações, como download paralelo de dependências. Caso não conheça o Yarn, acesse este link para mais detalhes.

Criando uma nova aplicação em React através do CLI

Notem que no final o script de instalação já nos mostra alguns comandos. Na próxima parte da série vamos explorar melhor estes comandos.

Basicamente, para iniciar nossa aplicação, devemos entrar no diretório todo-list e podemos utilizar o comando yarn start ou apenas npm start, dependendo de qual CLI você estiver utilizando.

Após executar o comando, você verá no terminal que sua aplicação foi compilada (sendo que o mais correto é dizer transpilada, mas discutiremos isso mais à frente) com sucesso e os endereços para acesso, tanto local quanto externo via IP da máquina.

Aplicação em execução

Ao abrir o browser em qualquer um dos endereços, podemos ver o template inicial da aplicação em execução.

Browser com nossa aplicação em execução.

Abriremos o diretório de nossa aplicação. No meu caso, E:\react\todo-list, no Visual Studio Code, ou outro editor à sua escolha. Em seguida, abriremos o arquivo App.js, que está no diretório src.

Abrindo o projeto react dentro do VS Code.

Nesta primeira parte não vamos nos preocupar ainda com formato, sintaxe, nem nada. Estamos apenas vendo como funciona o CLI para execução da aplicação. Na segunda parte daremos foco na estrutura, padrões e sintaxe.

Notem que temos uma parte, dentro do método render() (a partir da linha 7) com uma estrutura bem semelhante ao HTML. Vamos alterar ali dentro da primeira tag <p> (linha 12) o conteúdo para “Minha primeira aplicação React”.

Notem que em nenhum momento interrompemos o CLI do npm no terminal, certo? Caso tenha feito, inicie a execução novamente como expliquei acima.

Ao salvar o arquivo podemos notar tanto no terminal quanto no browser, que nossa aplicação foi automaticamente transpilada e o browser atualizado. Isso é uma funcionalidade chamada Hot Reload, contida no processo de transpilação dos arquivos.

Mais à frente veremos isso no detalhe, mas por agora, nos interessa saber que podemos ir atualizando o conteúdo da nossa aplicação enquanto o resultado é atualizado no browser cada vez que salvamos as alterações de algum arquivo do projeto, com algumas exceções.

Aplicação atualizando no browser após uma alteração ter disparado uma nova transpilação do projeto.
Browser atualizado automaticamente com o novo conteúdo que inserimos.

Isso facilita e torna nosso desenvolvimento muito produtivo, pois não precisamos parar a aplicação, transpilar ela inteira e executar novamente a cada alteração, pois utilizando o boilerplate fornecido pelo create-react-app, já temos isso em tempo real, de forma rápida, pois é feito um diff do que mudou apenas na transpilação e não perdemos tempo entre um stop & start da aplicação.

Concluindo

Hoje conhecemos um pouco sobre o que é a biblioteca React, como criar um projeto utilizando o CLI oficial do Facebook e executar nosso projeto.

Na segunda parte vamos aprender sobre a estrutura básica de um projeto feito com React (existem várias formas de se trabalhar – estou abordando uma comum, que utilizo no meu dia a dia) e começar a desenhar nossa aplicação de lista de tarefas, além de já adicionar algumas funcionalidades a ela.

Como sempre, deixe seu feedback, o que gostaria de ver nas próximas partes da série, dúvidas e críticas.

Para não perder nenhuma parte, fique de olho no portal, ou me siga em alguma das redes sociais indicadas no meu perfil para receber notificações de novas publicações.

Um abraço a todos e até a próxima!