React e seus três mosqueteiros.

#react #javascript #frontend #introdution

Depois de muito tempo parado, por diversos motivos, estou aqui para compartilhar um pouco mais da minha jornada. Aproveitando essa nova etapa que surge na minha vida, iniciarei uma série de artigos voltados para React. Afinal é a ferramenta que uso no trabalho e onde todos meus estudos técnicos estarão direcionados.

Como primeiro passo, vou tentar explicar resumidamente do que se trata o React e seus principais conceitos.

React:

O React é uma biblioteca UI(User Interface), ou seja, é uma ferramenta para criação de telas, o famoso front-end. Ela é uma das principais ferramentas utilizadas hoje em dia por quem utiliza JavaScript para a criação da parte visual de suas aplicações. Ela é composta por alguns conceitos essenciais de funcionalidades. Os que abordarei hoje são: componentes, propriedades e estados.

Em relação a Componentes e Estados, vocês verão que há formas diferentes de trabalhar, eu abordarei isso em artigos específicos, falando um pouco da diferença entre Class Components e Functional Components, assim como Redux e ContextAPI, que são formas de trabalhar estado globalmente.

Componentes:

import React from 'react';

const Button = () => {
  return (
    <button type="button"> Olá! Bem vindo ao Universo React</button>
  )
}

export default Button;

A ideia de componentização é algo que deixa o React mais atrativo. É a possibilidade de quebrar sua aplicação em diversos pedaços, permitindo até mesmo utilizar o mesmo componente em diversas telas da aplicação.

Digamos que você tem várias telas que possuem botões similares entre si, você pode criar apenas um componente de botão e chamá-lo em cada uma dessas telas.

Outra situação clássica de uso da componentização é o Header de suas páginas, que normalmente se mantém igual em todas rotas, então você pode criá-lo como um componente só, adicioná-lo no arquivo principal de sua aplicação e assim ele irá estar presente em qualquer página que a pessoa usuária navegue.

Essa estrutura de componentes também garante um melhor fluxo de informação e uma aplicação mais otimizada. Diferente de modelos anteriores em que você trabalhava com o HTML, CSS e JS tudo de uma forma única e precisava a cada interação do usuário, ir até o servidor, carregar esses três arquivos e trazer todas informações novamente, com React você garante que, estruturando corretamente as páginas, só será necessário se preocupar em atualizar uma parte da aplicação referente a aquela interação específica.

Pegue o twitter web, por exemplo, se você navegar entre a seção Página Inicial e a Notificações, você perceberá que, das três colunas, apenas a central será alterada, que é a área da tela referente a interação da pessoa usuária, afinal de contas, o menu de seções e a área do “O que está acontecendo” não são impactadas pela interação.

Isso está diretamente linkado a ideia de Single Page Application do React, onde ele é responsável exclusivamente pela parte visual, enquanto os dados e regras de negócio ficam no back-end, servindo o React através de uma API, garantindo assim que não será necessário recarregar toda a aplicação quando houver uma interação.

Porém, você deve estar se perguntando “Ta, eu tenho um componente botão, que eu chamo em várias telas, mas e se eu quiser que a cor de fundo de um seja azul e outro tenha o fundo roxo?”

Vamos então falar do segundo conceito.

Propriedades, carinhosamente conhecida como props:

São valores que um componente pode receber, referentes a estilização, funcionalidade ou até mesmo dados que devem ser exibidos em tela.

Vamos continuar com o exemplo de diversos botões. Você tem lá suas várias telas e quer mudar a cor de fundo de algum botão em alguma determinada página, você primeiro precisa garantir que seu botão esteja apto a trabalhar com suas props e que elas possam, de fato, causar alguma mudança no componente do botão.

Garantido isso, você precisa então no arquivo em que sua tela é construída, passar essa essa informação para o componente botão, você teria uma estrutura similar a esta:


import React from 'react';

const Button = (props) => {
  const { text, isDisabled, bgColor } = props;
  return (
    <button 
      type="button"
      disabled={isDisabled}
      style={{ background: bgColor}}
    >
      {text}
    </button>
  )
}

export default Button;

E você pode passar diversas propriedades com objetivos diferentes como havia comentado. Quando comentei ali, pensando no botão, ele tem a funcionalidades, como estar habilitado ou não, isso pode ser passado por propriedades.

Você também pode trabalhar o texto do botão por propriedades, digamos que você tem um botão parecido em um site de compras, mas que na página inicial diz “Veja os detalhes do produto” e na página de detalhes vá dizer “Compre aqui este produto”, são outros valores que podem ser passados por propriedades.

No componente pai do botão, sua declaração ficará assim:

import React from 'react';
import Button from './Button';

function App() {
  return (
    <h1>
      Hello World
      <Button
        text="Olá! Bem vindo ao Universo React"
        isDisabled="true"
        bgColor="purple"
      />
    </h1>
  )
}

export default App;

E agora tu te pergunta “Tenho dois botões na mesma tela, mas quero que eles sejam exibidos em momentos diferentes, como proceder?”

Vamos falar do último conceito de hoje:

Estados, ou state como verão no código:

O conceito de estados é um conceito muito importante no React, porque é ele que dita as regras de como muita coisa vai funcionar em sua aplicação.

Hoje farei um apanhado de umas noções básicas pensando apenas em estados locais. Depois, quando eu abordar Redux e ContextAPI falarei de estados em um nível global de aplicação.

Estados são formas de armazenar informações dentro do seu componente e que podem ser utilizadas para conduzir a forma que o componente irá se comportar.

Continuando o exemplo do botão, vamos pensar em um cronômetro. Ele tem dois momentos: ativo e parado. Você pode ter um estado que vai controlar esses momentos. A partir desse estado, você pode definir uma série de fatores, como o texto que irá aparecer no botão, ou até mesmo um botão para cada momento.

Ele também terá um valor, referente ao tempo contabilizado, isso também pode ser armazenado em um estado.

E se a pessoa quer registrar os dados referentes ao que ela executou naquele espaço de tempo? Também é possível armazenar em um estado.

E a partir dessas diversas informações, é possível controlar todo dinamismo de um componente, definindo através do valor de cada estado, como se espera que o componente responda. É possível fazer uma lista que exiba os dados referentes a tarefa executada, garantir que o botão tenha o texto iniciar caso o estado esteja como inativo e o texto parar caso o estado esteja como ativo.

Abaixo temos uma ideia de como funcionaria um estado para definir qual texto será exibido na renderização do botão, caso o estado haveProps seja verdadeiro, exibe o texto que é passado por props pelo componente pai, caso seja falso, exibe o texto padrão.

import React, { useState } from 'react';

const Button = (props) => {
  const [haveProps, SetHaveProps] = useState(true);
  const { text, isDisabled, bgColor } = props;
  return (
    <button 
      type="button"
      disabled={isDisabled}
      style={{ background: bgColor}}
    >
      {haveProps ? text : 'Texto original'}
    </button>
  )
}

export default Button;

Então, espero que tenha ajudado a dar uma breve ideia do que é o React, como ele funciona para criação de telas, em breve venho comentar sobre diversos outros conceitos que fazem do React uma biblioteca tão utilizada nos dias atuais e como ele facilita muito algumas situações.