Consumindo dados de uma API REST com React Native – Irias Lab
O primeiro passo será instalar o pacote axios, este pacote é um cliente HTTP que pode ser utilizado no Node.Js. Um HTTP client é utilitário que pode realizar requisições em endereços utilizando o protocolo HTTP. Para a instalação do axios, utilize o comando abaixo no terminal na raiz do projeto.
Agora abra seu editor de códigos e no abra o arquivo: components/PromotionsList/index.js.
O primeiro passo é importar o axios em nossa aplicação.
Depois vamos modificar nosso componente PromotionsList para realizar a requisição. Na classe do componente vamos utilizar o método: componentDidMount.
O componentDidMount faz parte dos métodos do ciclo de vida de um componente React. Não vou aprofundar aqui sobre o ciclo de vida de um componente React, para maiores detalhes veja na documentação oficial. Em resumo o método componentDidMount, é executado depois que a saída do componente React, foi renderizada para o DOM.
Vamos no nosso objeto state, definir a chave data como um array vazio. Nesta chave será onde ficará nossa lista de produtos.
Após isto vamos no método componentDidMount, utilizar o client HTTP axios para realizar a requisição em nossa API REST com o método GET, para recuperar a listagem de produtos que será exibida.
Para este nosso projeto, criei uma API HTTP REST simples utilizando o PHP. Em breve vou criar uma série de artigos apresentando o passo a passo para criar esta API. A URL da API é a seguinte: https://irias.com.br/tutorials/react-native/api.php.
Depois de recuperar a lista de produtos da API, vamos utilizar a função setState para adicionar a lista a nossa chave data do objeto state.
axios.get('https://irias.com.br/tutorials/react-native/api.php').then(response => {
console.log('Error retrieving data')
Com isso terminamos a listagem, não será necessário modificar mais nada em nosso componente. Por fim nosso componente PromotionsList ficará do seguinte modo:
import PromotionCard from './../PromotionCard'
class PromotionsList extends Component {
style={ Styles.promotionsList }
renderItem={ ({ item }) => (
<PromotionCard data={ item } />
export default PromotionsList
Antes de finalizar o artigo, vamos realizar uma pequena alteração na estilização do nosso componente Header. Vamos adicionar uma borda e um efeito de elevação em nosso Header, assim irá parecer que a lista de produtos passa por debaixo do cabeçalho. Nosso arquivo components/Header/styles.js ficará do seguinte modo:
Assim concluímos mais uma etapa do nosso projeto que já está quase chegando ao fim.
Autor Anderson IriasPublicado em 7 de novembro de 2020 7 de novembro de 2020 Categorias Desenvolvimento, React Native, React Native TutorialTags Desenvolvimento, HTTP, Node.js, React Native