Hoje vamos aprender sobre os conceitos do ReactJS e entender o porque se tornou muito famoso dentro do desenvolvimento web,  espero que com este post te ajudar a entender as suas principais vantagens e o porque do React ter se popularizado tão rapidamente.

O que é React?

React é uma biblioteca para construção de interfaces, isso quer dizer que tudo que o usuário consegue enxergar, seja o código CSS, html e javascript fica dentro do React. Ele também é utilizado para construção de Single-Page Application (SPA), que são muito populares na web e que vieram junto com Angular. 

React é uma framework?

Olhando somente para a lib do React não,  mas vendo o ecossistema do React, hoje temos React para web, mobile, redux e outras ferramentas que envolvem o desenvolvimento em React, sim vendo por esse lado é um framework.

Diferenças entre React / ReactJS / React Native

Quando falamos somente React, sem mencionar JS ou Native. Estamos falando da biblioteca de construção de interfaces e componentização, essa e a biblioteca é utilizada tanto no ReactJS quanto no React Native. Quando falamos do ReactJS, estamos nos referindo diretamente ao comportamento do React no Browser, isto é, quando fazemos a junção do React Dom que é a biblioteca do Facebook para controlar a DOM (árvore de elementos do browser) com o React, nós chamamos de ReactJS que é para Web. O React Native e a junção da biblioteca React com uma biblioteca que lida com elementos nativos, daí chamamos de React Native.

Tudo dentro do Javascript

Vamos ver o exemplo abaixo de um código React.

import React from 'react';

import './button.css';
import icon from 'button.png';

function Button(){
  return (
    <button>
      <img src={icon} alt=""/>
    </button>
  )
}

Neste exemplo temos tudo dentro do javascript, aqui importamos o React (sempre precisamos importar) e depois importamos um css, uma imagem e abaixo criamos button com códigos html. Tudo isso fica dentro do mesmo arquivo, um arquivo javascript e se você estiver preocupado se isso ira diminuir a performance da nossa aplicação a resposta é não, pois temos o babel que irá transformar tudo isso em imagem, css e html.

Vantagens

No React podemos destacar 4 grandes vantagens que são: Componentização, Divisão de Responsabilidades, Programação declarativa.

Componentização

Componentização nada mais e que separar em pequenas partes da nossa aplicação (leia-se tela) em componentes que por si só possuem funcionalidades específicas, isso por si nos traz um ganho na organização do código. Veja a imagem abaixo, ela representa bem cada componente em separado.

fonte: https://www.qcode.in/learn-react-by-creating-a-comment-app/

Quando dividir um componente? Isso ocorre quando eu consigo isolar a lógica de um componente sem que ele interfira no resto da aplicação. Pensando assim, um componente e um conjunto de código de lógica, estruturação e estilização que juntos formam um componente que pode ser isolado do restante da aplicação sem interferir no resto da aplicação.

Divisão de responsabilidades

Essa e uma vantagem do React mas também e de qualquer biblioteca Front-end, em que a responsabilidade da regra de negócios passa a ser do back-end, de forma que o front-end fica responsável somente pela interface ou seja a exibição de cálculos ou resultados que foram previamente feitos pelo Back-end.

Dentro da divisão de responsabilidades nós também temos uma API e múltiplos clientes, com esse conceito de separação das responsabilidades podemos ter uma aplicação API com clientes mobile e web, assim como na imagem abaixo.

Diagrama de responsabilidades

Programação declarativa

Se você nunca trabalhou com alguma biblioteca de interface, provavelmente sempre trabalhou com programação imperativa, que nada mais é que o programador descreve para o computador cada passo que ele precisa fazer. Com programação declarativa e diferente, nós informamos qual resultado nós esperamos para a aplicação e ela irá se comportar de acordo com o estado que passamos.

JSX

JSX significa JavaScript XML e nos permite escrever HTML dentro do JavaScript, dessa forma podemos criar os nossos próprios elementos dentro do React. Vamos ver um exemplo de como era a sintaxe do React sem o JSX.

function Button() {
  return React.createElement(
    'button', 
    { type: button }, 
    React.createElement(
      'span', 
      { class: 'icon' }
    )
  )
}

Todo esse código acima era feito para criar o resultado abaixo:

<button type="button">
  <span class="icon"></span>
</button>

Com JSX nós podemos fazer de uma forma muito mais fácil, pois as nossas funções podem retornar código HTML e com a vantagem de que HTML ser uma linguagem bem conhecida.

function Button() {
  return (
    <button type="button">
      <span class="icon"></span>
    </button>
  )
}

Com isso podemos criar os nossos próprios elementos (componentes). Isso remete a componentização, porque esses elementos são os próprios componentes citados acima.

function Header() {
  return <Button />
}

Babel / Webpack

Os códigos que são feitos no React não são entendidos pelo browser, dessa forma precimos converter isso em um código JavaScript de uma forma que o browser entenda. E nesse ponto que entra o Babel, que faz essa conversão de forma transparente para nós.

Junto com o Babel, temos também o WebPack que possui várias funções mas uma dela e a criação do bundle. O bundle que é um arquivo com todo o código compilado pelo Babel da aplicação, então se temos vários arquivos JavaScript em nossa aplicação, isso tudo será convertido em um unico arquivo.

Outra função do WebPack e ensinar ao JavaScript como importar os arquivos CSS, imagens e outros arquivos, por padrão o babel não vai entender esses arquivos CSS e imagens, ele só vai entender a parte JS do nosso código e para ajudar nessa tarefa de importar aquivos diferentes do JavaScript, nos temos os Loaders.

E por ultimo nos temos o Live reload, que nada mais é que dar um refresh automaticamente na nossa aplicação.

Conclusão

Com base em tudo isso que foi apresentado, você tem uma ideia geral do que é o React mas em caso de dúvidas acesse a documentação oficial em https://pt-br.reactjs.org/. Fique atento pois, nos próximos posts irei mostrar como montar uma aplicação React exemplificando tudo que foi apresentado aqui.