Bibliotecas são um conjunto de funções, métodos e objetos que tem como objetivo facilitar e tornar mais rápido o desenvolvimento de aplicações, não sendo necessário recriar as funções todas as vezes que estas forem necessárias, é importante lembrar que uma biblioteca normalmente é menos complexa, e mais flexível que um framework.

React

O React é “uma biblioteca JavaScript declarativa, eficiente e flexível para a criação de interfaces de usuário (UI)”, como foi definido pelos seus criadores, surgiu em 2011, no Facebook, no ano seguinte, passou a integrar também a área de tecnologia do Instagram e de várias outras ferramentas da empresa. Em 2013, a biblioteca tornou-se de código aberto, isto fez com que a popularidade da biblioteca aumentasse.

A biblioteca foi pensada para facilitar a criação da interface de usuário, ela só se preocupa com o que é exibido, ela funciona como uma junção do HTML e do JavaScript, ela utiliza o conceito de componentes para maximizar a reutilização de código. Exemplo:

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Olá, {this.props.name}!
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

O React renderiza o HTML e CSS, a partir do arquivo do React, exibindo para o usuário, inclusive sem recarregar a página, este processo é exibido no diagrama abaixo. A biblioteca possui um método de atualização da página que atualiza apenas os componentes que foram alterados fazendo com que o site possua uma eficiência muito grande.

Uma importante característica do React é que ele é uma linguagem de programação declarativa, isto é, ele se preocupa com o que o programador quer fazer enquanto que a imperativa quer saber como atingir o objetivo desejado. Por exemplo:

Imperativa:

if( usuario.curtiu() ) {
  if( botaoEstaAzul() ) {
    removeAzul();
    adicionaCinza();
  } else {
    removeCinza();
    adicionaAzul();
  }
}

Declarativa:

if( this.state.curtido ) {
  return <curtidaAzul />;
} else {
  return <curtidaCinza />;
}

Outra grande vantagem do React é que, com os mesmos conhecimentos utilizados para criar sites, também é possível criar aplicativos móveis nativos através do React Native.

Redux

Redux é uma biblioteca JavaScript para gerenciar o estado da aplicação é similar e inspirada pela arquitetura Flux do Facebook, ela pode ser utilizada com o React ou outras bibliotecas JavaScript, foi criada por Dan Abramov e Andrew Clark em 2015.

O estado da aplicação é composto pelos dados da API e dados da interface do usuário o Redux cria um local centralizado para armazenar estes dados na aplicação.

A biblioteca é indica quando a aplicação possuir diversos componentes que possuem seus próprios estados e atualizam os estados dos outros componentes, como podemos ver na imagem a baixo ao atualizar um componente, em um cenário sem Redux, as atualizações ficam confusas, já com a biblioteca todo estado é gerenciado pelo Redux ficando muito mais simples.

O Redux possui três princípios:

  • O estado do aplicativo é armazenado em um JavaScript.
  • O estado somente pode ser lido, mas podemos alterá-lo utilizando um objeto, que descreve a mudança, chamado Action.
  • Alterações são realizadas por função chamadas de Reducers.

Possuímos três partes na biblioteca, as actions, o store e os reducers.

Actions

Actions são eventos, é o único jeito de enviar dados da sua aplicação para o Store do Redux, estas são objetos e devem possuir uma propriedade de tipo, que indica o tipo de ação que está sendo executado e um payload que contém os dados que serão utilizados na action. Para enviar uma action é utilizado o método store.dispatch().

Reducers

O Reducers recebe o estado atual da aplicação e Action e retorna um novo estado ou o mesmo.

Store

Armazena o estado da aplicação, existe somente um objeto do tipo store em uma aplicação Redux. Você pode acessar o estado armazenado, atualizar e registrar ou desregistrar listeners através de métodos de suporte.

Com o aumento da utilização de APIs para desenvolvimento web as bibliotecas se tornaram uma fermenta muito útil e poupam tempo, o React vem para atender esta demanda de forma simples e eficiente. O Redux vem como um complemento ao React cuidando da parte do armazenamento da aplicação.

Autor: João Pedro Bodaneze Reva.

Fonte de referências:

https://dev.to/voralagas/first-day-to-redux-531

https://bognarjunior.wordpress.com/tag/react-redux/

https://pt-br.reactjs.org/

https://redux.js.org/

https://medium.com/leanjs/introduction-to-redux-redux-explained-with-very-simple-examples-b39d7967ceb8

https://medium.com/byte-sized-react/what-is-react-41a885e51454

https://www.edureka.co/blog/what-is-react/