React - O que é?
Tags: react, javascript, beginners, tutorial
Published: 2021-02-08 00:59:52

##:wave: 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?

![Question](https://dev-to-uploads.s3.amazonaws.com/i/c77x9rznib8kvg2d8jf6.png)
##:question: O que é o que é? Parece framework mas é biblioteca? 

Como a própria documentação do [React](https://pt-br.reactjs.org/) 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](https://nextjs.org/) para web e o [Expo](https://expo.io/) para mobile, mas ambos utilizam da **biblioteca** React para funcionarem.

![Web](https://dev-to-uploads.s3.amazonaws.com/i/yp972ogtuid5ogsc65uf.png)
##:thinking: 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](https://www.youtube.com/).

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

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:
```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.

![Mobile](https://dev-to-uploads.s3.amazonaws.com/i/t6zzd6n2tayowlixahj5.png)

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:
```react
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?

###:package: 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.

###:white_check_mark: 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.

###:lipstick: 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.

###:zap: 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.

![Badge](https://dev-to-uploads.s3.amazonaws.com/i/uq6sarz9uyh44gws18l7.png) 

##:building_construction: 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?
```javascript
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?
```react
// 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. 🥳

##:information_desk_person: 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 :tada:

> *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?*

![Goku](https://dev-to-uploads.s3.amazonaws.com/i/1head994c27bdofqdd9t.png) 

> 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:purple_heart: ao pessoal da [Rocketseat](https://rocketseat.com.br/):rocket: pelo conteúdo de qualidade em React.