Oi pessoal, tudo bem? Hoje quero propor uma discussão um pouco maior sobre quando usar e quando não usar React.js. Eu tenho certeza que muita gente vai gostar do conteúdo do nosso curso novo de React.js, e vai querer escrever TUDO em React, mas é aí que mora o perigo! É normal querer utilizar uma tecnologia nova em projetos novos, mas nem todo projeto novo que você começar precisa ser criado com React.

React é fantástico quando você precisa criar aplicações e websites que possuem interação com o usuário, ou gerenciamento de estado (ligado/desligado, aberto/fechado etc). Mas, se tudo que você precisa é uma página estática, de repente o custo-benefício de utilizar React acaba não fazendo sentido.

Vamos comparar alguns cenários do mundo real e discutir quando faz sentido utilizar React e quando faz sentido manter a simplicidade e utilizar renderização no servidor ou até arquivos estáticos.

Landing Page

Na maioria das vezes, uma Landing Page não tem necessidade de gerenciar estado nenhum. Você coloca algumas informações sobre seu produto ou serviço, coloca umas imagens pra chamar a atenção e um botão que ‘chama’ o usuário pra fazer alguma coisa (comprar algo, saber mais etc). Esse tipo de página é um grande candidato a não utilizar React. O que mais importa nessas páginas é a rapidez e o design pra chamar a atenção do usuário, mas o conteúdo é basicamente fixo.

Blog

Esse também é um conceito que contém mais páginas estáticas do que páginas dinâmicas.

A maior parte dos blogs tem um layout padrão e várias páginas iguais onde só o conteúdo é alterado. Nesse caso, o mais importante é que o conteúdo seja disponibilizado de uma maneira que prenda a atenção do leitor.

Uma parte que pode ter um pouco de interação é a área de comentários. Nessa área, existem diferentes tipos de estados e informações vindo de vários lugares etc. Então, o indicado seria utilizar React caso você vá gerenciar a própria seção de comentários. Caso você vá utilizar uma ferramenta de gerenciamento de comentários de terceiros, um site estático ou ferramenta de Blog que renderiza as páginas no servidor vai funcionar muito bem.

Aplicação Web

Aqui entramos no cenário que a gente conversa bastante no curso de React.js. Uma aplicação web geralmente tem vários estados (globais e locais), bastante interação com o usuário e bastante regra de negócio que é executada no navegador. Por esses motivos, é o caso de uso perfeito para utilizar React.

Aplicação Nativa (iOS, Android, Windows, macOS)

Aplicações nativas possuem os mesmos aspectos das aplicações web quando comparamos interatividade, regras de negócio e gerenciamento de estado. A única diferença é que ao invés de interagir com elementos do DOM (Document Object Model), o usuário interage com elementos nativos de cada plataforma. Aqui encontramos uma das grandes vantagens do React. Você pode compartilhar até 100% do seu código e, ainda assim, ter uma aplicação nativa para cada plataforma. Isso acontece porque o React em si, é agnóstico em relação a como um componente vai ser renderizado. O React simplesmente cria hierarquias de componentes que podem ser renderizadas de qualquer maneira. Existem várias maneiras de renderizar esses componentes. Essa é uma lista dos diferentes tipos de renderizadores que eu acho mais interessantes:

• react-dom: esse, é claro, é o principal renderizador de componentes React. É criado e mantido pelo próprio time do React e transforma componentes React em elementos HTML
• react-native: também suportado pelo Facebook, mas com um time inteiramente dedicado à essa iniciativa, o react-native suporta oficialmente iOS e Android.
• react-native-windows: a Microsoft mantém oficialmente uma versão do react-native que suporta toda a plataforma da Microsoft (PCs, tablets, 2-em-1s, Xbox, dispositivos de realidade virtual etc).
• react-360: criar experiências em 360 graus com desktops, celulares e dispositivos de realidade virtual.

Considerações Finais

É claro que, como todas as outras coisas no ramo de desenvolvimento, tudo depende. Existem bons geradores de páginas estáticas como o Gatsby e o Next.js. Neles, você pode juntar o melhor dos dois mundos: escrever suas páginas e layouts em React, mas ter arquivos estáticos exportados para utilizar no cenário do Blog ou da Landing Page, por exemplo. Tudo é uma questão de escolha e entender as vantagens e desvantagens de cada opção.

Agora eu quero saber de você: em qual outro cenário você utilizaria React? E em qual outro cenário você não utilizaria React? Compartilha aqui nos comentários! �