JS e React Passo A Passo
JS e React Passo A Passo
JS e React Passo A Passo
Santa Maria, RS
2022
Pedro Leal Lovatto
Santa Maria, RS
2022
Pedro Leal Lovatto
Santa Maria, RS
2022
RESUMO
1 INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1 OBJETIVO GERAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.1 Objetivos Específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 ESTRUTURA DO TRABALHO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2 LINGUAGEM JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1 CONCEITOS BÁSICOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2 TIPOS DE DADOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 ESTRUTURAS DE CONTROLE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.4 FUNÇÕES DO JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3 FRAMEWORKS JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1 ANGULAR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2 VUE.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3 REACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.4 COMPARAÇÃO ENTRE OS FRAMEWORKS: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4 FRAMEWORK REACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.1 SINTAXE JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.2 ESTADO DE UM COMPONENTE (STATE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.3 COMPONENTES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.4 CLASSIFICAÇÃO DE COMPONENTES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.5 HOOKS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.6 PROPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.7 USEEFFECT HOOK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.8 USEEFFECT DEPENDÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.9 REACT ROUTE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5 SISTEMA DE CADASTRO DE IMÓVEIS E USUÁRIOS . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1 APLICAÇÃO WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.1 Componente Página Inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.2 Componente Cadastro de imóveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.1.3 Componente ListaUsuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6 CONCLUSÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
REFERÊNCIAS BIBLIOGRÁFICAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
1 INTRODUÇÃO
Cada vez mais as empresas estão oferecendo seus serviços através da Internet,
que traz grande comodidade e praticidade para as pessoas (ANDRADE, 2016). Algo que
aumentou de março de 2020 para cá devido a pandemia de COVID-19, segundo uma pes-
quisa realizada em setembro de 2020 pela empresa Catho, plataforma brasileira com va-
gas de emprego, a procura por desenvolvedores web aumentou 107% (DIRIGIDA, 2020). A
complexidade e exigência dos projetos exigidos em empresas veem aumentando também,
por conta disso os desenvolvedores web precisam estudar novas linguagens de programa-
ção para atender as demandas de grandes empresas.
Com o aumento de linguagens de programação, notou-se um crescimento na uti-
lização dos frameworks, um framework nada mais é do que um conjunto de classes que
proporcionam um ambiente padronizado, deixando o desenvolvimento bem mais produtivo,
permitindo o re-uso de código (PAIXãO, 2017).
Existem muitos motivos para o uso de um framework, como os recursos que pos-
suem, oferecendo um aumento da produtividade, segurança, suporte e outros benefícios.
Mas uma das principais vantagens é podermos utilizar uma solução pronta e testada para
problemas comuns, ou seja, não precisamos reinventar a roda para cada projeto. (WILLI-
AMMIZUTA, 2017)
Este trabalho tem como objetivo geral o estudo e aquisição de conhecimentos sobre
o JavaScript e o framework React.
Esse trabalho foi organizado em capítulos. Este capítulo foi uma introdução ao que
será aprofundado nos próximos capítulos, as motivações para o trabalho e os objetivos.
O capítulo 2 apresenta os conceitos básicos do JavaScript, falando como a lingua-
gem funciona, seus tipos de dados e funções.
No capítulo 3 está o estudo sobre os frameworks Angular, Vue.js e React, além de
uma tabela que compara os três frameworks.
O capítulo 4 apresenta um estudo mais aprofundado do React, detalhando seus
recursos e motivos para esse framework ter sido escolhido para o trabalho.
No capítulo 5 está a apresentação da aplicação que foi desenvolvida utilizando o
framework React.
O capítulo 6 concluí o trabalho, apontando benefícios adquiridos com o estudo e
dificuldades encontradas.
2 LINGUAGEM JAVASCRIPT
1 2
A linguagem JavaScript é destinada para back-end e front-end e foi criada em
1996 por Brendan Eich, o qual na época era um desenvolvedor na Netscape. A lingua-
gem JavaScript foi desenvolvida para rodar no lado do cliente, ou seja, a interpretação
e o funcionamento da linguagem dependem de funcionalidades hospedadas no navega-
dor do usuário. Isso é possível porque existe um interpretador JavaScript hospedado no
navegador (SILVA, 2010).
A linguagem JavaScript se organiza em sentenças de código, blocos de código
(agrupamento de sentenças de código). Para executar a linguagem JavaScript existe vá-
rias maneiras, como ferramentas online, console do navegador, o software Node ou um
editor, como Visual Studio Code. O desenvolvimento de sistemas web com a linguagem
Javascript faz uso de três palavras reservadas: var, let e const.
O uso da palavra reserva var tem a característica de utilização na função atual ou
também no escopo global, apesar de não recomendado para "redeclarar"uma variável. Por
outro lado, a palavra reservada let é utilizada para declarar variáveis em um escopo de
bloco, instrução ou em uma expressão na qual está sendo utilizada.
Com base nisso, o var possui algumas limitações relacionadas ao escopo. Já o let
é mais utilizado devido a flexibilidade do seu uso, pois em certas ocasiões o usuário tem
a possibilidade de declarar uma variável para apenas dentro do escopo de uma função, e
não globalmente. Essa é a principal diferença entre a palavra reservada let e a var.
A linguagem JavaScript possui também uma palavra reservada para definição de
constantes. O const é utilizado para definir um valor que não irá mudar durante a execução
do código.
Esse tipo permite armazenar dados numéricos como int e float e também a função Num-
ber, conforme o Código 2.1.
1 const peso1 = 1.0
2 const peso2 = Number ( ’ 2.0 ’)
Outro tipo de dado é o String que é destinado para armazenar uma cadeia de ca-
racteres no JavaScript. O Código 2.2 apresenta um exemplo de utilização do tipo de dado
String.
1 const escola = " Cod3r "
uma lista de elementos. O acesso aos elementos do array é através de índices, iniciando
pelo índice 0.
O tipo de dado Array é uma estrutura de dados destinada a armazenamento de
dados homogêneos, onde não é recomendado o armazenamento de diferentes tipos de
dados no mesmo array.
O tipo de dados Object em JavaScript é uma coleção de chaves e valores onde
tem o nome do atributor e o valor correspondente. Esse valor pode ser um número, texto,
boolean e até uma função. Além disso, é possível armazenar objetos dentro de um objeto.
JavaScript permite, além de criar um objeto, definir como esse objeto é, quais são seus
atributos, comportamentos e funções dinamicamente. O Código 2.5 apresenta um exemplo
de criação de um object com a definição de um atributo nome.
1 const prod1 = {}
2 prod1 . nome = " Celular Ultra Mega "
7 }
O laço de repetição for é uma estrutura de controle usada para casos que o usuá-
rio deseja repetir um bloco de código até que uma condição seja válida. O Código 2.11
apresenta um exemplo de código que é apresentado o valor de 1 a 10.
1 let contador = 1
2 for ( let i = 1; i <= 10; i ++) {
3 console . log ( " i = " + i )
4 }
Nessa próxima sessão, será detalhado algumas das principais funções existentes
no Javascript. Uma função em Javascript seria um dado, um dado especial, porque ele é
executado e é possível também passar através dos parênteses os parâmetros para execu-
tar. Uma função é uma das partes mais importantes da linguagem Javascript.
O primeiro tipo de função é a função literal e essa função pode receber parâmetros
e retornar um valor. O retorno de um valor de uma função no Javascript é opcional. Caso
a função não retorne nada, então, ela retornará o tipo de dado undefined. Um detalhe,
mesmo quando há uma função de uma única sentença, não é possível omitir o bloco,
pois ele é obrigatório (CROCKFORD, 2008). O Código 2.12 apresenta um exemplo de
utilização de uma função literal.
1 1 function fun1 () { }
Além de poder criar funções de maneira literal, é possível armazenar uma função
em uma variável, dessa maneira o usuário será capaz de referenciar a função a partir
dessa variável.
1 const fun2 = function () { }
Código 2.13: Outro exemplo de função literal dessa vez armazenando-a em uma variável.
Note o ’arguments’, ele é um array interno, toda função tem esse array disponível.
Quando nenhum parâmetro é passado, esse array é vazio e o usuário tem a possibili-
dade de pegar todos os parâmetros que foram passados a partir da chamada de uma
função e fazer qualquer tipo de operação. Nesse exemplo, pegar cada parâmetro e somar.
(CROCKFORD, 2008)
Não será detalhado todos os tipos de parâmetros, então, serão mostrados apenas
um tipo como exemplo. O Parâmetro padrão já existia na versão anterior a de 2015, mas
era bem mais complicada e que podia gerar potenciais problemas. A versão de 2015
trouxe essa possibilidade de ter o parâmetro padrão de uma maneira melhor, pois antes
era necessário fazer verificação dos valores. A partir da versão de 2015 não precisa mais.
1 function soma3 ( a = 1 , b = 1 , c = 1) {
2 return a + b + c
3 }
4 console . log ( soma3 () )
5 console . log ( soma3 (3) )
15
Um tipo de função bem comum de ser encontrada em aplicações que utilizam Ja-
vascript são as funções Arrow, elas foram introduzida na versão 2015, tem como objetivo
possuir uma sintaxe reduzida e ter um this associado ao contexto no qual a função foi
escrita. (BANKS; PORCELLO, 2017)
1 // Sem função arrow
2 let dobro = function ( a ) {
3 return 2 * a
4 }
5 // Com função arrow
6 dobro = a = > 2 * a
A função ForEach é destinada a utilização com tipos de dados Array e executa uma
dada função em cada elemento do Array. Dessa forma, esse tipo de função executa fun-
ções do tipo Callback em cada elemento da ordem com um valor atribuído considerando
três argumentos: o valor do elemento, índice do elemento e o array que está sendo per-
corrido. Então, essa chamada consiste na chamada da função imprimir onde o forEach vai
passar como parâmetro o nome do elemento e como segundo parâmetro o índice.
Para finalizar essa seção, existem as funções Factory, que seriam funções que re-
tornam novos objetos, porém não necessitam da palavra-chave new. Esse recurso da lin-
guagem JavaScript oferece simplicidade na criação de instâncias de objetos minimizando
a complexidade da criação de classes com a palavra-chave new (ELLIOTT, 2017).
1 function criarPessoa ( nome , sobrenome ) {
2 return {
3 nome : nome ,
4 sobrenome : sobrenome ,
5 nomeCompleto () {
6 nome + " " + sobrenome ;
7 }
8 };
9 }
10 let pessoa1 = criarPessoa ( " Pedro " , " Lovatto " ) ;
11 let pessoa2 = criarPessoa ( " Márcio " , " Luís " ) ;
12 console . log ( criarPessoa () )
O Código 2.19 apresenta o uso da chamada da função criarPessoa, onde são cri-
adas instâncias de um objeto, ou seja, criando novos objetos a partir da chamada da
função. Dessa forma, basta o usuário passar as informações como parâmetros, sem a
necessidade de escrever uma nova função toda vez que o usuário desejar criar uma pes-
soa com informações diferentes (Linha 10 e 11). Isto é conhecido como Programação
orientada à objetos, que nada mais é do que um modelo de programação onde diversas
classes possuem características que definem um objeto na vida real. Cada classe deter-
mina o comportamento do objeto definido por métodos e seus estados possíveis definidos
por atributos.
O capítulo apresentou uma introdução ao JavaScript, mostrando seus conceitos
básicos, particularidades, seus tipos de dados e funções. Como pode ser visto durante o
capítulo, existem vários tipos de funções no JavaScript, cada uma podendo ser utilizada em
uma determinada situação. O próximo capítulo irá apresentar de maneira mais detalhada
17
3.1 ANGULAR
Lançado pelo Google em 2010, Angular evoluiu muito desde então, em 2016 re-
cebeu uma nova versão, chamada Angular 2, atualmente o Angular está na versão 10.
Angular é construído em cima do TypeScript, que seria uma ferramenta que permite pro-
gramar Javascript de forma tipada. O Angular é uma das principais escolhas de empresas
grandes para projetos front-end devido a sua robustez e padronização.
Antes do Angular 2, existia o AngularJS, mas a versão 2 já está muito à frente, por
ter uma performance melhor, suporte a mobile e suporte do Google, AngularJS não possui
suporte a mobile além de não ter novas atualizações, a não ser para corrigir erros. A seguir
3
SPA consiste em aplicações que carregam dinamicamente o conteúdo sem necessidade de atualização
da página (SCHNEIDER, 2016)
19
• src: seria o diretório principal, contém arquivos como main.ts, polyfills.ts, index.html,
styles.css e test.js. O que vale destacar é o polyfills.ts, que seria como um tradutor,
pois na hora de transpilar (ou seja, converter um código fonte em outro por meio de
um processo de compilação) ele traduz para o navegador, fazendo com que o usuário
tenha uma melhor visualização em qualquer tipo de navegador. Dentro do diretório
src contém a segunda pasta principal, o app, que contém todos os componentes da
aplicação, cada componente terá três arquivos, um CSS, um html e outro spec. Além
disso, este diretório contém assets, que irá conter todos os arquivos externos que é
possível colocar na aplicação, como imagens.
• tsconfig.json: arquivo que mostra qual versão do ECMAScript está sendo usado.
3.2 VUE.JS
Vue.js é um dos frameworks mais recentes, foi desenvolvido e lançado em 2014 por
Evan You, o Vue.js vem se tornando cada vez mais popular. Diferente do Angular e do
React, o Vue.js não possui suporte de uma grande empresa, e sim pela comunidade por
meio do Patreon. O Vue.js se destaca por ser reativo, ou seja, a sua arquitetura atualiza a
camada visual toda vez que tem uma mudança de estado, então o HTML será atualizado
toda vez que o valor de uma variável de um componente no framework for alterado. Outra
característica do Vue.js é ele ser progressivo, o que quer dizer que ele é adaptável com
outros frameworks e bibliotecas, então é possível usar o Vue.js em uma parte de uma
aplicação já construída ou trabalhar em conjunto, na parte visual, com framework back-
end.
Por ter surgido depois do React, o Vue.js usa algumas das suas características,
como o VirtualDOM, mas apesar disso, o Vue.js trabalha de maneira diferente, além de ser
mais completo. A Figura 3.2 apresenta a estrutura de diretórios do framework.
21
• public: contém dois arquivos, favicon.icon (ícone que aparece na aba) e index.html
(ponto de entrada para sua aplicação, onde o vue será inserido.
• src: parte em que o usuário irá programar, contém duas pastas e dois arquivos: as-
sets (contém as imagens do projeto), components (diretório que o Vue.JS recomenda
colocar os seus componentes).
3.3 REACT
É possível identificar que há uma grande diferença nas tecnologias exigidas para
iniciar os estudos para cada framework Javascript. Por outro lado, cada framework possui
uma característica para utilização em diferentes níveis de projetos no qual o Angular é
destinado para grandes projetos, como SPA monolítico, já o Vue.JS é recomendado para
projetos pequenos e o React é bastante flexível nesse ponto de vista, sendo utilizado em
projetos grandes e pequenos (WOHLGETHAN, 2018).
Quanto à complexidade, o Angular seria o mais complexo entre os três frameworks,
pois exige conhecimentos prévios em outras linguagens, tais como Node.js, Webpack e
especialmente Typescript, causando problemas para usuários que vieram apenas do Ja-
vascript. O React também exige conhecimentos prévios, mas o mais necessário é a famili-
arização com o JSX. O Vue.js é o mais simples de todos, o máximo que o usuário precisa
conhecer é o básico de HTML e Javascript. (WOHLGETHAN, 2018).
24
Figura 4.1 – Estatísticas dos frameworks mais utilizados em 2021 (STATISTA, 2022).
26
JavaScript XML (JSX) é uma sintaxe de extensão para a linguagem JavaScript es-
crita em estilo XML. O JSX não é obrigatório, mas fornece uma maneira sintática para
substituir métodos como React.createElement (). O código escrito em JSX será convertido
em JavaScript para que o navegador possa entender o código. (LUONG, 2019)
1 const elemento = <h1 > Com JSX ! </ h1 >;
Perceba que no Código 3.2 o usuário irá sempre precisar chamar a função Re-
act.createElement e passar a tag HTML (’h1’), alguma propriedade e algum texto que será
renderizado na tela (’Sem JSX’). Já no Código 3.1 bastou usar uma tag simples de HTML,
simplificando muito mais para a escrita do código.
12 }
13 render () {
14 return (
15 <div >
16 <h1 > Meu nome é : { this . state . Nome } </ h1 >
17 < button
18 type = " button "
19 onClick ={ this . mudarNome }
20 > Mudar o nome </ button >
21 </ div >
22 );
23 }
24 }
4.3 COMPONENTES
4.5 HOOKS
Introduzidos na versão 16.8 do React (REACT, 2022), hooks são um tipo especial
de função que possibilita o usuário criar um valor reativo, o que permite o usuário alterar
esse valor quando quiser. Hooks não funcionam dentro de classes, eles permitem que o
usuário use React sem classes. Hooks são reutilizáveis e podem ser criados pelo próprio
usuário, apesar do React já disponibilizar alguns.
1 import { useState } from " react " ;
2 const AdicionarUsuario = () = > {
3 const [ nome , setNome ] = useState ( ’ ’) ;
O array seria para pegar dois valores que esse hook retorna, o primeiro valor seria
o nome, que equivale ao ’ ’ e o segundo seria uma função para alterar esse valor. O
valor dentro do useState seria o valor inicial e pode ser de qualquer tipo, um array, object,
boolean, number.
4.6 PROPS
Código 4.7: Nesse exemplo ao invés de repetir esse código em todas as páginas foi
colocado em apenas um componente chamado PagTitulo que por padrão vai receber uma
variável chamada "titulo"com o valor recebido de outro componente.
1 function App () {
2 return (
3 < Router >
4 < div className = " App " >
5 < Navbar / >
6 < div className = " container is - max - widescreen " >
7 < Switch >
8 < Route exact path = " / " >
9 < PagTitulo titulo = " Página Inicial " / >
30
Código 4.8: Agora em outro componente está sendo chamado o componente PagTitulo
passando o valor "Página inicial"para o parâmetro titulo no fim essa chamada do
componente irá fazer a mesma coisa caso o usuário tivesse digitado aquele código do
componente PagTitulo mas dessa forma ele exemplifica além de evitar toda a repetição de
um código inteiro
Assim como os Hooks, o useEffect Hook também foi introduzidos na versão 16.8,
sua principal característica é rodar a função a cada vez que os componentes são renderi-
zados.
1 useEffect (() = > {
2 console . log ( ’ use effect ’) ;
3 console . log ( users ) ;
4 }) ;
Código 4.9: Essa função irá rodar toda vez que um componente for renderizado novamente
5 return (
6 < Router >
7 < div className = " App " >
8 < Navbar / >
9 < Switch >
10 < Route exact path = " / " >
11 < PagTitulo titulo = " Página Inicial " / >
12 </ Route >
13 < Route path = " / componentes / AdicionarUsuario " >
14 < AdicionarUsuario / >
15 </ Route >
16 < Route path = " / componentes / AdicionarImovel " >
17 < AdicionarImovel / >
18 </ Route >
19 < Route path = " / componentes / ListaUsuarios " >
20 < UsuariosCriados / >
21 </ Route >
22 < Route path = " / componentes / ListaImoveis " >
23 < ImoveisCadast / >
24 </ Route >
25 < Route path = " / UserInfo /: id " >
26 < DetalhesUsuario / >
27 </ Route >
28 < Route path = " / imovInfo /: id " >
29 < DetalhesImoveis / >
30 </ Route >
31 </ Switch >
32 </ div
33 < Router >
34 );
35 }
Após a escolha do framework, foi desenvolvida uma aplicação web para demonstrar
os recursos do framework React. A aplicação tem como propósito a criação de usuários
e imóveis, além de permitir a visualização e remoção dos imóveis e usuários criados. A
aplicação consiste em dez componentes, porém três seriam apenas seções das páginas e
não exatamente páginas inteiras como os outros sete componentes. Para a estilização da
aplicação foi utilizado o framework Bulma (BULMA, 2022).
A Figura 5.2 apresenta o recurso React Route da página inicial da aplicação web
desenvolvida para cadastra de imóveis e usuários.
Como pode ser visualizado na Linha 24, o atributo exact do React Route serve para
quando tem várias rotas com urls parecidas, desativando o caminho parcial (path) para
uma rota e garante que ela só retorne a rota se o caminho for um caminho exato para o
URL atual.
Além disso, foram definidas diversas rotas para componentes da aplicação web,
conforme descrito na Seção 4.3. Cada rota possui um path especificado e uma chamada
para o componente, o qual é composto de um conjunto de código que pode ser chamado
em diferentes partes da aplicação web.
35
Como pode ser visualizado nas Linhas 5 à 8 está sendo estabelecido e utilizado
Hooks, para especificação de valores e variávais para alteração dos atributos de um imó-
vel. A constante isPending foi utilizada apenas para simular o carregamento da página
no cadastro. Essa constante pode ser alterada para apresentar para o usuário um sis-
tema de carregamento que simula o processamento de cadastro de um imóvel (Linha 15).
Após o encerramento do cadastro de um novo imóvel, a constante é alterada para falso,
encerrando o recurso de carregamento da página (Linha 23).
A função handleSubmit será chamada no cadastro de um novo imóvel. Essa função
possui código responsável pelo registro de novos imóveis na aplicação. Na Linha 11, o
e.preventDefault(); será usadopara que toda vez que o botão de cadastro seja clicado, ele
irá atualizar as informações da página. Na Linha 12, um objeto imovel foi criado com os
valores pré-definidos pelo recurso Hooks.
O cadastro de um novo imóvel é armazenado no arquivo JSON através da cha-
mada do método fetch, passando url do arquivo (Linha 17), tipo de requisição (request),
como é possível visualizar na Linha 18 o POST. A seguir, os headers são especificados.
Na propriedade body é necessário transformar para o tipo de formato JSON através da
37
função JSON.stringify passando o objeto imovel. Na Linha 21, após a requisição ter sido
concluída, o método then irá acionar uma função que retorna uma mensagem de cadastro
realizado.
Como pode ser visualizado, uma tabela foi utilizada para apresentação das infor-
mações dos usuários do sistema contendo identificador, nome, idade, endereço, CPF e
opções para apresentação de mais detalhes.
A Figura 5.6 apresenta o código da página de listagem de usuários da aplicação
de cadastro de imóveis e usuários. Alguns recursos do framework React foram utilizados
neste componente para apresentação das informações da aplicação, tais como o método
useFetch para a busca dos dados do arquivo no formato JSON a função map que utiliza
uma função Callback para retornar um novo array de cada usuário do sistema.
38
de uma função Callback para retornar um novo array de cada usuário contendo as suas
respectivas informações (Linha 32-38).
Por fim, a Linha 40 apresenta o uso do recurso Link, apresentado na Seção 4.9,
com atributo to para permitir que seja possível abrir uma página com maiores informações
sobre um determinado usuário.
6 CONCLUSÃO
O desenvolvimento web com a utilização dos frameworks veio para facilitar e ajudar
os programadores. Em um mundo com oportunidades no mercado atual aumentando, um
framework serve como um melhor amigo para um programador, cada um apresentando
suas características, seus pontos positivos e negativos, mas todos entregando uma ma-
neira de ajudar no desenvolvimento web.
Esse trabalho estudou sobre três frameworks, Angular, Vue.js e React. Angular
se mostrou um framework complexo, mas muito viável para grandes projetos. O Vue é o
caçula entre os três, mas possui um potencial para se tornar mais popular por usuários e
grandes empresas. O React possui uma flexibilidade e uma grande procura por empresas,
com base nisso esse framework foi escolhido para o desenvolvimento da aplicação web do
trabalho.
Nessa aplicação foi usado diversos recursos do React, como JSX para simplificar
a sintaxe do código, Hooks para deixá-lo mais dinâmico, Routes para uma navegação
simples entre páginas, uso de componentes para organizar a aplicação.
A principal dificuldade encontrada no processo de criação do TCC foi encontrar uma
boa fonte de estudos sobre React, pois parecia que em cada site, canal, curso online tinha
um jeito diferente de ensinar, mas com ajuda do professor orientador foi possível encontrar
um canal no Youtube que explicasse de uma maneira simples e intuitiva.
REFERÊNCIAS BIBLIOGRÁFICAS
BANKS, A.; PORCELLO, E. Learning React: functional web development with React
and Redux. [S.l.]: "O’Reilly Media, Inc.", 2017.
BULMA. Bulma: the modern CSS framework that just works. 2022. (Acessado em 24
de abril de 2022). Disponível em: <https://bulma.io/>.
CROCKFORD, D. JavaScript: The Good Parts: The Good Parts. [S.l.]: "O’Reilly Media,
Inc.", 2008.
LUONG, Q. Web application development with reactjs framework; case: Web application
for an association. 2019.
NPM. JSON Server. 2022. (Acessado em 24 de abril de 2022). Disponível em: <https:
//www.npmjs.com/package/json-server>.
REACT. Uma biblioteca JavaScript para criar interfaces de usuário. 2013. (Acessado
em 04 de julho de 2022). Disponível em: <https://pt-br.reactjs.org//>.