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://medium.com/byte-sized-react/what-is-react-41a885e51454