React

Compartilharei aqui alguns estudos e progressos meus sobre a biblioteca Javascript React.

O que é o React?

O React é uma biblioteca para construir interfaces gráficas, front-end, para a Web (HTML, CSS e Javascript/Typescript), permitindo criar sistemas web Single Page Applications (SPA) e também Progressive Web App (PWA).

Single Page Applications (SPA) são websites/sistemas web que tem toda sua lógica em apenas uma página, e ela vai sendo atualizada através de javascript (com AJAX) a medida em que o usuário vai navegando por ela. Apesar de ser usado muito em SPAs, você não necessariamente precisa usar esse paradigma para usar o React.

Progressive Web App (PWA) são websites/sistemas web que podem se passar por aplicativos de celular, são um híbrido de página web com aplicativo móvel.

Embora não seja um framework, pois deixa a cargo do desenvolvedor várias decisões de design, compete diretamente com os frameworks Javascript web Angular e Vue. Uma das diferenças principais entre uma biblioteca e um framework é a de que o framework é quem executa seu código, ao contrário da biblioteca onde seu código é quem chama a biblioteca. Essa característica dos frameworks é chamada Inversion of Control (IoC) e está ligada com o Hollywood Principle. Como o React não é um framework você detém mais controle das coisas nesse sentido.

Como gerenciar o estado das variáveis?

A princípio existem 4 opções famosas

• React puro
• React Hooks
• Biblioteca Redux
• Biblioteca MobX

React puro (gerenciar na mão) pode dar muito trabalho e tornar a manutenção do código um inferno porque você é obrigado a passar todas as variáveis que são compartilhadas entre componentes diferentes da interface gráfica por parâmetro no construtor de cada componente.

React Hooks é a nova forma "pura" de gerenciar estados, é um módulo da biblioteca do React lançada em 2019 e permite gerenciar estados das variáveis de uma maneira mais fácil do que "React puro". Algumas pessoas que têm aplicações simples em React estão migrando de Redux para React Hooks para simplificar o código dos seus apps.

Essas bibliotecas ajudam a centralizar as variáveis em um só lugar, facilitando o acesso a elas e te auxiliando a receber notificações quando a variável é alterada por algum componente ou ação.

Redux ou MobX, qual escolher?

Como simular mudanças na URL com o React?

Para simular mudanças na URL, usa-se uma ferramenta chamada router (roteador).

O mais comum é o React Router.

Referências

Tutorias sobre React

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

Explicação geral sobre React
https://tableless.com.br/react-o-que-e-e-como-funciona-essa-ferramenta/

Qual gerenciador de estados escolher: Redux ou MobX?

Comparação rápida entre Redux e Mobx.
https://codeburst.io/mobx-vs-redux-with-react-a-noobs-comparison-and-questions-382ba340be09

Benchmarks e Comparações entre Redux e Mobx (bem completo!)
https://blog.logrocket.com/redux-vs-mobx/

Comparação rápida entre Redux e Mobx
https://www.educba.com/mobx-vs-redux/