+

REACT E API REST

Apresentação da
turma
Quem é você e qual seu objetivo com o curso?
Apresentação do
professor
● Estuda tecnologia desde 1996.
● Ensina tecnologia desde 1999.
● Desenvolvedor desde 2006.
● Me formei em Gerenciamento de Redes de Computadores em 2013 pela IPESU, no mesmo
ano fiz MBA em análise de sistemas e telecomunicações. Em 2017 fiz uma pós-graduação de
desenvolvimento de sistemas em Java.
● Sou Desenvolvedor Full-stack atualmente.
Projeto
● Pode ser em trio ou quarteto.
● Deve ser criado utilizando o React como tecnologia principal.
● Entrega até a última aula.
Aulas / datas
● 14/11/2022.
● 21/11/2022.
● 28/11/2022.
REACT
Origem
O React surgiu em 2013 e foi criado por engenheiros de software do Facebook.
Empresas que
utilizam
Instagram, Walmart, Pinterest, etc.
Definições do React
O React é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário
em páginas web. Wikipédia.

React é uma biblioteca JavaScript para construção de interfaces de usuário.

https://pt-br.reactjs.org/docs/getting-started.html

A principal característica do React é permitir a criação de componentes que podem ser

reutilizados em diversas páginas.
Definições do React
Componentes???
Programação
Mobile
Em conjunto com o react native, podemos desenvolver aplicações mobile reutilizando componentes
criados com o react.
Documentação
https://reactjs.org/docs/getting-started.html
Sugestão para leitura
https://blog.geekhunter.com.br/react-vs-vue-vs-angular-qual-escolher/

Atividade

Descreva características de cada framework e envie para o e-mail: [email protected].

INSTALAÇÃO DE RECURSOS PARA
CRIAÇÃO DE UM PROJETO REACT
Instalação de recursos para
criação de um projeto React
Estarei utilizando ambiente linux.
>>Instalando ferramentas necessárias para uso do React

apt-get install curl

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

sudo apt-get install -y nodejs

>>Verificando a instalação

npm -v

node -v
Criação de um projeto React
>> Criação de um projeto

mkdir nomedoprojeto

cd nomedoprojeto

npx create-react-app nome-da-aplicacao

cd nome-da-aplicacao

npm start

>> Visualização do projeto no browser:

http://localhost:3000
IDE PARA DESENVOLVER
Visual Studio Code e
CodeSandBox
O CodeSandBox é uma ide online:
https://codesandbox.io/

O vscode também é uma ide online:

https://vscode.dev/

O vscode também pode ser utilizado localmente no computador, eu utilizarei sua versão desktop para
Linux.
ECMAScript
React e ECMAScript
O React utiliza-se da ECMAScript.

O ECMAScript funciona com o objetivo de trazer um maior dinamismo para todas as páginas que você
encontra na internet.

ECMAScript é uma linguagem de programação.

Atividades
Instale as extensões no vscode para programar em React:

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
COMPONENTES
Componentes
Componentes permitem você dividir a UI em partes independentes, reutilizáveis, ou seja, trata cada
parte da aplicação como um bloco isolado.

HANDS ON

>> Criação de componentes em um projeto React e sua interação.

1 - Abra o terminal.
2 - Crie uma pasta componentes e crie um projeto chamado componentes dela:

mkdir componentes
cd componentes
npx create-react-app componentes
cd componentes
npm start
Componentes
3 - Abra o projeto no vscode. Na pasta src devo criar os arquivos Headers.js, Article.js e Footer.js.

O Header.js terá o seguinte conteúdo:

//Importar o React
import React from 'react';

//Criar a classe com o nome Headers

class Headers extends React.Component{
render(){
return(
<h2>Cabeçalho</h2>
);
}
}

//Exportar o componente
export default Headers;
Componentes
4 - O Article.js terá o seguinte conteúdo:

//Importar o React
import React from 'react';

//Criar a classe com o nome Headers

class Article extends React.Component {
render() {
return (
<div>
<h3>Titulo do artigo</h3>
<p>Conteúdo do artigo</p>
</div>
);
}
}

//Exportar o componente
export default Article;
Componentes
5 - O Footer.js terá o seguinte conteúdo:

//Importar o React
import React from 'react';

//Criar a classe com o nome Headers

class Footer extends React.Component{
render(){
return(
<div>
<h4 style={{color: "green"}}>Rodapé 1</h4>
<h4 style={{color: "#0000FF"}}>Rodapé 2</h4>
</div>
);
}
}

//Exportar o componente
export default Footer;
6 - Preciso incluir os componentes na página principal Componentes
sendo o arquivo App.js:

//Incluir o React
import React from 'react';

//Incluir os arquivos que possuem os componentes

import Headers from './Headers';
import Article from './Article';
import Footer from './Footer';

//Criar a classe e incluir os componentes Headers, Article, Footer

class App extends React.Component{
render(){
return (
<div>
<Headers />
<Article />
<Footer />
</div>
);
}
}
//Exportar o componente sendo a página inicial
export default App;
Componentes
Devemos executar o projeto dentro de sua pasta no terminal: npm start

Daí entendemos o quebra-cabeça dos componentes.

JSX
JSX
O JSX é uma forma de criar elementos para serem utilizadas como templates de aplicações React. Ele
possui uma sintaxe muito semelhante ao HTML

O JSX é como um html, porém dentro do código JavaScript.

É a principal maneira de escrever HTML com React.

JSX
class Footer extends React.Component{
render(){
return(
<div>
<h4 style={{color: "green"}}>Rodapé 1</h4>
<h4 style={{color: "#0000FF"}}>Rodapé 2</h4>
</div>
);
}
}

Veja na parte destacada que temos um exemplo de JSX.

Atividades

O que é o EcmaScript?

O que é o JSX?

Envie as respostas para o e-mail: [email protected].

DOM E VIRTUAL DOM
DOM
É uma interface padronizada que permite que navegadores e scripts possam manipular o conteúdo de
uma página web sem a necessidade de realizar atualizações e upgrades.

Ele é utilizado pelo navegador para representar a sua página Web. É ele que fornece uma representação
estruturada do documento como se fosse uma espécie de árvore com galhos, definindo métodos para
que possam ser alterados: estrutura, estilo e conteúdo do documento.
DOM

Usa-se o DOM principalmente

quando se deseja atualizar um
website ou construir uma
interface de usuário avançada.
Com ele, é possível mover itens
dentro de uma página ou criar
efeitos CSS – sem nem mesmo
precisar recarregar o site.
VIRTUAL DOM
Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma
alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM.

Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por
bibliotecas como o React.
APLICANDO ESTILOS DE CSS NO REACT
Styled Components
O Styled Components é uma biblioteca (lib) que nos permite escrever códigos CSS dentro
do JavaScript. Independente do pedaço da nossa aplicação onde o componente for
utilizado, seu estilo sempre será o mesmo.

HANDS ON

>>Vamos criar uma pasta e o projeto dentro dela:

mkdir novoprojeto
cd novoprojeto
npx create-react-app estilo
cd estilo
Styled Components
>>Instalação da biblioteca

npm install styled-components --save

Abra o projeto com o vscode.

Na pasta raiz crie uma pasta chamada de componentes.

Dentro dela crie um arquivo chamado MeuBotao.js.

No início do arquivo importe a biblioteca:

import styled from "styled-components";

Styled Components
>>Conteúdo do arquivo MeuBotao.js:

import styled from "styled-components";

const MeuBotao = styled.button`

background: #0099FF;
border: 2px solid #0099FF;
border-radius: 3px;
color: #FDFDFD;
font-size: 1.2rem;
margin: 1rem;
padding: 1rem 1.5rem;
`;

export default MeuBotao;

Styled Components
>>Conteúdo do arquivo App.js:

import React, { Component } from 'react';

import MeuBotao from "./componentes/MeuBotao";

class App extends Component {

render() {
return (
<div className="App">
<MeuBotao>Meu Botão</MeuBotao>
</div>
);
}
}
export default App;
Styled Components
npm start
Rode o projeto e verifique o componente estilizado no site.
CSS inline
Para formatar um componente no modo inline no CSS você usa dentro da tag.

style={{}}

E a formatação CSS dentro das chaves. A formatação terá uma palavra chave para cada
situação. Um exemplo, cor de fundo:

backgroundColor:'#ccc'

O estilo será aplicado ao componente.

Vamos aplicar isso ao nosso exemplo no arquivo App.js:

<div style={{backgroundColor:'#ccc'}} className="App">

Rode o projeto no navegador e veja a alteração.

Atividades
Quais as diferenças entre o Styled Components e o modo inline?

Envie a resposta para: [email protected].

PROPS
O que são as props no React?
Outro conceito importante dos componentes é a forma como se comunicam. O React tem
um objeto especial, chamado de prop (que significa propriedade), que usamos para
transportar dados de um componente para o outro.

Eu poderia simplesmente dizer que prop é o valor herdado, são variáveis passadas ou
recebidas, vale lembrar, que sempre acontece pelo componente pai (de um componente
pai para o componente filho).

HANDS ON

Na pasta Componentes crie um arquivo chamado Tool.js. O conteúdo está no slide que
segue:
Props
function Tool(props) {
const name = props.name;
const tool = props.tool;
return (
<div>
<h1>My name is {name}.</h1>
<p>My favorite design tool is {tool}.</p>
</div>
);
}

export default Tool

Props
Vamos importar o componente para o arquivo App.js e inserir o código dentro da div
principal:

Nas importações:

import Tool from "./componentes/Tool"

Dentro da classe App:

<Tool name="Ihechikara" tool="Figma"/>

Neste caso os dados estão sendo passados do componente pai (App) para o filho (Tool).
Exercício com Props
Na nossa solução utilizando um novo arquivo, como exibir idade e endereço?
STATE
STATE
O state é uma propriedade do componente onde colocamos dados que, quando mudados,
devem causar uma nova renderização.
O que é ‘estado’?
Em termos simples, ‘estado’ é todo dado que varia com o tempo. Essa mudança de valor
pode, ou não, ser fruto da interação do usuário com a aplicação.
STATE
Hands on
No arquivo App.js crie o construtor na classe:
class App extends Component {
constructor(props) {
super(props);
this.state = {
topping: "Pepperoni",
slices: 8
}
}
STATE
Hands on
Após a tag Tool vou utilizar dois parágrafos:
<Tool name="Ihechikara" tool="Figma"/>
<p>{this.state.topping}</p>
<p>{this.state.slices}</p>
COMPONENTES DE CLASSE E
COMPONENTES FUNCIONAIS
Componentes de classe
Os componentes de classe são classes do ES6 que retornam JSX. Abaixo, vemos a
mesma função Welcome, dessa vez retornada como um componente de classe:
Ex:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Componente funcional
Um componente funcional, basicamente, é uma função em JavaScript/ES6 que retorna um
elemento do React (JSX). A função abaixo é um componente funcional válido:
Ex:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
CICLO DE VIDA DO COMPONENTE
CICLO DE VIDA DO COMPONENTE REACT
O desenvolvimento de cada componente envolve o uso de diferentes métodos de ciclo de
vida. Eles são definidos como uma série de funções chamadas em vários estágios de um
componente. As quatro fases de vida são:
1. Inicializando
2. Montagem
3. Atualizando
4. Desmontando
CICLO DE VIDA DO COMPONENTE REACT
1 - Inicializando
Esta é a fase inicial do ciclo de vida do componente React. Como o nome sugere, esta
fase envolve todas as declarações, definições e inicialização de propriedades, etc.
Os métodos incluídos nesta fase são:
● getDefaultProps()
● getInitialState()
CICLO DE VIDA DO COMPONENTE REACT
2 - Montagem
A segunda fase do ciclo de vida do componente React, seguida pela fase de inicialização,
é a fase de montagem. Ele começa quando o componente é posicionado sobre o
contêiner DOM (ou seja, uma instância do componente é criada e inserida no DOM) e
renderizada em uma página da web.
Consiste em 2 métodos, a saber:
● componentWillMount()
● componentDidMount()
CICLO DE VIDA DO COMPONENTE REACT
3 -Atualização
A terceira fase do ciclo de vida do componente ReactJS é a fase de atualização. Seguido
pela fase de montagem, ele atualiza os estados e propriedades que foram declarados e
inicializados durante a fase de inicialização (se houver alguma alteração necessária). Ele
também é responsável por lidar com a interação do usuário e passar dados dentro da
hierarquia do componente. Ao contrário da fase de inicialização, esta fase pode ser
repetida várias vezes. Alguns dos métodos de ciclo de vida que se enquadram nesta
categoria são os seguintes:
● componentWillReceiveProps()
● shouldComponentUpdate()
● componentWillUpdate()
● componentDidUpdate()
CICLO DE VIDA DO COMPONENTE REACT
4 -Desmontagem
Desmontagem é a última fase do ciclo de vida do componente ReactJS. Esta fase inclui
aqueles métodos de ciclo de vida que são usados quando um componente está sendo
desanexado do contêiner DOM (ou seja, a instância do componente sendo destruída e
desmontada do DOM). Ele também é responsável por executar as tarefas de limpeza
necessárias.
● componentWillUnmount()
EVENTOS
ATRIBUINDO AÇÃO A UM BOTÃO
Vamos criar um arquivo chamado BotaoAcao.js na pasta componentes:
O conteúdo do arquivo será:
import React from "react";

const ShowAlertComponent = () => {

const showAlert = () => {

alert("I'm an alert");

return <button onClick={showAlert}>Show alert</button>;

export default ShowAlertComponent;

ATRIBUINDO AÇÃO A UM BOTÃO
No arquivo App.js vamos importar o botão e depois chamar o componente na classe App:
import BotaoAcao from "./componentes/BotaoAcao";
e depois:
<p>{this.state.slices}</p>
<BotaoAcao />
ESTADO DE UM COMPONENTE
O estado (state) de um componente React tem uma função muito simples e específica. Ele
é uma propriedade do componente onde colocamos dados que, quando mudados, devem
causar uma nova renderização.
O que é ‘estado’
● Em termos simples, ‘estado’ é todo dado que varia com o tempo. Essa mudança de
valor pode, ou não, ser fruto da interação do usuário com a aplicação. Esse dado
pode ir do óbvio, como o endereço de email que o usuário digita em um formulário,
até o resultado de uma requisição `http` que tem que ser mostrada na tela.
State vs Props
● É importante ter um bom entendimento sobre a diferença entre esses dois conceitos:
o ‘state’ é utilizado para valores dinâmicos e props são utilizadas para passar
valores entre componentes.
EVENTOS
EVENTOS
Um evento é a indicação de que algo aconteceu, é o resultado de uma ação.
Exemplos:
● Clicar;
● Pressionar uma tecla;
● Arrastar.
Observações:
● Os eventos do React são os mesmos eventos que os do DOM. Temos eventos para
responder a um clique, por exemplo.
● O evento é atrelado a uma tag que irá executá-lo.
● Geralmente um método é atribuído a um evento.
● Este método deve ser criado no componente.
HANDS-ON DE EVENTOS
1 - Crie um projeto chamado meuevento no terminal.
2 - Entre na pasta dele.
3 - Abra a pasta do projeto no vscode.
4 - Crie uma pasta chamada componentes na pasta src.
5 - Dentro dela crie um arquivo chamado Evento.js.
6 - Digite o seguinte conteúdo nele:
HANDS-ON DE EVENTOS
function Evento(){
function meuEvento(){
console.log("Opa, fui ativado!")
}
return(
<div>
<p>Clique para disparar um evento</p>
<button onClick={meuEvento}>Ativar!</button>
</div>
)
}
export default Evento
HANDS-ON DE EVENTOS
7 - Vamos importar ele no arquivo App.js.
No início importamos o componente:
import Evento from './componentes/Evento';
8 - Apagamos o conteúdo do meio do script e utilizamos nosso componente.
function App() {
return (
<div className="App">
<div><Evento/></div>
</div>
);
}
9 - Vamos executar o projeto no terminal e testar o botão.
HANDS-ON DE EVENTOS
10 - Na pasta de componentes vamos criar um arquivo chamado Form.js. Seu conteúdo será:
HANDS-ON DE EVENTOS
function Form(){
function cadastrarUsuario(e){
e.preventDefault()
console.log("Cadastrou o usuário")
}
return (<div><h1>Meu cadastro</h1>
<form onSubmit={cadastrarUsuario}>
<div> <input type="text" placeholder="Digite seu nome" /></div>
<div> <input type="submit" value="Cadastrar" /></div></form>
</div>)
}
export default Form
HANDS-ON DE EVENTOS
11 - Vamos inserir o componente no arquivo App.js:
<div><Evento/></div>
<div><Form/></div>

12- Vamos rodar e testar o botão do formulário.

RENDERIZAÇÃO CONDICIONAL
Renderização condicional
Podemos atrelar a exibição dos componentes a condições. Chamamos isso de
renderização condicional. É possível utilizar o state para criar condições.
HANDS-ON
1 - Na pasta de componentes crie o arquivo Condicional.js com o seguinte conteúdo:
import { useState } from "react";
function Condicional(){
const[email, setEmail] = useState()
const [userEmail, setUserEmail] = useState()
function enviarEmail(e){
e.preventDefault()
setUserEmail(email)
}
return(
<div><h2>Cadastre seu e-mail:</h2><form>
<input type="email" placeholder="Digite o seu e-mail aqui" onChange={(e) =>
setEmail(e.target.value)} />
<button type="submit" onClick={enviarEmail}>Enviar e-mail</button>
{/* a div abaixo é exibida se userEmail possuir valor*/}
{ userEmail && (<div><p>O e-mail do usuário é: {userEmail}</p></div>) }
</form></div>
)
}

export default Condicional

2 - Vamos inserir nosso componente no App.js
<div><Form/></div>
<div><Condicional/></div>
Vamos testar nosso código preenchendo o e-mail e clicando no botão.
BUSCANDO DADOS DE UMA API
<< API FETCH >>
API
API é um termo para designar uma interface de comunicação que um
sistema oferece para que outros acessem suas funções, dados e recursos
sem que o software ou plataforma externa precise saber como eles foram
implementados.
ENDPOINT
Um endereço utilizado para comunicação entre uma API e um sistema
externo.
Exemplo: https://jsonplaceholder.typicode.com/users

Observação: uma API em PHP pode consumir uma API em Java.

FETCH
O método mais comum para consumir dados de alguma aplicação
web ou REST APIs é através da API Fetch , onde passamos o
caminho (URL) do serviço a ser consumido e depois tratando sua
resposta e recebendo os dados.

componentDidMount()
Este método é chamado logo após o componente ser montado na
árvore de elementos da tela.
CONCEITOS IMPORTANTES
res.json() - Envia uma resposta de requisição em formato de json.
setState() - Utilizado para alterar o estado do componente.
this.state - Aqui guardamos os dados do componente.
then() - O método then() é usado para lidar com tarefas
assíncronas, como uma chamada de API.
map() - nos permite percorrer um vetor e obter um novo array.
HANDS-ON API FETCH

1 - Entre no terminal e crie um projeto chamado projetoapi.

2 - Abra o projeto no vscode. Altere o arquivo App.js para o
conteúdo que segue:
import React from "react";
import './App.css';
class App extends React.Component {
//Construtor
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false
};
}
 componentDidMount() {
fetch(
"https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return <div>
<h1> Please wait some time.... </h1></div>;
return (
<div className = "App">
<h1> Fetch data from an api in react </h1>{
items.map((item) => (
<ol key = { item.id } >
User_Name: { item.username },
Full_Name: { item.name },
 User_Email: { item.email }
</ol>
))
}
</div>
);
}
}
export default App;
HANDS-ON API FETCH

3 - Veja o projeto no navegador e dê refresh na página, veja se

acontece algo diferente.
INTRODUÇÃO A PÁGINAS COM
FORMULÁRIOS EM REACT
HANDS-ON FORMULÁRIO

1 - Crie um projeto com o nome reactformulario.

2 - Abra o projeto no vscode.
3 - Crie uma pasta chamada componentes em src e dentro dela crie
o arquivo Formulario.js. Segue o conteúdo dele:
function Formulario() {
return (
<div>
<h1>Cadastro</h1>
<div>Nome: <input type="text" /></div>
<div><input type="submit" value="enviar"/></div>
</div>
);
}
export default Formulario
No arquivo App.js importe o componente e insira como conteúdo
da página:
import './App.css';
import Formulario from './componentes/Formulario';
function App() {
return (
<div className="App"><Formulario/></div>
);
}
export default App;
Vamos rodar o projeto para visualizar no navegador.

Atividade
Crie um formulário similar ao
do lado usando nosso arquivo
como base.
CAMPO CONTROLADO E NÃO
CONTROLADO
Campo não controlado
Com valores de entrada não controlados, não há atualização ou
alteração de nenhum estado. Ele mantém seu próprio estado
interno, o que basicamente significa que ele se lembra do que você
digitou no campo.
Campo controlado
Em um campo controlado, os dados de formulário são manipulados
por um componente React.
Com um componente controlado, o valor da entrada é sempre
direcionado pelo estado do React.
Na maioria dos casos, recomendamos o uso de componentes
controlados para implementar formulários.
Campo controlado
import { useState } from 'react';

function MyControlledInput({ }) {
//Defina o estado que vai manter o valor de entrada:
const [value, setValue] = useState('');
//Crie o manipulador de eventos que atualiza o estado quando o valor de entrada
muda
const onChange = (event) => {
setValue(event.target.value);
};
Campo controlado
return (
<>
{/* Atribua o campo de entrada com o valor do estado e anexe o manipulador de
eventos */}
<div>Input value: {value}</div>
<input value={value} onChange={onChange} />
</>
);
}
Campo não controlado
function App() {
function onSubmit() {
console.log("Name value: " + window.name.value);
console.log("Email value: " + window.email.value);
}
return (
<form onSubmit={onSubmit}>
<input type="text" name="name" id="name" required />
<input type="email" name="email" id="email" required />
<input type="submit" value="Submit" />
</form>
);}
ARQUITETURA DE UM PROJETO REACT
ARQUITETURA
Existem várias boas práticas para estruturação de um projeto React. Veremos uma
arquitetura de projeto bem concisa e estruturada.
ARQUITETURA
1. Adaptadores
Adapters são os conectores de sua aplicação com o mundo exterior. Qualquer forma de
chamada de API ou interação com websocket que precise acontecer, para compartilhar
dados com um serviço ou cliente externo, deve acontecer dentro do próprio adaptador.
ARQUITETURA
2. Componentes
Eles terão a UI da sua aplicação.
ARQUITETURA
3. Contextos

Contém apenas o state que precisa ser compartilhado entre esses componentes.
ARQUITETURA
4. Páginas

Uma página pode importar um componente para exibi-lo.

ARQUITETURA
5. Estilos

As estilizações globais de css ficam presentes nestes arquivos.

CONTEXTO
CONTEXTO
Contexto (context) é indicado para compartilhar dados que podem ser considerados
“globais” para a árvore de componentes do React.

Na estrutura de componentes do React possuiremos

componentes filho e pai.
CONTEXTO
Porque o Contexto é útil?

O conceito de estado ficou complexo à medida que foi necessário compartilhar o estado
dentro da aplicação de uma forma global entre os componentes.
EXEMPLO
EXEMPLO
EXEMPLO
EXEMPLO
EXEMPLO
EXEMPLO
EXEMPLO
HOOKS
HOOKS
São recursos que permitem que você gerencie o estado, ciclos de vida do componente e
outros recursos do React sem precisar escrever componentes em forma de classes.

useState

Usado para adicionarmos estado (state) para nossos componentes funcionais, para
usá-lo temos a seguinte sintaxe:

const [ NOME_DO_ESTADO, FUNCAO_PARA_ATUALIZAR ] = useState(VALOR_INICIAL)

Usamos a sintaxe [ NOME_DO_ESTADO, FUNCAO_PARA_ATUALIZAR ]

HOOKS
useEffect

O useEffect te permite executar uma função em alguns momentos durante o life cycle de
um componente.

userRef

O useRef te permite:

● Acessar um elemento do DOM.

● Armazenar um valor imutável durante o ciclo de vida do componente.
TRABALHANDO COM ROTAS
Em um site acessamos várias páginas, como por exemplo, página
inicial, contatos, sobre e perfil. Para navegar entre as páginas de
uma aplicação React.JS precisaremos criar rotas, onde cada rota
vai representar uma tela.

Para trabalhar com rotas no React vamos utilizar um pacote

chamado React Router Dom que precisa ser instalado no nosso
projeto. É ele que nos auxiliará na criação da navegação.
HANDS-ON

1 - Crie uma pasta chamada rotas.

2 - Entre na pasta criada.

3 - Digite o seguinte comando:

npx create-react-app react-rotas

4 - Acesse a pasta react-rotas e digite o comando (para instalar o

pacote react-router-dom):

npm install react-router-dom

HANDS-ON

5 - Abra o projeto no vscode. Abra o arquivo index.js e realize a

importação:

import {BrowserRouter as Router} from "react-router-dom";

Dentro de <React.StrictMode> o conteúdo será:

<Router>

<App />

</Router>
HANDS-ON

6 - O arquivo App.js deve ficar no seguinte formato para aplicação

das rotas:
HANDS-ON

import './App.css';

import React from "react";

import {Route, Routes} from "react-router-dom";

import Home from "./components/Home";

import Sobre from "./components/Sobre";

import Usuario from "./components/Usuario";

HANDS-ON

function App() {

return (

<div className="App">

<Routes>

<Route path="/" element={<Home/>} />

<Route path="Sobre" element={<Sobre/>} />

<Route path="Usuario" element={<Usuario/>} />

HANDS-ON

</Routes>

</div>

);

export default App;

HANDS-ON

7 - Crie a pasta components na pasta src. Na pasta components

precisamos criar 3 componentes:

● Home
● Sobre
● Usuario
Home.js

import React from 'react';

import { Link } from 'react-router-dom';

const Home = () =>{

return (

<div>

<h1>Página Inicial</h1>
Home.js

<nav>

<ul>

<li>

<Link to="/sobre">Sobre</Link>

</li>

<li>

<Link to="/usuario">Usuario</Link>
Home.js

</li>

</ul>

</nav>

</div>

);

export default Home;

Sobre.js

import React from 'react';

import { Link } from 'react-router-dom';

const Sobre = () => {

return (

<div>

<h1>Sobre</h1>
Sobre.js

<Link to="/">retornar a página inicial</Link>

</div>

);

export default Sobre;

Usuario.js

import React from 'react';

import { Link } from "react-router-dom";

const Usuario = () => {

return (

<div>

<h1>Usuário</h1>
Usuario.js

<Link to="/">retornar a página inicial</Link>

</div>

);

export default Usuario;

HANDS-ON

8 - Vamos testar e rodar o projeto.

INTRODUÇÃO A TESTES EM
APLICAÇÕES REACT
O que é teste de software?

O teste de software é uma maneira de avaliar a qualidade da aplicação e reduzir o risco de falha
em operação.

Testar não consiste apenas em executar testes (executar o software e verificar os resultados).
Executar testes é apenas uma das atividades.

Planejamento, análise, modelagem e implementação dos testes, relatórios de progresso,

resultado e avaliação da qualidade, também são partes de um processo de testes.

Testar software não é somente verificar se os requisitos foram atendidos ou se as estórias de

usuário (User Stories), bem como demais especificações, foram contempladas. Atribui-se ao
teste de software também a validação, ou seja, verificar se o sistema atenderá às necessidades
do usuário e de outras partes interessadas em seu(s) ambiente(s) operacional(is).
O que é o Jest?

Jest é um poderoso framework de testes em JavaScript com foco na simplicidade.

HANDS-ON

1 - Crie uma pasta chamada testes usando o terminal.

2 - Entre na pasta testes usando o terminal.

3 - Crie um projeto usando o comando:

npx create-react-app testereact

4 - Entre na pasta do projeto pelo terminal.

5 - Abra o projeto no vscode.

6 - Instale o jest pelo terminal:

npm install --save-dev jest

7 - Apague no vscode a pasta App.test.js.

HANDS-ON

8 - No arquivo package.json, na parte de scripts faça a seguinte alteração:

"test": "jest",
9 - Crie o arquivo sum.js na pasta src e insira o seguinte conteúdo:

function sum(a, b) {
return a + b;
}
module.exports = sum;
HANDS-ON

10 - Crie o arquivo sum.test.js na pasta src e insira o seguinte conteúdo:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {

expect(sum(1, 2)).toBe(3);
});

11 - No terminal, dentro da pasta do projeto, rode o comando:

npm test
HANDS-ON

12 - Verifique se o teste passou.

13 - Altere o arquivo sum.test.js para 2,2 em expect(sum(1, 2))

14 - Rode o teste novamente.

PROTOCOLO, HTTP E VERBOS HTTP
Protocolos de rede são um conjunto de normas que permitem que
qualquer máquina conectada à internet possa se comunicar com
outra também já conectada na rede.
HTTP é sigla de HyperText Transfer Protocol que em português
significa "Protocolo de Transferência de Hipertexto". É um
protocolo de comunicação entre sistemas de informação que
permite a transferência de dados entre redes de computadores,
principalmente na World Wide Web (Internet).
O HTTP é o protocolo utilizado para transferência de páginas HTML
do computador para a Internet.
O HTTP fornece os chamados métodos de requisição, também
conhecidos como verbos HTTP, para indicar o que será feito com
determinado recurso.
Recurso pode ser um documento, uma foto ou qualquer outra coisa
sobre a qual quero executar uma ação.
Vamos estudar 4 verbos do HTTP:
● GET
O método GET é utilizado quando existe a necessidade de se
obter um recurso, então quando você quer “pegar” dados você
utiliza o GET. Ele é considerado idempotente, ou seja,
independente da quantidade de vezes que é executado sob um
recurso, o resultado sempre será o mesmo, ou seja, o GET não
deve modificar dados, somente trazer os dados.
● POST
Utilizado para a criação de um recurso a partir do uso de uma
representação. Então veja POST na área de programação é
sempre gravar ou criar alguma coisa.

● PUT
O método PUT é utilizado como forma de atualizar um
determinado recurso.

● DELETE
O delete tem como finalidade a remoção de um determinado
recurso.
REST E SOAP
Através destas metodologias posso definir como uma API será
criada.
SOAP
● É um protocolo para troca de informações estruturadas que se
baseia na Linguagem de Marcação Extensível (XML) para seu
formato de mensagem.
REST
● É um modelo de arquitetura e não uma linguagem ou tecnologia
de programação, que fornece diretrizes para que os sistemas e
comuniquem diretamente usando os princípios e protocolos
existentes da Web.
Um cliente REST é um sistema ou programa que se utiliza da api
REST para execução dos verbos HTTP.
INSTALAÇÃO / USO DO POSTMAN
Instalação do Postman no Linux:
https://www.youtube.com/watch?v=9ZZdl4CQbCg

Instalação do Postman no Windows:

https://www.youtube.com/watch?v=ousvnWve0Cw
Para utilizar:
Clicar em workspaces > my workspace.

Vamos consumir a api do VIACEP: https://viacep.com.br/

e https://api-ninjas.com

Vou utilizar o verbo GET com o endpoint:

viacep.com.br/ws/01001000/json/

Depois executamos o verbo.

Posso trocar esta numeração 01001000 pelo meu CEP.
Podemos consumir uma API para exibir a imagem de cães.
Usando o verbo GET use a url:
https://api-ninjas.com/images/dogs/doberman_pinscher.jpg
e depois execute o verbo HTTP.

Será renderizada uma imagem.

PROJETO