No mundo da informática, existem diversas ferramentas diferentes para se chegar a um mesmo fim: a perfeita construção de uma boa aplicação; diversas linguagens podem ser usadas para criar exatamente o mesmo site, que inclusive podem ser exatamente iguais entre si, caso não necessitem de grandes abstrações para funcionar.
Em artigos anteriores, falamos bastante sobre JavaScript e o desenvolvimento do front-end de aplicações web. Neles, explicamos melhor o porquê dessa linguagem de programação ser a preferida de forma quase absoluta pelos programadores web.
Entre os tantos motivos para o JavaScript ser tão famoso, usado e amado é a capacidade que se tem de desenvolver abstrações da língua: por exemplo, o TypeScript é uma espécie de “dialeto” do JavaScript que conta com uma das coisas que mais fazem falta nesta linguagem: a tipagem forte de dados.
Além disso, talvez a sua maior utilidade seja a forma de se abstrair o desenvolvimento de códigos grandes, complexos e modularizados de maneira mais simples com o uso das frameworks.
Estas são “ferramentas” da língua, que simplificam grandes mecanismos complexos, o que é favorável para a criação de grandes aplicações. Por isso, a grande maioria das aplicações web atuais são feitas com uso de frameworks, e React é o mais utilizado pelos desenvolvedores atuais.
O que é o React?
React é um framework JavaScript de código aberto desenvolvido em 2011 pela gigante da webtech, a Meta, que, à época, ainda se chamava Facebook. Ela serve para o desenvolvimento do front-end de aplicações web.
Para explicar o motivo do Facebook se preocupar com a criação de um framework só para seu próprio uso, é preciso explicar: quando foi criada, em 2004, a rede social funcionava com a linguagem PHP, que é considerada imprática e antiga para os padrões atuais de desenvolvimento.
Por isso, eles viraram seus olhos para a criação de ferramentas mais modernas, mais especificamente utilizando a linguagem do momento: o JavaScript. Além disso, fazendo do framework uma ferramenta open-source, eles poderiam contar com o auxílio do próprio público que se utiliza da ferramenta.
Para que serve o React?
No entanto, mesmo com tudo isso posto, ainda não chegamos à maior utilidade do React: a sua capacidade de construir SPA’s – as chamadas single-page applications.
Estas são aplicações que têm todo o seu funcionamento restrito a uma só página.
Caso o leitor tenha alguma experiência no desenvolvimento web, ele provavelmente já se aventurou criando diversos arquivos .html e colocando links entre eles, para fazer navegação entre páginas diferentes.
No entanto, para o caso de um grande website, esse modelo de funcionamento é ineficaz: cada página diferente pede um carregamento (ou seja, uma conexão com o servidor) diferente, o que aumenta a demora para navegar, a quantidade de requisições que devem ser feitas para utilizar um website e, de modo geral, um aumento do tempo de execução de toda a aplicação.
A single-page application, porém, trata de uma forma de carregar todo o website em uma única página web: é como se todo o seu código estivesse carregado em um mesmo arquivo, o index.html.
Desta forma, o framework (ou seja, o JavaScript) é quem coordena o que será escrito no código html e, assim, exibido em tela, e o que ficará “em espera” até ser chamado à tona. Por isso, com um só carregamento, a SPA é capaz de trazer consigo todas as informações necessárias para o uso, sem que seja preciso fazer novos carregamentos na página.
Essa diferença na velocidade de navegação é tamanha que, por exemplo, ao reduzir o carregamento de seu website em 0,1s, a gigante do varejo Amazon conseguiu aumentar a sua venda em 1%; a Firefox, ao aumentar a velocidade de sua landing page em 2,2s, fez o número de downloads de seu navegador subir 15%, como mostra esta pesquisa.
O que diferencia o React das demais frameworks?
O que foi descrito anteriormente, sobre a capacidade do React de criar SPA’s, é uma propriedade comum a todos – ou, pelo menos, quase todos – os frameworks modernos. Essa é a maior especialidade deles, fora a facilitação no desenvolvimento. No entanto, o que é que torna o React em especial o framework mais utilizado atualmente?
Primeiro, porque ele é, sem dúvidas, o mais simples de se entender e aprender. A criação e exportação de componentes é extremamente simples e ágil, especialmente com o uso de IDE’s modernas como o VSCode.
Esta componentização, é, também, muito eficiente, o que garante um ótimo escalonamento do projeto, que pode vir a se tornar bastante grande, bem como a reutilização de um mesmo componente em diversas páginas diferentes, reduzindo o trabalho do desenvolvedor ao repetir mesmas estruturas programáticas.
O React conta ainda com o uso de props, que são informações que podem ser facilmente passadas de um componente para outro, facilitando a comunicação entre toda a aplicação.
Além disso, ele é também otimizado para responsividade da tela, o que torna mais fácil a adaptação de um website para uso em celulares e tablets, bem como conta já com uma vastíssima gama de bibliotecas agregadas que facilitam o desenvolvimento de aplicações complexas e bastante diversificadas.
Além disso, ele traz para seu desenvolvimento o uso de uma extensão chamada JSX (JavaScript Syntax Extension), que permite a criação de códigos HTML com elementos comuns do JavaScript, desta forma tornando a criação de um novo componente muito mais ágil, dado que ele poderá misturar ambas as linguagens em um só código.
Por fim, por funcionar de forma declarativa, não é nada difícil criar um componente e dizer ao React que ele deve aparecer na tela: basta uma curta indicação no React e ele estará na tela.
Com isso, nota-se o quão simples e rápido de se aprender e utilizar é o React, não perdendo por isso sua eficiência e agilidade: hospedado no runtime Node, ele consegue ser mais rápido que muitas das linguagens de programação modernas que se têm por especializadas em velocidade, como Java ou C, além de utilizar virtual DOM, o que aumenta ainda mais sua agilidade.
Um exemplo curto da sintaxe
Bom, tudo isso parece muito, mas ainda é abstrato demais para se fazer entender completamente. Por isso, traremos exemplos curtos.
Criando o projeto
Antes de tudo, para iniciar a sua aplicação, é preciso instalar tanto o Node quanto o React em sua máquina. Agora, basta abrir o seu terminal, ir até a pasta em que você deseja que seu projeto fique hospedado, digitar create-react-app <nome do projeto> e aguardar.
Após um tempo carregando, ele criará o seu projeto-base, que já vem preenchido com alguns modelos padrões de exemplo. Ele se parecerá mais ou menos com isso:
Para ver sua aplicação em funcionamento com o exemplo dado pelo React, basta digitar, no diretório do projeto em seu terminal, o comando npm start. Uma aba do navegador abrirá, com isso aqui:
Primeiros passos no App.js
Ao clicar no botão Learn React, você será redirecionado para a página oficial do React. No entanto, vamos pular alguns passos e imprimir algo em nossa tela. Para tanto, precisamos abrir o documento App.js, o qual tem os arquivos desta tela inicial que você vê:
Esta tela já é um exemplo de um componente React, neste caso o componente App. Ele será utilizado em outro documento, chamado index.js, que é, por fim, o ponto de contato entre a sua aplicação e a tela do usuário:
No entanto, não precisamos entendê-lo agora. Basta saber que ele cria o virtual DOM, que é a forma do React de se comunicar com a tela que é exibida para o usuário, e que ele renderiza o componente <App />.
Com isso, fica evidente que o <App /> é o componente principal de sua aplicação, já que é ele quem entra em contato com o index, e, com isso, todos os demais componentes do projeto devem culminar no <App />, como um rio que deságua no mar ao final de seu percurso.
Por isso, ao apagar tudo o que tem no componente <App />, nossa aplicação exibirá apenas uma grande tela em branco. E o que acontece, então, se preenchermos esse componente com algo que quisermos? Como no exemplo abaixo:
Você pode notar que eu apaguei tudo, exceto a <div> de nome App (que não chega a ser necessária também, ela está aí apenas para conservar o CSS usado quando o React criou a aplicação), e adicionei um parágrafo com textos e uma imagem comum extraída da internet. Vejamos o resultado:
E se quiséssemos um texto maior? Está difícil de ler, não acha? Vamos também adicionar uma cor à fonte e mudar a cor do plano de fundo. Para tanto, vamos começar a utilizar o JSX!
O código, agora, está assim:
Note que, na <div>, eu adicionei uma propriedade style, a qual contém o CSS, mas escrito de uma maneira diferente. Isso se dá porque, em JavaScript, não se separar nomes usando hífen como ocorre em CSS; por isso, usa-se o camelCase.
E o resultado na tela é esse:
Comemoremos com o Cebolinha! Fizemos progresso em nossa aplicação.
Esse é apenas um pequeno exemplo do enorme poderio do React no desenvolvimento simples de aplicações complexas. É só o princípio da caminhada!
Quais grandes empresas usam React?
Já que o React é tão famoso e tão utilizado, então grandes empresas contratam funcionários especializados em React, certo? Correto! Vejamos alguns exemplos de grandes aplicações cujos websites foram desenvolvidos com esse framework:
- Spotify
- Airbnb
- Netflix
- Hotmart
- Tesla
- iFood
- Dropbox
- Entre outras!
E onde aprender mais?
React é, sem sombra de dúvidas, uma das principais tecnologias utilizadas por programadores ao redor do mundo hoje em dia. Sua importância crescente garante que sempre haja vagas disponíveis para desenvolvedores dos níveis mais juniores aos mais seniores.
E, para auxiliar aqueles que sonham em se tornarem programadores, a Driven oferece uma formação completa em desenvolvimento fullstack, com extensos módulos que se dedicam a ensinar o React aos nossos alunos.
Venha junto conosco realizar seus sonhos! Clique aqui para se inscrever em nosso processo seletivo!
4 Comments