Neste artigo, gostaríamos de apresentá-lo a um Hooks procurado em um mundo React conhecido como useEffect & useState hook que são amplamente usados em React Programming, e para você começar no caminho de adicionar tipos adicionais para seus padrões de codificação TypeScript. Então, vamos começar.
No mundo dos desenvolvedores React, as interfaces de programação de aplicativos da Web (APIs) são partes internas do código em um design de aplicativo de página única (SPA). As APIs são o estágio inicial para que os aplicativos interajam programaticamente com os servidores para fornecer aos programadores dados em tempo real e salvar as alterações de um programador. Em um React App, você pode usar APIs para carregar as preferências do programador, exibir informações do usuário buscar detalhes de configuração ou informações de segurança e salvar atualizações ou alterações de estado do aplicativo.
Então, o que exatamente vamos fazer:
Vamos usar o useEfeito e usarEstado Hook para buscar e exibir informações em nosso aplicativo da web fictício usando a API do JSON Placeholder para nosso propósito de aprendizado. Precisaremos carregar informações quando um componente for montado pela primeira vez e salvar as entradas de um cliente com uma API. Podemos garantir que após o final deste blog você poderá criar seu próprio aplicativo React para uma variedade de APIs.
Coisas para saber primeiro, antes de passarmos para a implementação prática:
O que é useEffect?
A useEfeito Hook é um gancho no React que permite que você execute efeitos colaterais em seus componentes React.
Exemplos de efeitos colaterais como:
1. Buscando dados de algum lugar.
2. Atualizando algo diretamente no DOM.
3. Definir ou remover temporizadores, como setTimeout or setInterval.
useEfeito hooks aceitam os dois argumentos. O primeiro argumento é um função que é obrigatório, e o segundo argumento é dependência, ou alguns chamam de matriz de dependência por sua estrutura this [] embora seja opcional, mas muito útil e acessível.
Se, nenhuma matriz de dependência for passada, então:
useEffect(() => {
//It will Run or Execute on every render or every time.
});
Se, Empty Array for Passado então:
useEffect(() => {
//It will Run or Execute only on the first render or for just one time.
}, []);
Exemplo:
import React, { useState, useEffect } from 'react';
export const App = () => {
const [result, setResult] = useState<number | undefined>();
useEffect(() => {
add();
});
function add() {
const a: number = 5;
const b: number = 10;
setResult(a + b);
}
return (
<div className="p-3">
<h3>Added Sum is: {result}</h3>
</div>
);
};
Link do CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-xtuqtv?file=App.tsx
Saída:
Além disso, leia: Laravel Web App em Mobile App – Principais Cenários de Transformação
O que é useState?
A usarEstado Hook in React nos permite rastrear o estado em um componente de função.
O estado basicamente se refere a dados importantes ou a uma informação específica em um aplicativo.
Exemplo: Se o interruptor de um Ventilador estiver DESLIGADO, então seu estado está em Desligado e não estará mais girando.
Da mesma forma, se você ligá-lo, seu estado anterior de DESLIGADO agora mudará para LIGADO e a ventoinha continuará girando, certo?
Mais uma vez, usarEstado Hook recebe dois argumentos:
Primeiro um Variável, onde armazenará os dados.
Segundo, A função para definir o valor dessa variável específica.
Exemplo:
import React, { useState } from 'react';
export const App = () => {
const [name, setName] = useState<string>('Akshay Bisht');
return (
<div className="p-4">
<h3>My Name is {name} 😎</h3>
</div>
);
};
Link do CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-yekrro?file=App.tsx
Saída:
O que é uma API RESTful?
API RESTful, Você certamente já ouviu esse termo muitas vezes quando conheceu alguém que tem a designação de Desenvolvedor de Backend. Você estaria se perguntando (O que é essa API? Por que devemos usá-la? Como isso me ajudará?)
Bem, vamos agora explicar para você de forma breve e tirar suas dúvidas:
A API é conhecida como Interface de Programação de Aplicativos. Hoje em dia, é uma técnica muito popular e útil para interagir com os dados de um usuário. Anteriormente, costumávamos atualizar nosso banco de dados principalmente escrevendo comandos SQL chatos, que não são fáceis de lembrar para todas as pessoas no mundo.
Assim, como alternativa, bancos de dados NoSQL como MongoDB, Cassandra, Redis, CouchDB, Riak e muitos outros foram introduzidos. Então, se haverá NoSQL, por que você precisa dele? Como você vai interagir com ele? Bem, se o banco de dados for NoSQL, definitivamente existe uma maneira alternativa de acessar esse tipo de banco de dados e dessa forma é a API RESTful.
Sim, você ouviu corretamente. É assim que o Repousante A API foi apresentada aos programadores e era uma abordagem muito mais fácil, robusta e amigável ao código.
Então, a partir de então, agora é uma tendência usar API's, a maioria das empresas hoje em dia as utilizam. E a pessoa que interage com a API é conhecida como Backend Developer.
Na API, a parte divertida é que ela oferece uma HTTP código de status do qual você pode identificar onde os dados foram buscados ou não, que tipo de erro você está recebendo.
Métodos HTTP que são usados por qualquer API:
ENTRE – É um método usado para obter dados de um banco de dados.
POST – É um método utilizado para criar ou inserir dados no Banco de Dados.
PUT – É um método no qual podemos atualizar ou corrigir um campo específico de dados e depois enviar esses dados atualizados para o Banco de Dados.
EXCLUIR – É um método no qual podemos excluir o registro ou dados de um usuário do Banco de Dados.
A seguir estão esses códigos de status HTTP:
- 200 - OK
- 201 - criado
- 302 – Encontrado
- 400 - Pedido incorreto
- 401 - não autorizado
- 403 - Proibido
- 404 não encontrado
- 500 - Erro interno do servidor
- 502 Bad Gateway
Além disso, leia: Microsserviços vs API – saiba o que é certo para o seu negócio
Procurando por serviços de desenvolvimento de aplicativos da Web
Envie-nos suas necessidades, retornaremos com uma cotação
O que é DOM?
DOM é conhecido como Document Object Model; ele é basicamente criado pelo navegador quando carregamos qualquer página da web. Ele segue a estrutura de árvore de um documento HTML, para que possa compilá-lo, e pode ser fácil para os Desenvolvedores Front-End inspecionarem e encontrarem o componente específico com muita facilidade. O React segue o DOM Virtual e é uma representação muito leve do DOM real. Então, vamos nos concentrar menos nesses tópicos.
É assim que o DOM se parece:
Então vem a parte prática:
Inicialmente, executaremos seu código primeiro. Depois disso, explicaremos cada ponto para que você possa entender claramente o que escrevemos no código.
Então, vamos pular para o código. E depois a parte da explicação.
Passos 1:
Crie um aplicativo React TypeScript em seu sistema com o seguinte comando:
npx-create-react-app – modelo de texto datilografado
Passos 2:
Vá para o seu Diretório de aplicativos React Typescript e instale um inicialização pacote seguindo o comando:
npm instalar bootstrap
Passos 3:
Em sua Aplicativo.tsx arquivo, limpe todo o código e cole o código abaixo:
import React, { useEffect, useState } from 'react';
interface user {
map(arg0: (item: any) => JSX.Element): import('react').ReactNode;
name: string;
email: string;
phone: number;
}
export const App = (): React.FC<user[]> => {
const [user, setUser] = useState<user | undefined>();
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((json) => setUser(json));
}, []);
return (
<div className="p-2">
<table className="table table-bordered">
<thead>
<tr>
<th scope="col">S.no</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
{user?.map((item) => (
<tr>
<th scope="row">{item.id}</th>
<td>{item?.name}</td>
<td>{item?.email}</td>
<td>{item?.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
Passos 4:
Agora, para começar e ver sua saída final na tela, basta digitar o seguinte comando:
início npm
Passos 5:
Agora é só esperar pela saída e depois de algum tempo, você verá uma saída assim:
Link do CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-emeoep?file=App.tsx
Explicação:
Então o que está acontecendo aqui? Acabamos de mostrar nossa tabela Bootstrap com dados fictícios de 10 usuários com um Espaço reservado JSON API do usuário.
Inicialmente, acabamos de criar uma interface para que possamos dizer ao typescript que o que obteremos são esses dados em uma resposta como um nome da string, e-mail de uma string e um número de telefone de um número.
Depois disso, declaramos uma variável e definimos a Função de um usarEstado hook para armazenar a resposta vinda da API e para usá-la posteriormente. E no usarEstado gancho, dissemos ao texto datilografado que segue nossa interface com o nome de “usuário” e mais tarde eu configurei os dados de resposta no meu setFunction para que possamos usá-lo abaixo em nossa tabela de bootstrap.
Então, na Tabela de Bootstrap abaixo, apenas fazemos um loop sobre um objeto e o acessamos com a variável que acabamos de definir acima no meu useEfeito método de gancho. E nós apenas acessamos os valores do objeto. E finalmente, quando salvamos o código, ele é renderizado.
Além disso, leia: Laravel 8 – Excel e CSV Import Export to Database tutorial
Conclusão
No final, gostaríamos de encerrar as coisas dizendo que as chamadas de API são fáceis até e a menos que você não brinque com um useEfeito e usarEstado conecte um texto datilografado e pratique-o em sua rotina diária. Ambos os ganchos são muito essenciais para as chamadas de API armazenarem ou interagirem. Esperamos que agora seus conceitos tenham se tornado muito mais claros e concisos.
Muito obrigado por ler este blog com tanta paciência 😊, Tenha um bom dia 👋.
Serviços de desenvolvimento web
Você está procurando uma empresa de desenvolvimento web confiável? Nossos desenvolvedores web altamente qualificados nos permitem entregar serviços de desenvolvimento web orientados a resultados. Entre em contato com nossa equipe para entender como podemos ajudá-lo a atingir seus objetivos de negócios.
