Artigo original: Why You Should Use React.js For Web Development

Se você é novo no React.js, você pode estar se perguntando o porquê de ele ser tão popular e por que você deveria usá-lo em suas aplicações. Se esse for o caso, você está no lugar certo.

Vamos discutir o que torna o React.js tão bom e porque você deve usá-lo em seus projetos.

Índice

• Breve história do React.js
• Por que você deveria usar o React?
• O React é flexível
• O React possui uma ótima experiência de desenvolvedor
• O React tem suporte/recursos do Facebook
• O React também tem um amplo suporte da comunidade
• O React possui um ótimo desempenho
• O React é fácil de testar

Breve história do React.js

O Facebook criou o React.js em 2011 para o seu próprio uso. Como você sabe, Facebook é, atualmente, um dos maiores sites de redes sociais da web do mundo.

Em 2012, o Instagram, que é uma subsidiária do Facebook, também começou a utilizá-lo.

Em 2013, o Facebook disponibilizou o código do React.js como código-aberto. Inicialmente, a comunidade de desenvolvedores o rejeitou, pois fazia uso de Markup e JavaScript em um único arquivo. No entanto, à medida que mais pessoas experimentavam, elas começaram a apoiar a abordagem centrada em componentes para separação de responsabilidades.

Em 2014, diversas empresas grandes começaram a usar o React.js em seus ambientes de produção.

Em 2015, o Facebook também disponibilizou o código do React Native como código-aberto. O React Native é uma biblioteca que nos permite a criação de aplicativos nativos para dispositivos móveis em Android e iOS usando o React.js.

Em 2016, com a versão 15, o React.js começou a empregar o versionamento semântico. Isso também ajudou a transmitir à comunidade de desenvolvedores que o React estava mais estável.

Hoje, o React.js é usado por muitas empresas dentre as Fortune 500. O Facebook possui uma equipe de desenvolvedores em tempo integral dedicada ao React. Eles, regularmente, lançam correções de bugs, melhorias, postagens em blogs e documentação.

Por que você deveria usar o React?

Você pode estar se perguntando por que você deveria usar o React.js. Afinal, com o aumento dos usos do JavaScript nos últimos anos, sabemos que há uma variedade de opções disponíveis no mercado, tais como Angular e Vue.js. Então, por que React?

Vamos explorar os seis motivos principais para usar o React.js.

O React é flexível

O React é consideravelmente flexível. Após aprendê-lo, você pode usá-lo numa variedade de plataformas para construir interfaces de usuário de qualidade. O React é uma biblioteca, NÃO um framework. Sua abordagem de biblioteca o possibilitou evoluir e se tornar uma ferramenta notável.

O React foi criado com um único foco: criar componentes para aplicações para a web. Um componente do React (texto em inglês) pode ser qualquer coisa em sua aplicação para a web como, por exemplo, um botão, um texto, um label ou um grid.

Porém, à proporção que a popularidade do React cresceu, seu ecossistema também ampliou para abranger diversos casos de uso.

Você pode gerar um site estático com React usando ferramentas como, por exemplo, o Gatsby. Você pode usar o React Native para construir aplicações para dispositivos móveis. Você, igualmente, pode criar uma aplicação para desktop, usando uma ferramenta como o Electron, que consegue ser executada em Mac e Windows com a tecnologia React.js.

O React, da mesma maneira, suporta à renderização no servidor de seus componentes usando ferramentas como o Next.js. Você também pode usar o React.js para criar um site da web de realidade virtual e experiências em 360 graus usando o React VR.

"Aprenda o React uma vez e escreva código em qualquer lugar" - Reactjs.org

Você também pode usar o React em suas aplicações já existentes. O React foi projetado com isso em mente. Você pode mudar uma pequena parte da sua aplicação existente usando o React e, se essa alteração funcionar, você pode começar a converter sua aplicação inteira para o React.js. O Facebook aplicou a mesma abordagem.

"A principal vantagem de se usar uma biblioteca em vez de um framework é o fato de que as bibliotecas são leves. Há uma liberdade para escolher ferramentas diversas. O framework, por outro lado, consiste em um ecossistema completo para se criar uma aplicação. Não existe um modo fácil de se usar outras ferramentas que não sejam do framework."

O React possui uma ótima experiência de desenvolvedor

Seu time se apaixonará pelo React quando eles começarem a programar com ele. O rápido desenvolvimento e a API enxuta do React combinados criam uma fantástica experiência de desenvolvimento.

A API do React é muito simples, pois possui poucos conceitos para aprender. Aqui está um curto exemplo de um componente do React:

Você precisa apenas importar a biblioteca do React. Message é um componente que recebe uma props (entrada) e retorna JSX.

JSX é uma sintaxe especial que se assemelha ao HTML, convertendo as chamadas da API do React e, ao final, renderizando HTML.

Frameworks tradicionais, como o Angular e Vue, potencializam o HTML. Eles usam JavaScript dentro do HTML. Eles criaram atributos HTML que fornecem capacidades adicionais a ele.

O principal problema com essa abordagem é que você tem que aprender esses novos atributos do HTML ou sempre ficar consultando a documentação oficial.

Aqui está um exemplo de laço de repetição no Angular. Olhe o atributo *ngFor:

Aqui, por outro lado, temos um exemplo de laço de repetição no Vue.js. Dê uma olhada no atributo v-for:

O React usa uma conduta oposta. Ele utiliza HTML (JSX) dentro do JavaScript. Eu gosto dessa abordagem porque, nela, você pode lidar com JavaScipt e HTML puros.

Aqui temos um exemplo de laço de repetição no React.js

‌O componente NumberList do React usa código em JavaScript puro (a função 'map'). Além disso, você pode observar que o JSX é uma simples, e bem conhecida, tag HTML com atributos elegantes. A função 'render' está apenas renderizando o componente NumberList no elemento raiz no arquivo HTML.

O que mais você precisa, enquanto desenvolvedor, se tem à disposição uma plataforma onde você pode lidar com JavaScript e HTML puros e, ainda, criar uma Interface de Usuário interativa?

Observação: quando eu digo "JavaScript puro", isso não significa que você usará simplesmente JavaScript no React. O React é uma biblioteca do JavaScript e ele possui sua camada baseada no próprio JavaScript. PORÉM, como eu disse, a API do React é bem enxuta e simples de aprender. Angular e Vue forçam suas regras a você. O React é mais conceitual. Ele mostra como você pode fazer um melhor uso do JavaScript no estilo do React.

O React.js também nos disponibiliza o pacote create-react-app, que permite a começar instantaneamente o desenvolvimento.

O React tem suporte/recursos do Facebook

O React é amplamente usado na aplicação e no site da web do Facebook e no Instagram. É por isso que o Facebook é profundamente comprometido com isso. Eles usam mais de 50 mil componentes do React em seu ambiente de produção. Os quatro principais contribuidores do React no GitHub são funcionários em tempo integral do Facebook.

Além disso, o time do React mantém um blog que constantemente fornece detalhes de cada novo lançamento.

Por conta do sólido comprometimento do Facebook com o React em produção, quando ocorrem mudanças significativas (breaking changes) no React, o Facebook consistentemente provê um Codemod que automatiza a mudança.

O Codemod é uma ferramenta de linha de comando que automatiza mudanças em sua base de código. Quando uma nova especificação entra no React, o Codemod automaticamente substitui velhos componentes com a nova especificação.

Desde 2015, a popularidade do React tem crescido constantemente. Ele possui uma comunidade muito grande e bastante ativa. Seu repositório no GitHub tem mais de 164 mil estrelas. É um dos cinco principais repositórios na plataforma.

O pacote do NPM do React tem, também, milhões de downloads semanalmente.

Mais de 9 mil empresas relataram no Stackshare que estão usando React. Você até pode ver empresas da Fortune 500.

A Reactiflux é uma comunidade especialmente feita para desenvolvedores do React. Mais de 110 mil membros da comunidade estão engajados em ajudar a resolver e compartilhar problemas relativos ao React.

Um dos sites da web mais populares entre os desenvolvedores de software é o StackOverflow. Você pode ver que há mais de 250 mil perguntas feitas sobre o React e bibliotecas relacionadas a ele.

Em alguns casos, você nem precisa criar seus próprios componentes. Existem várias bibliotecas de componentes gratuitas e maduras disponíveis on-line.

Aqui estão alguns exemplos:

• A Microsoft criou a biblioteca de componente Fluent UI, que possibilita desenvolver sua interface de usuário (semelhante a do office).
• A Material-UI oferece componentes do React que implementam as diretrizes de interface de usuário do Google Material.
• A React-Bootstrap contém componentes do React que facilitam o trabalho com o Bootstrap.
• Ademais, confira a lista Awesome React Components no GitHub para encontrar mais componentes do React.

Também existem projetos/bibliotecas maduras relacionadas que você pode usar com React.

• Se você quiser roteamento, então pode empregar o React Router. Se você deseja gerenciar um sistema de dados mais complexo, então utilize o Redux e o MobX.
• Para testes automatizados, use Jest, que também é desenvolvido pelo Facebook.
• Para chamadas a APIs RESTful, use o GraphQL.
• Para renderização do lado do servidor de componentes do React com Node, faça uso do Express.js.

Todas essas bibliotecas e ferramentas são importantes, pois se você está procurando criar algo no React, você encontrará na web ajuda e soluções em abundância para tudo o que precisar.

React possui um ótimo desempenho

A equipe do React percebeu que o JavaScript é rápido, mas atualizar o DOM o torna lento. O React minimiza as mudanças no DOM, tendo descoberto uma mais eficiente e inteligente de atualizá-lo.

Antes do React, a maioria dos frameworks e bibliotecas atualizava o DOM de maneira não inteligente para refletir um novo estado, resultando em mudanças em uma parte significativa da página.

O React monitora os valores do estado de cada componente com o Virtual DOM. Quando o estado do componente é alterado, o React compara o estado existente do DOM com o que o novo DOM deveria parecer. Depois disso, ele encontra a maneira menos custosa de atualizá-lo.

Isso não parece ser muito fácil, mas o React lida muito bem com isso nos bastidores. Ele possui múltiplos benefícios, tais como evitar o 'layout trashing', que ocorre quando o navegador tem de recalcular a posição de tudo quando o elemento do DOM é modificado.

Além disso, como a maioria das aplicações tem sido usada em dispositivos móveis, elas precisam ser altamente eficientes. Portanto, economizar bateria e poder de CPU é muito importante.

O modelo simples de programação do React permite que ele mude os estados automaticamente quando dados são atualizados. Isso ocorre na memória, o que torna o processo bastante rápido.

O tamanho da biblioteca do React também é enxuto. É de menos de 6kb (menos de 3kb quando compactado em gzip). Isso é significativamente inferior ao tamanho dos seus concorrentes.

O React é fácil de testar

O design do React é muito amigável para testes.

• O teste de interfaces de usuário tradicionais pode ser complicado de configurar. Por outro lado, você requer bem pouca ou nenhuma configuração para testar no React.
• Testar interfaces de usuário tradicionais requer navegadores para os testes, mas você pode testar componentes do React rápida e facilmente usando a linha de comando no Node.
• Os testes tradicionais de interface de usuário no navegador são lentos. No entanto, os testes de linha de comando são rápidos e você pode executar uma quantidade considerável de conjuntos de testes ao mesmo tempo.
• O teste tradicional de interface de usuário no navegador, frequentemente, consome tempo e é desafiador para manter. Os testes em React podem ser escritos rapidamente usando ferramentas como Jest e Enzyme.

Há uma vasta variedade de frameworks JavaScript de testes disponíveis na web, os quais você pode implementar para testar o React.js (uma vez que também é uma biblioteca JavaScript). Alguns dos frameworks populares são o Mocha, o Jasmine, o Tape, o QUnit e o AVA.

Conclusão

O React é uma ferramenta excelente para criar aplicações interativas para dispositivos móveis, para a web e para outras plataformas.

Tanto a popularidade quanto a utilização do React estão aumentando dia a dia por uma boa razão. Como desenvolvedor, programar em React torna você melhor em JavaScript, uma linguagem que detém, atualmente, aproximadamente 90% do mercado de desenvolvimento para a web.

Muito obrigado por ler este artigo. Conecte-se com o autor pelo LinkedIn.