O desenvolvimento front-end, que é a programação voltada à interface com o usuário, evolui constantemente e requer a construção de componentes cada vez mais interativos e dinâmicos. Felizmente, existem diversas ferramentas no mercado, como o React, que ajudam às pessoas que desenvolvem sites a criar páginas com inúmeras funcionalidades.
De acordo com as estatísticas apresentadas no site Built With, existem 1.514.702 sites no mundo que utilizam o React. Só no Brasil, o número é de 6.700 páginas. Além disso, 17,81% dos que utilizam a tecnologia têm o volume de tráfego multo alto e 8,37% têm o volume alto, o que demonstra a capacidade de resposta da biblioteca ao atender um grande número de requisições simultâneas.
Neste post, vamos mostrar:
- O que é React?
- Como funciona o React?
- Por que usar React?
- Como usar React?
Continue a leitura para saber mais!
O que é React?
O React é uma biblioteca JavaScript criada pelo Facebook para o desenvolvimento de aplicações front-end. Ele é baseado em componentes, o que permite o reaproveitamento de código e facilita a manutenção. No padrão de arquitetura MVC — Model View Control — ou Modelo Visão Controle, em português, ele é comparado ao desenvolvimento da camada View, que é a interface com o usuário (UI).
A biblioteca React é open source, o que significa que qualquer pessoa pode baixar seu código fonte, fazer modificações e distribuir essas alterações. Ela foi aberta para a comunidade em 2013. Além de receber atualizações do Facebook, conta com uma grande comunidade ativa, com mais de 1.300 colaboradores no GitHub que ajudam a aprimorar o código e usada por mais de 3,4 milhões de projetos.
Ele também é utilizado para o desenvolvimento de página SPA — Single Page Application —, que utiliza o padrão REST para atualizar o conteúdo com requisições AJAX. Seu objetivo é facilitar o desenvolvimento front-end por meio de componentes reutilizáveis, tanto para a web quanto para aplicações em dispositivos móveis, que nesse caso é feito com o React Native.
Vale ressaltar que o React Native é utilizado para criar aplicações em dispositivos móveis para Android e iOS. A grande vantagem da biblioteca é que apenas uma codificação pode ser utilizada nas duas plataformas, garantindo mais produtividade no desenvolvimento para aplicativos móveis.
Assim como na versão do React para web, o React Native também trabalha com a utilização de componentes e utiliza a sintaxe JSX para o desenvolvimento da aplicação. Para permitir a renderização de acordo com a plataforma, a biblioteca utiliza APIs em Swift, necessárias para o iOS, e em Kotlin para serem utilizadas no Android.
O React pode ser comparado a outros frameworks utilizados para a criação de SPAs como o Angular, Knockout.js, entre outros, que também atendem ao padrão de desenvolvimento MVC. A biblioteca pode ser utilizada com qualquer tipo de linguagem de back-end, ou seja, a aplicação pode ser em PHP, Java etc. Além disso, ela funciona em conjunto com outras bibliotecas ou frameworks JavaScript, como Bootstrap e JQuery.
Como funciona o React?
O React tem algumas funcionalidades que o tornam uma biblioteca eficiente para o desenvolvimento de aplicações front-end com elementos interativos. Confira, a seguir, algumas de suas características.
Virtual DOM
Para entender como o React funciona é preciso conhecer a estrutura de uma página HTML e de que forma ela é manipulada. A página HTML é formada por uma série de tags que representam cada elemento de um conteúdo. Já o DOM — Document Object Model — é uma representação estruturada de todos os elementos da página e é utilizado para facilitar as alterações nesses elementos.
O React cria um DOM Virtual para permitir a manipulação dos elementos da página. Basicamente, ele realiza uma cópia do DOM em memória, faz as alterações necessárias conforme a determinação das instruções programadas e atualiza o navegador de forma inteligente. Esse processo oferece mais agilidade na manipulação das páginas.
JSX
A sintaxe utilizada pelo React é chamada JSX, que significa JavaScript Syntax Extension. Trata-se de uma extensão para o JavaScript, ou seja, oferece algumas funcionalidades a mais e permite escrever de forma simples JavaScript e HTML no mesmo código.
Sua característica de mesclagem entre JavaScript e HTML oferece uma sintaxe de fácil aprendizado, além de facilitar o desenvolvimento e o entendimento das funcionalidades do código.
Para que o JSX seja interpretado pelo navegador ele deve passar por um transpilador de código, chamado Babel, que lê o conteúdo do arquivo .JSX e o transforma em um arquivo JavaScript — a linguagem utilizada pelos navegadores. Vale ressaltar que existem outros tipos de transpiladores semelhantes a esse.
O React trabalha com o tipo de programação declarativa para interagir com o DOM. Na prática, basta dizer o que é preciso fazer e o React se encarrega de transformar a instrução em código JavaScript e executá-la da melhor maneira. Ou seja, não é feita a manipulação direta do DOM.
Um exemplo é a atribuição de um texto qualquer em um elemento <h1>. Na programação declarativa, basta declarar uma variável e associá-la ao elemento HTML. O React fará a manipulação do DOM para inserir o valor dessa variável no respectivo elemento. Confira o código:
const meutexto = <h1>Vamos aprender React?</h1>;
ReactDOM.render(meutexto, document.getElementById('exibetexto'));No código da página HTML:
<div id="exibetexto"></div>Neste exemplo foi utilizado o comando ReactDOM.render(), que é responsável por renderizar o conteúdo declarado na constante “meutexto”, utilizar o DOM virtual para encontrar o elemento “exibetexto” e inserir o seu conteúdo no elemento div.
Componentes React
A principal característica do React é permitir a criação de componentes que podem ser reutilizados em diversas páginas. Na prática, são blocos de códigos reutilizáveis que agregam funcionalidades e que retornam ao código HTML após a renderização pelo navegador.
Os objetos em uma página podem ser dinâmicos, quando seus dados são alterados, ou estáticos, que mantêm seu conteúdo inalterado. Por exemplo, é possível declarar um título <h1> com um determinado conteúdo. Se ele for dinâmico, significa que é manipulado por uma função responsável por alterar o valor atribuído inicialmente a ele.
No React, o estado dos elementos da página pode ser acessado em um componente. Basicamente, existem dois tipos de componentes, que tratam esse estado de forma diferenciada. O componente que não monitora o estado dos elementos é chamado de Stateless. Desse modo, ele conta com um objeto de propriedade em que é atribuído o seu valor fixo.
Já o modelo Stateful tem um objeto de propriedade para a atribuição de seu valor original e um objeto de estado, responsável pelas mudanças que ocorrem no conteúdo desse componente.
Flux
Flux é o padrão de arquitetura utilizado pelo Facebook para construir páginas que acessam a sua aplicação back-end, ou seja, que se conectam à base de dados para recuperar as informações armazenadas. Ele funciona semelhante à arquitetura MVC, entretanto, difere desse modelo devido à forma de acesso aos dados ser unidirecional.
O Flux pode ser dividido em alguns componentes, que são responsáveis por fazer a comunicação e a recuperação dos dados da aplicação. São eles:
- Actions;
- Dispatcher;
- Stores;
- Views.
Vale ressaltar que o Flux é somente um padrão de arquitetura, não havendo implementações. Portanto, é preciso utilizar uma biblioteca para aplicar esse conceito — e uma maneira de fazer isso é por meio da biblioteca Redux. Falaremos sobre ela mais adiante!
Por que usar React?
Existem diversas empresas no Brasil que utilizam o React. No site da biblioteca há uma lista que demonstra todas as que fazem uso dessa tecnologia, entre elas Accenture, Globo.com, Hotmart, iFood, Trybe e muito mais. Confira, a seguir, algumas características que contribuem para esse sucesso e por que é importante aprender a programar com essa tecnologia.
É fácil de aprender
Uma das razões importantes para utilizar o React é a facilidade de aprendizado da biblioteca. Além de ter uma sintaxe bem semelhante ao JavaScript, o que facilita ainda mais para quem já conhece essa linguagem. Além disso, o React também conta com uma ampla documentação, inclusive com exemplos, sobre as suas funcionalidades em sua página oficial.
Permite a reutilização de componentes
Ao desenvolver uma página utilizando React todos os seus componentes podem ser reaproveitados. Imagine uma página dividida em menu superior, barras laterais e conteúdo central, na qual cada um desses grupos representa um componente. Dentro deles existem outros componentes, como links, botões, caixa de textos etc.
Ao desenvolver um componente para o menu superior, como uma barra de pesquisa, ele pode ser reutilizado em outro ponto da página, como na barra lateral, sem que seja preciso reescrever o código. Dessa forma, ganha-se em produtividade e facilidade para a manutenção.
Tem rápida renderização com o Virtual DOM
Muitas aplicações requerem um grande número de interações com a pessoa usuária, como o preenchimento de formulários. A manipulação direta do DOM, que é a forma utilizada em requisições feitas apenas com JavaScript, diminui o desempenho, pois é mais trabalhosa e complexa, já que é preciso pesquisar os elementos para alterar o seu estado.
Ao utilizar o virtual DOM, o React ganha mais agilidade e há um melhor desempenho da página, pois a manipulação é feita na memória e com a atualização otimizada pelos recursos oferecidos pela biblioteca.
É amigável com SEO
O React é uma biblioteca que também é utilizada para o desenvolvimento de SPAs. Uma das dificuldades encontradas nesse modelo é o fornecimento de URLs para os motores de busca, já que as requisições são feitas dinamicamente, o que dificulta o rastreamento adequado.
O React oferece o componente chamado React Router, que é capaz de gerar as rotas utilizadas pela aplicação. Dessa forma, é possível criar a estrutura de URL amigável necessária para a indexação pelos mecanismos de busca.
Além do React Router, também existe outras bibliotecas que visam melhorar o SEO de páginas construídas com React, um deles é o React Helmet onde você pode transformar o código JSX em um código mais amigável para os motores de busca.
Apresenta fácil implementação
O React é fácil de utilizar e pode ser implementado aos poucos em uma aplicação. Isso significa que não é preciso fazer a migração em todas as páginas de uma só vez. Em vez disso, é possível implementar apenas uma página por vez e fazer uma mudança gradual.
Essa característica é importante para evitar a necessidade de reescrever toda a interface com a pessoa usuária, o que contribui para evitar grandes impactos que uma mudança no front-end pode causar — como a indisponibilidade da aplicação até que algum eventual problema seja identificado e resolvido.
Como usar React?
Para utilizar o React é preciso ter conhecimento em HTML, JavaScript e CSS. Isso porque essas tecnologias são imprescindíveis para o desenvolvimento de aplicações front-end. Confira agora como utilizar a biblioteca em uma aplicação front-end!
Criação do ambiente
Para usar o React é preciso utilizar o gerenciador de pacotes NPM, que faz parte do Node.js. Essa é uma ferramenta importante para a criação do ambiente. Vale ressaltar que o Node é utilizado para interpretar JavaScript e oferece a ferramenta NPM, que permite a instalação de bibliotecas e frameworks por meio da linha de comando (CLI).
A instalação do React é feita com apenas uma linha de comando, que fará o download da biblioteca e a instalação no computador, conforme o comando a seguir:
npm install -g create-react-app A criação do ambiente também é feita com apenas um comando e a estrutura do projeto será criada no diretório corrente, ou seja, na pasta em que ele for digitado. A seguir, a biblioteca faz a criação da estrutura necessária para o desenvolvimento da aplicação.
Confira o comando para a criação de uma aplicação React:
create-react-app aplicacao_reactFerramentas auxiliares ao React
Existem outras ferramentas, frameworks e plugins que auxiliam no desenvolvimento com o React. Elas contribuem para proporcionar uma série de benefícios às aplicações. Confira algumas delas:
Styled-components
Trata-se de uma biblioteca que oferece funções especiais para estilizar de forma automática os componentes desenvolvidos em React.
Redux
O Redux é uma biblioteca desenvolvida em JavaScript e utilizada para garantir que o estado de um elemento utilizado em diferentes views seja consistente. Na prática, significa permitir que o estado do componente React seja alterado em apenas um único local, chamado store.
Além disso, seu objetivo é fazer com que, quando uma action altera o estado de um elemento, todas as views que utilizam aquele conteúdo sejam atualizadas. Dessa forma, são evitadas informações inconsistentes na aplicação.
React DevTools
O React DevTools é uma ferramenta utilizada no navegador para permitir a inspeção do código durante a execução da página. Trata-se de uma extensão que deve ser instalada no Chrome. É utilizada pelas pessoas que desenvolvem front-end para fazer o debug da aplicação e, com isso, facilitar a depuração do código.
Como vimos, o React é uma poderosa biblioteca desenvolvida em JavaScript, que facilita o desenvolvimento de aplicações front-end. A ferramenta oferece excelente performance em função de sua característica de utilizar virtual DOM. Além disso, pode ser utilizada com outras ferramentas para agregar ainda mais recursos às aplicações web e mobile.
Gostou do nosso conteúdo? Então, continue mais um pouco por aqui e aprenda agora sobre o perfil e habilidades necessárias para o profissional do futuro!
