React - O que é?

👋 Introdução

React é uma das maiores ferramentas para criação de interfaces de usuário. Com ela é possível criar desde de aplicações web (React-DOM), aplicações mobile (React Native) e até aplicações desktop c/ Electron.

Mas já que ela pode fazer tudo isso e mais um pouco, React é uma biblioteca ou um framework?

❓ O que é o que é? Parece framework mas é biblioteca?

Como a própria documentação do React diz sobre si: "Uma biblioteca JavaScript para criar interfaces de usuário".

Porém, algumas pessoas ao se referirem a todo ecossistema da lib, acabam dizendo framework, mas não se enganem! Existem sim frameworks feitos em cima do React como o Next.js para web e o Expo para mobile, mas ambos utilizam da biblioteca React para funcionarem.

🤔 Tá, mas por que utilizar React na web?

Que bom que você perguntou!

O React na web é muito utilizado para criação de SPAs (Single-Page Applications), aqueles sites onde ao mudar de páginas dentro de uma aplicação a tela não é recarregada do zero, ela só modifica o que precisa mostrar no momento.

Antes do SPA, a cada requisição toda aplicação era recarregada e quem era responsável pela criação da nova tela a ser mostrada era o back-end (o servidor).

Um bom exemplo disso é o Youtube.

Outro ponto muito legal de se trabalhar com React é que tudo fica dentro do Javascript, desde o HTML até o CSS, tudo é Javascript 😄

Mas isso não quer dizer que todo conhecimento com essas tecnologias para web devem ser jogadas fora e temos que aprender totalmente do zero. Não.

O mesmo HTML e CSS que você escreve em uma aplicação tradicional vai ser escrito no React, porém o Javascript vai ter controle sobre tudo e vai turbinar sua aplicação.

Um exemplo de código em React:

import React from 'react'

import './button.css'

function Button() {
  return (
    <div>
      <button>Salvar</button>
    </div>
  )
}

E falando em Javascript, todo mundo que trabalha com desenvolvimento web tem que aprender JS, porém esse conhecimento é "perdido" ao se ter que trabalhar em mobile, por exemplo.

Já pensou se você pudesse manter a mesma base de conhecimento e construir ambas aplicações? Com React você pode, mudando apenas um pouco da sintaxe tudo que você sabe na web é reutilizado no mobile.

Um exemplo de código em React Native:

import React from 'react'
import { View, Button } from 'react-native'

function Button() {
  return (
    <View>
      <Button title="Salvar" />
    </View>
  )
}

O que mais eu ganho com o React?

📦 Componentização

Com React é possível separar nossa aplicação em diversos componentes que funcionam de forma independente um dos outros, assim facilitando a reutilização de código.

Além de melhorar a organização do código, dividindo uma tela complexa em partes menores é mais simples e rápido a manutenção do código.

✅ Divisão de Responsabilidades

Ao se utilizar um front-end separado do back-end, temos a divisão bem clara de responsabilidades. O back-end deve tratar das regras de negócio enquanto o front-end (React) deve tratar de apresentar os dados.

💄 Uma API, múltiplos clientes

Separando as responsabilidades, com uma mesma API é possível criar tanto uma aplicação web e mobile sem precisar modificar as regras de negócio para cara cliente que consome nossa API.

⚡ Programação declarativa

Já teve que alterar uma tela de acordo com o clique de um botão? Ou mudar uma lista assim que usuário digita algo no filtro? Com React esse tipo de mudança é muito mais simples.

Veja no próximo tópico.

🏗️ Imperativo vs Declarativo

Vamos pegar o exemplo de um sininho de notificações e a badge que mostra a quantidade de notificação não vistas pelo usuário.

De maneira imperativa, como esse código poderia ser escrito?

const pastNotifications = 0

function montaBadge(newNotify) {
  // Se não haviam notificações anteriormente 
  // e existem novas notificações
  if (pastNotifications === 0 && newNotify > 0) {
    // Adiciona badge ao sininho
    // container.appendChild(badge)...
  }

  // Se haviam notificações anteriormente 
  // e existem novas notificações
  if (pastNotifications !==  0 && newNotify > 0) {
    // Apenas muda o número
    // badge.innetHTML = newNotify...
  }

  // Se haviam notificações anteriormente 
  // e não existem novas notificações
  if (pastNotifications !== 0 && newNotify === 0) {
    // Remove a badge
    // container.removeChild(badge)
  }
}

Percebe o quão complexo e trabalhoso uma simples função pode se tornar? E se não forem só esses casos (if)? E se alguém errar o código que remove a badge?

Na maneira imperativa temos que descrever para o "computador" tudo que queremos que ele faça, explicado passo a passo o que fazer em cada caso.

E de forma declarativa? Como esse código ficaria?

// Não comparamos com o estado anterior

function Bagde({ notifications }) {
  return (
    <div id="container">
      {notifications > 0 && <div id="badge">{notifications}</div>}
      <span class="icon"></span>
    </div>
  )
}

A primeira grande diferença é a falta de um estado anterior que guarda quantas notificações haviam anteriormente. Não precisamos mais disso.

Outra mudança é a utilização dos &&. Eles significam:
"Caso o que houver do meu lado esquerdo seja verdadeiro, eu irei retornar o que há no meu lado direito. Se for falso, retorno nada".

A utilização dos && facilita muito pois não precisamos mais de um if para mostrar ou remover a badge.

E por último declaramos que o conteúdo da bagde é o numero de notificações. Enfim, o React trata de resolver o que for necessário para manter seu componente comportando-se da maneira que você declarou. 🥳

💁 E aí? Já acabou Jéssica?

Ufa! Foi muita coisa, muita explicação, mas espero que esse texto tenha te ajudado a entender pelo menos um pouco do que é o React e suas vantagens 🎉

Poxa, gostei tanto do React. Como que faço para criar meu primeiro projeto? Como crio um site e faço deploy dele de maneira gratuita na internet?

Oi, eu sou Bruno. Eu vou mostrar a vocês como criar um projeto utilizando um template que nos facilita toda a configuração necessária para iniciar um projeto React. Além de explicar o que é componente, propriedade e estado.

Não percam, o próximo post de React será...

Criando seu primeiro projeto!

PS: Um agradecimento especial💜 ao pessoal da Rocketseat🚀 pelo conteúdo de qualidade em React.