React
Documento da discussao: link do notion no grupo do telegram!!
----------------------------------------------------------------------------------------------------------
Lista de alunos
Adalton de Sena Almeida Filho - 12542435
Bernardo Rodrigues Tameirão Santos - 12733212
Gabriel dos Santos Brito - 10284250
Felipi Yuri Santos - 11917292
Igor Cardozo Martins - 10387515
Vinicus Carneiro Macedo - 11915752
Yuri Fernandes Pereira - 13730127
Editor: Vinicius
Coordenador: Yuri
Apresentadores: Adalton, Gabriel, Igor
Principais atributos do Framework
- Components: O React permite a criação e utilização de componentes independentes que permite a reutilização do mesmo componente em diversas partes do projeto. Para se ter uma boa funcionalidade desses componentes é necessário seguir algumas diretrizes do próprio React com o uso de Hooks e Props.
- Interface independente do Servidor: Com React a Interface se torna independente do Servidor e utiliza somente o navegador para gerar a interface, além disso possui um DOM Virtual que é quem recebe as mudanças que ocorrem através do usuário. A partir disso compara-se o DOM Virtual com o Real e somente as diferenças entre os dois são modificadas no Real.
- JSX: Permite a mistura entre HTML e JavaScript, isso faz com que a codificação se torne de certa forma simples e escalonável.
- Renderização Condicional: Com React é possível condicionalizar através do JSX o que será exibido para o usuário, isso facilita na criação de componentes que possam ser diferentes dependendo das informações que recebe.
- Typescript: React permite a utilização de Typescript para codificação diminuindo a quantidade de erros possíveis por falta de tipagem em um grande projeto, não há restrições em utilizar somente JavaScript
- Fluxo Unidirecional de Dados: O React é projetado de forma que pode suportar apenas uma direção de fluxo de informação. Caso necessite de fluir em outra direção, será necessário extensões adicionais.
Vantagens do Framework
- Fácil de ler e de ser usado: Qualquer desenvolvedor que possui um background em JavaScript pode rapidamente entender a framework e começar a criar aplicações dentro de poucos dias, pois o React conta com uma grande quantidade de conteúdos disponíveis na web, além de muitos pacotes prontos. Além disso, ainda possui a vantagem de a biblioteca JavaScript User Interface(UI) library ser de código aberto, o que facilita na execução de alguma tarefa.
- Componentes reutilizáveis: Uma aplicação React é feita de múltiplos componentes, e cada componente tem sua própria lógica. Estes componentes são responsáveis pelo output de um pequeno trecho de código HTML que pode ser reutilizado onde for necessário. Os códigos reutilizáveis facilitam o desenvolvimento e a manutenção das aplicações.
- Aprimoramento de perfomance: Muitos desenvolvedores enfrentavam problemas quando a árvore DOM era atualizada, pois atualizar a árvore toda diminuía a perfomance da aplicação. O React resolveu esse problema introduzindo o virtual DOM. O virtual DOM existe inteiramente na memória e é uma representação do DOM no browser. Quando escrevemos um componente React, nós não estamos escrevemos diretamente no DOM, mas sim em componentes virtuais que o React transformará em DOM posteriormente, atualizando somente os elementos necessários e possibilitando uma perfomance suave e mais rápida.
- Suporte de ferramentas úteis: O React adquiriu muita popularidade devido à presença de um amplo conjunto de ferramentas úteis. Estas ferramentas tornam as tarefas dos desenvolvedores mais compreensíveis e fáceis. O React Developer Tools foi projetado como uma extensão Chrome e Firefox e permite inspecionar a hierarquia de componentes React no virtual DOM. Também permite selecionar componentes específicos e examinar e editar suas props e o state.
- Integração com outras Frameworks: O React permite a utilização de componentes Vue e vice-versa, isso é possível através da biblioteca https://github.com/akxcv/vuera vuera. Muitos desenvolvedores trabalham tanto em projetos Vue como em projetos React, e existem momentos em que um desenvolvedor precisa criar um componente no React que já foi implementado em outro projeto Vue. Ele poderia reescrever o componente do zero ou simplesmente plugar o componente Vue no seu projeto em React.
Desvantagens do Framework
- Alta taxa de Atualizações: React sofre muitas atualizações seguidas, isso por um lado é bom pois mostra comprometimento da empresa com a sua manutenção mas por outro lado dificulta a adaptação de programadores com os atualizações.
- Documentação pobre: Pelo fato de React sofrer muitas atualizações seguidas acaba ficando muitas vezes sem a documentação necessária para cada atualização, complicando para quem programa.
- UI Part: React se preocupa somente com UI e nada mais, então é necessário fazer o uso de extensões para se conseguir uma aplicação mais completa.
- JSX é uma barreira: Alguns membros da comunidade de desenvolvedores consideram o JSX uma barreira, especialmente para desenvolvedores novatos, pois apesar de a abordagem de misturar HTML com JavaScript trazer alguns benefícios, ela também dificulta a curva de aprendizado devido à sua complexidade.
Principais Nichos de Aplicação
- Aplicações rápidas e escaláveis: Várias empresas utilizam:
- Netflix
- Dropbox
- Paypal
- Desenvolvimento Web: É amplamente usado para desenvolver aplicações de web dinâmicas e interativas. Ele permite aos desenvolvedores criar componentes UI reutilizáveis e os renderizar e atualizar de forma eficiente quando os dados mudam.
- Single-Page Applications (SPAs): É utilizado na construção de Aplicações de Página Única em que a aplicação inteira roda em uma única página web. A arquitetura baseada em componentes do React facilita a criação de um código modular e fácil de manter para UIs complexas.
- Desenvolvimento Mobile: React Native, um framework feito utilizando o React, permite desenvolvedores construírem aplicações mobile para iOS e Android usando JavaScript. Compartilhamento de código entre plataformas é possível, habilitando um desenvolvimento e manutenção eficientes.
- Bibliotecas de Componentes UI: A arquitetura baseada em componentes do React permite criar componentes UI e bibliotecas reutilizáveis. Portanto, existem bibliotecas que provém componentes pré-feitos que desenvolvedores podem usar, acelerando desenvolvimento de uma aplicação.
- Visualização de Dados: A habilidade de atualizar a UI de forma eficiente do React o torna adequado para aplicações de visualização de dados. A arquitetura de componentes do React permite uma integração fluída dos dados nas aplicações web.
- Progressive Web Applications (PWAs): Pode ser utilizado para desenvolver Aplicações de Web Progressivas, que são aplicações de web que oferecem uma experiência nativa, incluindo ferramentas offline, notificações e um comportamento parecido com um app
Perspectivas Futuras
- Migração de muitas aplicações para React Native para progrmaçaõ Mobile.
- Framework mais utilizado do mundo em pesquisa realizada pela JetBrains e StackOverflow
- Suporte Oferecido pela empresa META, não se sabe ao certo como se dará a continuação do react.
Referências
React Futures. Disponível em: https://www.javatpoint.com/react-features.
Pros and Cons of ReactJS. Disponível em: https://www.javatpoint.com/pros-and-cons-of-react
The Best Guide to Know What is React. Disponível em: https://www.simplilearn.com/tutorials/reactjs-tutorial/what-is-reactjs#reactjs_advantages