Introdução

Salve galera, tudo bem?

Começando uma nova série, vamos falar um pouco sobre React, onde vive, o que come… essa noite no gl… ops… bordão errado!

Vamos iniciar com uma introdução apresentando o que é o React, conceitos, evolução, para que a partir da segunda parte, possamos começar nossos estudos aplicando tudo na prática.

E 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 já com conceitos bem estruturados do React nesta série, vamos iniciar o desenvolvimento de aplicações Mobile (nativas!) aproveitando tudo que aprendemos.

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. Permite a construção de interfaces para usuário através do modelo de componentes.

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

No React, trabalhamos com uma nova sintaxe chamda JSX, que nada mais é do que uma extensão a sintaxe padrão do JavaScript. Vamos ver mais a frente os detalhes do JSX, vantagens, cuidados, 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, são aplicações que apresentam uma eperiência mais rica ao usuário, dado que a cada navegação entre as páginas, ou componentes, de nossa aplicação, não necessáriamente 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 isto 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 a 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 podem ser com 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. Isto 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 isto 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 iremos discutir mais a frente nesta série.

O que preciso saber para usar o React?

Resumindo: JavaScript, principalmente em questões de funcionalidades da versão ES6. Irei discutir 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.

Vamos utilizar 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 irá 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 https://yarnpkg.com/ 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 a 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.

Vamos abrir o diretório de nossa aplicação, no meu caso E:\react\todo-list, no Visual Studio Code, ou outro editor a sua escolha. Em seguida, vamos abrir 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 parte 2 daremos foco na estrutura, padrões e sintaxe.

Notem que temos uma parte, dentro do método render() (a partir da linha 7) que temos uma estrutura bem semelhante ao HTML. Vamos alterar ali dentro da primera 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, ok? 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. Isto é uma funcionalidade chamada Hot Reload, contida no processo de transpilação dos arquivos. Mais a frente vamos ver 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 apos uma alteração ter disparado uma nova transpilação do projeto.
Browser atualizado automaticamente com o novo conteúdo que inserimos.

Isto facilita e torna nosso desenvolvimento muito produtivo, pois não precismos 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.

Ainda esta semana teremos a segunda parte publicada ok? Para não perder nenhuma parte, basta me seguir aqui no Medium ou alguma das redes sociais indicadas no meu parfil para receber notificações de novas publicações.

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