Centro Universitário de Brasília

Faculdade de Tecnologia e Ciências Sociais Aplicadas – FATECS

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas

REACT
A TECNOLOGIA REVOLUCIONÁRIA PARA DESENVOLVIMENTO WEB

GUILHERME ANTÔNIO
PEDRO CRUVINEL
RAFAEL VICTOR
HENRIQUE HOLINGER
SUED VIEIRA BARRETO
LUCA CALAZANS
MATHEUS ASAFE
HEINER HENRIQUE
LUAN NOVAIS
GUSTAVO ARAÚJO

Brasília – DF
2023
Sumário
1. Introdução ao React ........................................................................................................ 3
2. Características .................................................................................................................. 3
3. Aplicações .......................................................................................................................... 5
4. Análise – Vantagens e Desvantagens ........................................................................ 6
4.1 Vantagens....................................................................................................................... 6
4.2 Desvantagens ................................................................................................................ 6
5. Estado Atual e Futuro ..................................................................................................... 7
5.1 React Hoje ...................................................................................................................... 7
5.2 React no Futuro ............................................................................................................ 7
6. SPA e PWA ......................................................................................................................... 8
7. Conclusões ...................................................................................................................... 10
8. Bibliografia ....................................................................................................................... 11
 1. Introdução ao React

O React, também conhecido como React.js, é uma das bibliotecas

JavaScript mais populares e influentes no desenvolvimento de interfaces de
usuário para aplicações web modernas. Criado e mantido pelo Facebook, o
React revolucionou a maneira como os desenvolvedores constroem interfaces
interativas e dinâmicas.
O que torna o React tão poderoso é sua abordagem à criação de interfaces por
meio de componentes reutilizáveis. Em vez de construir páginas web como um
todo, os desenvolvedores criam pequenos pedaços de UI chamados de
"componentes". Esses componentes podem ser combinados e reutilizados de
maneira eficiente para formar interfaces complexas, mantendo o código
organizado e fácil de manter.
Uma das características distintivas do React é o conceito do "Virtual DOM". O
React mantém uma representação virtual do Document Object Model (DOM)
em memória, permitindo atualizações de interface eficientes. Quando os dados
ou o estado de um aplicativo mudam, o React calcula as diferenças entre o
Virtual DOM e o DOM real, atualizando apenas as partes afetadas, em vez de
redesenhar toda a página. Isso resulta em um desempenho mais rápido e uma
experiência do usuário mais responsiva.
React é um framework JavaScript criado pelo Facebook (atual Meta) que é
usado para criar interfaces de usuário (UI) em aplicativos webs. Ele é popular
por ser fácil de usar, altamente flexível e escalável, e é usado por muitas
empresas de tecnologia, incluindo o Facebook, Instagram e Airbnb.

2. Características

Componentização: O React promove a criação de interfaces de usuário

através da construção de componentes reutilizáveis. Cada componente
representa uma parte isolada da interface e pode ser composto para formar
interfaces mais complexas. Essa abordagem facilita a manutenção e
organização do código.

Virtual DOM: O React utiliza um conceito chamado Virtual DOM (DOM

Virtual). Em vez de atualizar o DOM real diretamente, o React mantém uma
representação virtual do DOM em memória. Quando ocorrem alterações, o
React compara o Virtual DOM anterior com o novo estado do Virtual DOM e
determina as diferenças. Isso permite atualizações eficientes e rápidas da
interface, minimizando a manipulação direta do DOM, que pode ser uma
operação custosa em termos de desempenho.
 Reatividade: O React segue um modelo de fluxo de dados unidirecional, o
que significa que os dados fluem de cima para baixo na hierarquia de
componentes. Isso torna o comportamento da interface mais previsível, uma
vez que as alterações de dados são propagadas de forma unidirecional,
facilitando a depuração e o rastreamento das atualizações.

JSX (JavaScript XML): O React utiliza JSX, uma extensão do JavaScript

que permite escrever código HTML de forma declarativa dentro do JavaScript.
Isso facilita a criação de elementos de interface de usuário de forma intuitiva e
legível, tornando o código mais fácil de entender.

Renderização no servidor: O React suporta a renderização no servidor

(Server-Side Rendering - SSR). Isso significa que a renderização da interface
pode ocorrer tanto no servidor quanto no cliente. A renderização no servidor é
útil para melhorar o desempenho da primeira carga da página e para aprimorar
a otimização de motores de busca (SEO).

Ecossistema robusto: O React possui um ecossistema rico de bibliotecas

de terceiros, ferramentas e extensões que facilitam o desenvolvimento. Além
disso, é comumente usado em conjunto com outras bibliotecas e frameworks,
como React Router para gerenciar a navegação em aplicações de página única
(SPA) e Redux para gerenciar o estado da aplicação.

Comunidade ativa: O React possui uma comunidade ativa de

desenvolvedores e uma grande quantidade de recursos, documentação e
tutoriais disponíveis online. Isso facilita a aprendizagem e o suporte ao
desenvolvimento de aplicações React.

Flexibilidade: O React é agnóstico em relação a outras tecnologias e pode

ser integrado a diferentes stacks de desenvolvimento, seja com a linguagem de
programação, o servidor ou o banco de dados de sua escolha.
Devido a essas características, o React é amplamente escolhido para o
desenvolvimento de interfaces de usuário eficazes, reutilizáveis e de alto
desempenho em diversas situações, abrangendo desde aplicações web até
aplicações móveis.
 3. Aplicações

O React por sua vez é umas das principais ferramentas utilizadas no

desenvolvimento web. Dessa forma, alguns vários exemplos em que o react é
utilizado é o próprio facebook, sendo eles os desenvolvedores e o mantido até
hoje.
Além do facebook ele é utilizado no WhatsApp, Twitter (ou X) e Netflix.
Sendo assim podemos perceber que o React é amplamente utilizado em
diversos sites e aplicativos interativos e responsivos.
Alguns exemplos de sua aplicação são:
- Criar uma aplicação de bate papo em tempo real; Por sua vez facilitando na
responsividade dessas aplicações. Permitindo que os usuários enviem
mensagens entre eles em tempo real. Alguns exemplos conhecidos que
utilizam: Messenger e Discord
- Aplicações de redes sociais; Se assemelhando a aplicação de bate-papo,
Porém expandida para uma comunidade maior. Esses usuários podem interagir
uns com outros de diversas maneiras em tempo real. Alguns exemplos
conhecidos que utilizam: Facebook, Instagram:
- Aplicações de comércio eletrônico; Lojas online, permitindo habilitar funções
como por exemplo adicionar ou remover itens de carrinho de compras,
visualizar esse carrinho e fazer o pagamento de diversas formas diferentes.
Exemplo conhecido: shopify
- Aplicações de fórum; Como esses fóruns combinam elementos de bate-papo
e mídias sociais por meio de publicações, comentários e reações em tempo
real.
 4. Análise – Vantagens e Desvantagens

4.1 Vantagens

Reatividade: O React utiliza uma abordagem baseada em componentes

que facilita a criação de interfaces de usuário reativas e dinâmicas.
Reutilização de Componentes: Componentes no React podem ser reutilizados
em todo o aplicativo, o que economiza tempo e esforço na criação de interfaces
consistentes.
Virtual DOM: O Virtual DOM ajuda a otimizar o desempenho,
atualizando apenas as partes que mudaram, em vez de redesenhar a página
inteira.
Abordagem Declarativa: A criação de interfaces no React é feita de
maneira declarativa, tornando o código mais previsível e fácil de entender.
Comunidade Ativa: O React possui uma comunidade de
desenvolvedores ativa e oferece suporte extenso, com uma ampla variedade
de bibliotecas e recursos de terceiros.
Renderização no Lado do Servidor (Server-Side Rendering - SSR):
O React permite a renderização no lado do servidor, melhorando o
desempenho e a otimização de mecanismos de busca.

4.2 Desvantagens

Curva de Aprendizado: Para desenvolvedores iniciantes, o React pode

ter uma curva de aprendizado íngreme, especialmente ao lidar com conceitos
como JSX e estados.
Complexidade: À medida que os aplicativos crescem, a complexidade
pode aumentar, tornando a manutenção e a depuração mais desafiadoras.
Overhead: O uso do React em pequenos projetos pode ser considerado
excessivo e pode adicionar overhead ao aplicativo. O termo "overhead"
geralmente se refere a recursos computacionais adicionais, como memória ou
processamento, que são consumidos devido às operações ou funcionalidades
específicas do React, mas que não contribuem diretamente para a
funcionalidade principal da aplicação.
Integração de Bibliotecas: A integração de bibliotecas de terceiros nem
sempre é direta, e a escolha de bibliotecas incompatíveis pode causar
problemas.
 Desempenho em Aplicativos Móveis: Em aplicativos móveis, o React
pode não ser a escolha mais eficiente devido ao consumo de recursos.
Tamanho do Pacote: O tamanho do pacote do React pode ser
significativo, o que pode impactar o tempo de carregamento do aplicativo,
especialmente em conexões de internet mais lentas.
É importante notar que as vantagens e desvantagens do React podem variar
dependendo do contexto do projeto e dos requisitos específicos.

5. Estado Atual e Futuro

Como citado anteriormente o React nada mais é do que uma biblioteca (que
utiliza Java) com o objetivo de criar interfaces para usuários, destacando as
partes da tela com compartimentos especiais. Esse framework é utilizado por
diversas empresas como o Instagram, Netflix e Twitter, além de está em
constante crescimento já que desde 2013 essa plataforma é open source.
Nesse tópico discutiremos o estado que se encontra essa tecnologia e quais
são as nossas expectativas para o futuro.

5.1 React Hoje

Por ser utilizada por várias empresas em aplicações web e móveis significa
que para o desenvolvedor que sabe desfrutar dessa tecnologia terá uma ampla
oportunidade de emprego além da sua comunidade grande e ativa. De acordo
com Robisson Oliveira essa tecnologia possui diversos contribuidores o que
ajuda na longevidade da plataforma.
Como citado anteriormente o React é muito dinâmico, apesar de ser complexo,
ele utiliza técnicas que ajudam a facilitar seu desempenho como o Virtual DOM
e Babel, é uma plataforma bastante flexível e interessante de se usar.
Apesar de todos esses “facilitadores” ele pode se tornar muito complexo para
programadores iniciantes o que acaba desanimando pessoas que tentam
aprender essa tecnologia.

5.2 React no Futuro

Melhorias de Desempenho: Com o crescimento constante da Meta (antiga

Facebook) a expectativa aumenta já que devem investir em seu
aprimoramento. Além de se tornar mais adaptável a outras plataformas e
adicionar novos recursos e deixar seus componentes mais avançados
facilitando assim o desenvolvimento web.
Crescente comunidade: Com mais utilidades para essa plataforma ela
tende a crescer sua comunidade, fazendo assim que descubram novas
fórmulas dentro da própra plataforma, afirmam o que alimenta as linguagens e
tecnologias são suas comunidades.
Suporte no React Native: É uma extensão do React, é usado para
desenvolver aplicativos móveis. Espera um foco ainda maior nessa extensão.

6. SPA e PWA

Simple Page Application

Um SPA é uma aplicação web que roda em uma única página, se
assemelhando a um aplicativo desktop ou um mobile, são chamadas de
“páginas ajax”, um bom exemplo é o Gmail do Google a navegação na
aplicação rola toda em uma única página e todo o conteúdo é carregado de
uma vez ou obtido dinamicamente (ou seja, via requisições Ajax).
A aplicação SPA pode ser construída de diversas formas, a mais comum é ser
auxiliado por um framework Javascript como Angular, Vue.js, Ember.js, React.
Para construir uma SPA utilizando o React, é necessário seguir alguns
princípios básicos:
Componentização: O React é baseado em componentes reutilizáveis,
que podem ser combinados para formar uma aplicação completa. Cada
componente deve ser responsável por uma única funcionalidade e deve ser
fácil de entender.
Roteamento: Uma SPA geralmente tem várias rotas, cada uma
representando uma página diferente. O React oferece suporte a roteamento
por meio de bibliotecas, que permite que você defina rotas e renderize
componentes diferentes com base na rota atual.
Performance: As SPAs são conhecidas por sua rapidez e
responsividade. Para garantir que sua aplicação seja rápida, é importante
otimizar o código e minimizar o número de requisições ao servidor.
Testabilidade: O React é altamente testável e oferece suporte a várias
ferramentas de teste. É importante escrever testes para garantir que sua
aplicação esteja funcionando corretamente e para detectar problemas antes
que eles se tornem críticos.
Esses são alguns dos princípios básicos para a construção de uma SPA
utilizando o React. Seguindo esses princípios, você pode criar uma aplicação
rápida, responsiva e fácil de manter.

Progressive Web Application

PWA É uma técnica de construção de aplicações web que se comportam como
aplicativos nativos, oferecendo uma experiência de usuário semelhante à de
um aplicativo instalado no dispositivo.
Para criar uma PWA, é necessário utilizar tecnologias web padrão, como
HTML, CSS e JavaScript, além de seguir as regras da PWA para garantir a
integração com o sistema operacional. Existem várias ferramentas para a
criação das PWAs, como; o Create React App, Angular CLI, Vue CLI, Ionic e o
Workbox.
Para criar uma PWA, é importante seguir alguns princípios básicos:
Segurança: A PWA deve ser segura e acessível apenas por meio de
conexões HTTPS.
Responsividade: A PWA deve ser responsiva e se adaptar a diferentes
tamanhos de tela e dispositivos.
Confiabilidade: A PWA deve ser confiável e funcionar mesmo em
condições de rede instáveis ou inexistentes.
Engajamento: A PWA deve ser engajadora e oferecer uma experiência
de usuário semelhante à de um aplicativo nativo.
Instalabilidade: A PWA deve ser instalável e permitir que os usuários
acessem a aplicação diretamente da tela inicial do dispositivo.
Notificações: A PWA deve oferecer suporte a notificações push para
manter os usuários engajados e informados.
Acesso offline: A PWA deve funcionar offline e permitir que os usuários
acessem a aplicação mesmo sem conexão com a internet.
Atualização: A PWA deve ser atualizável e permitir que os usuários
acessem a versão mais recente da aplicação.
 7. Conclusões

Portanto, através desses estudos percebemos que o React pode ser

fundamental para auxiliar o desenvolvimento de sistemas. Com suas
excelentes características e inúmeras ferramentas ele pode ser útil aos
desenvolvedores para simplificar tarefas como a de funções por exemplo e
assim simplificando muito o trabalho.
Devido ser mantido por uma empresa grande como o Facebook e utilizados
por empresas como Netflix, Twitter, Airbnb, percebemos que ele pode gerar
uma certa segurança pois foi feito inúmeros teste e soluções e com isso ele
tem se adotado em muitas empresas. Para utilizá-lo em um projeto qualquer,
deve-se analisar as vantagens e desvantagens como descrito no artigo para
analisar os recursos utilizados. Em relação ao mercado da tecnologia, como ele
é utilizado por grandes empresas e gerando uma confiança, o mercado se
torna bom para nós desenvolvedores pois outras empresas também o
adotarão.
 8. Bibliografia

React – Uma biblioteca JavaScript para criar interfaces de usuário" disponível

em pt-br.reactjs.org
https://pt-br.legacy.reactjs.org/#:~:text=URL%3A%20https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fpt

DevMedia oferece uma variedade de artigos sobre React, abordando o ciclo de

vida dos componentes com o uso de Hooks até a utilização de Styled
Components e Context API
https://pt-br.react.dev/blog/2023/03/16/introducing-react-dev
React - Aprenda Praticando: Desenvolva Aplicações web Reais com uso da
Biblioteca React e de Seus Módulos Auxiliares" por Maurício Samy Silva.