Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: utilizando o Context API nas suas aplicações

React Native: utilizando o Context API nas suas aplicações

Definição do Context API - Apresentação

Olá! Sou André Cunha, instrutor aqui da Alura. Sejam muito bem-vindos e bem-vindas a mais um curso da formação inicial de React Native. Nesse curso aprenderemos o que é o Context API, além do porquê e quando devemos utilizá-lo.

Em alguns cursos dessa formação, trabalhamos com a navegação entre as telas. Para acessarmos a informação de uma tela em outra, normalmente passávamos essa navegação via props. Entretanto, isso vai se tornando impraticável quando o aplicativo vai crescendo e possuindo várias telas.

O Context veio para resolver exatamente esse problema, já que ele deixa essa informação visível e acessável de forma global na aplicação. Ele pode ser utilizado em qualquer tela ou componente, sem ter que passar a navegação via props.

O Context API não se resume só a isso, podendo ser utilizado em várias situações. Neste curso usaremos em três situações diferentes. Venham conferir comigo no projeto.

Esse é um projeto de e-commerce. Logo na primeira tela temos o uso do Context API: usaremos na parte de autenticação. Se não sabem o que é autenticação, não se preocupe, teremos um vídeo explicando sobre isso.

Em resumo, autenticação é onde fazemos o login da aplicação, digitando e-mail e senha. Assim recuperamos os dados do usuário que está logando no sistema. Preenchendo os campos e apertando o botão "Entrar", vamos para tela de produtos.

Tela de autenticação do aplicativo. O fundo é azul marinho e a palavra "Login" está escrita em letras brancas no centro da tela. Abaixo de Login tem dois campos que vão de uma borda a outra da tela: o primeiro é para o e-mail e o segundo é para a senha. Abaixo dos campos, há o botão "Entrar" em verde claro e centralizado.

Na tela de produtos, temos os produtos do nosso e-commerce. Eles estão em cards retangulares brancos que ocupam de uma borda a outra da tela. No lado esquerdo do card tem o ícone do produto, já ao lado direito do ícone, tem o nome do produto e, abaixo, o preço. Na extrema direita do card, temos um botão quadrado e verde com um "+" branco dentro.

Graças ao Context API, conseguiremos salvar esses produtos na lista de carrinhos. Se clicarmos no botão "+", estamos adicionando os produtos na nossa lista de carrinhos. Esses produtos também ficam acima dos demais, em uma faixa com um tom de azul mais claro que o fundo. Nessa faixa está escrito "Últimos vistos", seguido de versões menores de cards desses produtos adicionados.

Tela de produtos. No canto superior esquerdo está escrito "Olá, André". No canto superior direito temos um ícone branco engrenagem. Ao lado esquerdo da engrenagem, há um ícone branco de carrinho de compras. Abaixo desses ícones, está escrito "Últimos vistos", em letras brancas. O card que aparece tem um ícone que é um círculo laranja com um tênis branco dentro. O produto é o "Tênis bacana" e custa "R$ 100". Abaixo dos "Últimos Produtos", temos "Produtos" escrito em letras branca, seguido dos cards dos produtos cadastrados. Em todos os cards o nome do produto é em preto e o preço em uma fonte menor e verde claro.

Cliquei no "+" dos primeiros três produtos e percebemos que, no canto inferior direito do carrinho, tem um círculo vermelho com o número 3 dentro, indicando que há três produtos no carrinho. Se clicarmos no ícone do carrinho, vamos para tela "Resumo", mostrando os produtos adicionados ao carrinho.

Tela com o fundo azul marinho. No canto superior esquerdo está escrito "André" em letras brancas e no canto superior direito está o ícone do carrinho de compras com a indicação da quantidade de produtos. Abaixo, há a lista com os cards dos produtos adicionados, ocupando novamente de uma borda a outra da tela. Na parte inferior da tela há um botão verde claro escrito "Finalizar", que ocupa de uma borda a outra da tela.

Isso tudo foi feito sem ter que passar via props na navegação, já que está visível globalmente em toda a aplicação. Também temos a tela "Finalizar", para onde somos direcionados ao clicarmos no botão "Finalizar" na parte inferior da tela "Resumo".

A tela "Finalizar" exibe as informações do usuário que entrou no sistema, que vieram da autenticação. Isso também foi passado via Context API. Na parte superior da tela "Resumo" há as informações de entrega, que são o nome, endereço, e-mail e telefone do usuário. Em seguida há a quantidade de produtos e o preço total.

Na parte inferior da tela, aparece novamente o botão "Finalizar". Ao clicarmos nele, voltamos para tela principal, finalizando a compra, como mostra um aviso no centro da tela.

Utilizamos o Context em outra situação muito comum, tanto em sites, quanto aplicativos, que é a alteração do tema. Se clicarmos no ícone de engrenagem, no canto superior direito, iremos para tela de configurações. Na tela "Configurações", conseguimos alterar o tema de toda aplicação de escuro para claro, apertando na chave.

Tela de configurações. A tela tem o fundo azul marinho e a palavra "Configuração" no centro. Abaixo, em uma fonte bem menor, está escrito "Tema: escuro", indicando o tema da aplicação. Abaixo tem uma chave onde, se clicar, o tema é alterado.

Ao apertarmos a chave, as cores do aplicativo foram alteradas do tema escuro para o tema claro, inclusive a tela de Login, como vemos se voltamos para ela. Percebemos que toda aplicação foi alterada de forma global, graças ao Context API.

Ficaram curiosos ou curiosas para saber como isso foi implementado? Vem comigo nessa jornada!

Definição do Context API - O projeto

O objetivo deste curso é aplicar os conceitos de Context API no React Native. Então é importante que saibam que não iremos construir uma aplicação do zero aqui.

Vamos usar um projeto base e, a partir dele, aplicaremos os conceitos do curso. Esse projeto estará disponível por meio de uma atividade, onde vocês poderão entrar no GitHub, baixá-lo e o executar no computador de vocês. Vejamos o que tem dentro desse projeto.

Depois de baixar e executar a aplicação no computador de vocês, perceberão que esse projeto foi feito com o Expo. Isso porque, com o React Native CLI, seria da mesma forma que usar Context API. Por isso preferimos usar o Expo, para facilitar ainda mais esse curso.

Depois de executar a aplicação, notarão que ele entrou na tela de Login. Essa é uma aplicação de e-commerce, então terá uma lista de produtos que, futuramente, poderemos colocar em uma lista no carrinho. A partir disso, aplicaremos os conceitos de Context API aqui. Vamos descobrir o que tem em cada tela.

Na coluna da esquerda, onde fica o Explorador, vamos clicar no arquivo "App.js" para abri-lo. Veremos que ele está importando as Rotas, que estão no arquivo "rotas" dentro da pasta "src". Então, na coluna da esquerda, acessaremos "src > rotas".

Dentro desse arquivo, estão sendo importadas as três telas: a principal, a de login e a tela de configuração. Estamos utilizando o React Navigation aqui para navegar entre essas três telas. Vamos descobrir o que tem em casa uma delas.

Na coluna da esquerda, vamos navegar para "src > telas > Login". Vemos que nessa pasta temos os estilos, em "estilos.js", e o arquivo principal, o "index.js". Esse arquivo principal não é muito diferente do que vimos em outros cursos.

Nele temos a View, englobando a tela inteira, temos dois TextInput, um para e-mail e outro para senha, temos o texto escrito "Login" e temos o botão. Esse botão, ao clicar, usará o navigation para ir para tela principal.

Então, no emulador, temos a nossa aplicação aberta na tela de Login, onde clicaremos no botão "Entrar". Com isso, somos direcionados para tela principal, onde alguns produtos estão listados.

Na coluna da esquerda, podemos acessar "src > telas > Principal". Notamos que, nesta pasta, existem os arquivos "estilos.js" e "index.js", que é o arquivo principal. No "index.js" temos o Text, informando o nome, o ícone de carrinho, o ícone de engrenagem e uma FlatList.

A FlatList está carregando alguns produtos. Se olharmos no começo desse código, vemos que esses produtos estão sendo importados de um arquivo chamado "produtos", que também está na pasta "Principal".

Ao abrirmos o arquivo "produtos.js", reparamos que ele é um vetor de objetos que contém alguns produtos. Cada produto tem imagem, que está sendo importada de uma pasta chamada "imagens".

A pasta "imagem" pode ser acessada na coluna da esquerda, e vocês podem olhar as imagens com mais calma, se quiserem. Ainda em "produtos.js", cada produto também tem a informação de texto, com o nome do produto, e preco, com o preço.

Além disso, na FlatList da tela principal, temos o ListHeaderComponent que contém outra FlatList. Por enquanto, ela não está sendo utilizada, mas os "Últimos vistos" aparecerão futuramente na parte superior da tela, antes dos produtos. Se repararmos, atualmente o ultimosVistos é um vetor vazio, por isso não tem nada sendo exibido.

Na nossa aplicação, se clicarmos no ícone do carrinho, no canto superior direito, nada acontece por enquanto. Contudo, se clicarmos na engrenagem, ao lado dele, somos redirecionados para tela de configuração.

Na coluna da esquerda do editor de códigos, temos a pasta "Configuracao", que contém os arquivos "estilos.js" e "index.js". Nesse arquivo principal também tem uma View e um Text, mas há um componente novo, que é o Switch.

O Switch também está sendo importado do React Native e ele é como um botão, mas alterna o estado quando clica nele. No nosso aplicativo, se clicarmos nesse botão, ele irá mexer como se fosse uma chave.

No nosso código vemos que essa ação altera uma variável chamada estado. Sendo assim, ao clicarmos no Switch, ele altera o estado de true para false. Utilizaremos esse switch para alterar o tema da nossa aplicação, de escuro para claro. Além disso, utilizaremos o Context para aplicar isso globalmente na aplicação.

Uma coisa diferente que não costumamos fazer nos outros cursos e projetos, é o arquivo chamado "estilosGlobais.js". Acessamos ele pelo caminho "src > telas > estilosGlobais.js". Esse arquivo é um objeto, chamado tema, que contém alguns estilos.

No tema temos o fundo, que recebe um hexadecimal. Isso também se aplica ao titulo, texto e outras propriedades desse objeto. Cada uma delas recebe um hexadecimal.

Se repararmos, esse tema está sendo importado para todos os arquivos de estilo. Assim podemos usá-lo, por exemplo, no background.

Então temos o código backgroundColor: tema.fundo, no qual usamos o valor hexadecimal da propriedade fundo que está dentro do tema. Isso será muito importante para alterarmos o tema da nossa aplicação, como veremos durante a aplicação do Context API.

Neste vídeo vemos o que tem no nosso projeto base. No próximo vídeo entenderemos, de fato, o que é o Context API.

Definição do Context API - O que é Context API

Acabamos de ver o projeto base que será usado neste curso. Vamos agora entender o que é Context API.

Imaginando uma situação comum, e usando como base o projeto deste curso, descreverei como acontece uma troca de telas. Começamos na tela de Login. Ao clicarmos no botão "Entrar", passamos para tela seguinte, que é a tela de produtos, onde todos os produtos do nosso e-commerce estão listados.

Ao clicarmos no ícone de carrinho, na parte superior, passamos para tela de Resumo, onde estão listados os produtos que estavam na lista do carrinho. Ao clicarmos no botão de finalizar, na parte inferior da tela, passamos para última tela, que é a "Finalizar".

Na tela de Finalizar há as informações de nome, endereço, e-mail e telefone do usuário que logou. Além disso, há o preço total dos produtos que ele irá adquirir ao finalizar a compra. Contudo as informações do usuário que estão nesta última tela vieram da primeira tela, que é a de Login. Em uma situação comum, passaríamos essas informações via props entre as telas.

Props: (usuário)
{
  nome,
  endereco,
  email,
  telefone
}

Então, ao fazer o Login, teríamos acesso ao nome, endereço, e-mail e telefone, passando essas informações, via props, para tela seguinte, que é a de produtos. Depois passaríamos esses dados via props para tela seguinte, que é a de Resumo.

Ao clicarmos em "Finalizar", também passaríamos as informações via props para tela Finalizar. Percebam que precisamos passar esses dados entre duas telas que estavam no caminho entre a tela de Login e a tela de Finalizar sem que elas sequer exibissem essas informações.

Em uma situação com poucas telas, até podemos aplicar isso, mas imaginem uma aplicação que começa a crescer e passa a ter muitas telas. Acaba ficando complexo ter que passar muitas informações via props entre as telas.

Para entendermos o motivo da passagem de parâmetros funciona desse jeito, precisamos entender como funciona a hierarquia de componentes no React Native. A estrutura do React Native é muito parecida com uma árvore.

Temos o topo, que podemos imaginar que é o arquivo "App.js", ou seja, o arquivo principal. No exemplo eu chamei esse arquivo de "Nó".

Esse Nó será responsável por ter as rotas, que são as telas da nossa aplicação. Eu chamei de "Pai 1" e "Pai 2", mas imaginem que é a "Tela 1" e a "Tela 2" da nossa aplicação. A Tela 1 terá alguns componentes, que eu chamei de "Filho 1" e "Filho 2".

Supondo que o Filho 1 é um componente de cabeçalho, onde tem o nome e a foto da pessoa, ele terá algumas coisas dentro dele, que eu chamei de "Neto 1" e "Neto 2". Podemos imaginar que é o texto e a imagem. Então o React Native funciona com essa hierarquia, igual a uma árvore.

Fundo azul com a estrutura de hierarquia de componentes do React Native. No topo temos um retângulo escrito "Nó", de onde sai duas setas: uma apontando para esquerda, onde tem o retângulo "Pai 1", e outra apontando para direita, onde tem o retângulo "Pai 2". Do retângulo "Pai 1" saem mais duas setas: a da esquerda aponta para o "Filho 1" e a da direita aponta para o "Filho 2". Do "Filho 1" saem mais duas setas: a da esquerda aponta para o "Neto1" e a da direita aponta para o "Neto 2".

Entretanto, percebam que, se quisermos passar uma variável que está no Nó, que é o primeiro arquivo, conseguimos passar para o Pai 1 e o Pai 2. Uma vez que está no Pai 1, podemos passar essa propriedade para o Filho 1 e o Filho 2. Tendo ela no Filho 1, conseguimos passar para o Neto 1 e Neto 2.

Vamos supor que criamos uma variável no Pai 1. Nesse caso, não conseguimos passar ela diretamente para o Pai 2, porque eles estão na mesma hierarquia. Só conseguimos passar essa variável para os filhos dele.

Sendo assim, temos acesso limitado a estados ou variáveis de componentes que estão no mesmo nível de hierarquia do React Native. Entretanto, existe outra forma de passar esse parâmetros, então aprenderemos como lidar com isso em aplicativos grandes.

Recapitulando, no fluxo normal temos um componente que é pai de outro em uma escala de hierarquia. Dessa forma conseguimos passar as propriedades do componente 1 para o 2 e do componente 2 para o 3, via props.

Existe também o fluxo com Context API, que nos permite pular os componentes que estão no meio do caminho. Assim o componente 1 consegue passar uma propriedade diretamente para o componente 3, sem ter que passar para o componente 2.

Isso funciona, mais ou menos, da seguinte maneira: imaginemos que o Context API é um cubo que fica globalmente disponível na aplicação, ou seja, qualquer componente da aplicação pode acessá-lo. Esse cubo conterá todas as informações que queremos salvar nele, como variáveis, funções, entre outras. Essas informações são chamadas de estados.

Podemos salvar esses estados a partir de qualquer componente ou tela da nossa aplicação. Então, na imagem, temos o primeiro componente, que é o Nó, enviando e salvando uma informação para o Context API. Essa informação está sendo acessada pelos componentes A, B e C, mas diretamente do Context.

Do lado esquerdo temos um diagrama com uma hierarquia e do lado direito temos um cubo escrito "Context API". A hierarquia começa com um círculo branco, que é o primeiro componente, ou o nó. Uma linha liga esse nó ao Context API e, sobre a linha, está escrito "Enviar". Na hierarquia, o primeiro nó está ligado a dois círculos azuis abaixo dele, o A, que está mais à esquerda, e o B, que está mais à direita. De ambos também sai uma linha para o Context API. O círculo A está ligado a outro círculo em branco abaixo dele, que está mais à esquerda. Já o círculo B está ligado a dois círculos brancos abaixo dele, um mais à esqueda e outro mais à direita. O círculo da direita está ligado a outro círculo azul claro, que é o C, de onde também sai uma linha para o Context API. Abaixo dessa linha está escrito "Consumir".

Então tudo que for alterado no Context será refletido nas outras telas. Deste modo não precisaremos ficar passando de um componente para o outro via props. Conseguimos acessar uma informação do primeiro nó no último, sem ter que passar pelas telas.

Isso tornar nossa aplicação mais versátil. Além disso, a organização fica melhor para, eventualmente, encontrar algum bug. Não será necessário voltar entre as telas para descobrir de onde vem a propriedade, uma vez que ela está acessível globalmente no arquivo.

Recapitulando, na situação comum, a informação é passada, via props, de uma tela para outra até chegar na tela que precisamos. Já com o Context API temos as mesmas telas, mas as informações que estão na primeira tela, que é a de Login, são salvas diretamente no Context, que é um arquivo onde as variáveis ficam globalmente visíveis.

Assim podemos acessar as informações diretamente da última tela, que seria a "Finalizar", pulando as telas do meio, que não vão usar essas informações diretamente. Em resumo, usamos o Context API porque ele organiza o crescimento do projeto, ajudando-nos a lidar melhor com complicações maiores, como muitas telas.

O Context API não é a única solução. Existem outras bibliotecas que fazem a mesma coisa que o Context, como o Redux, que é uma biblioteca bem famosa. O Context consegue fazer praticamente tudo que o Redux faz, mas o Redux faz algumas coisas a mais.

Entretanto, como o Redux é uma biblioteca externa, que depende da comunidade para ser mantida, nesse curso usaremos o Context API, que é nativo do React. Assim não precisaremos baixar nada, apenas usaremos as propriedades do React que nos permitem usar o Context API.

Se tiverem a curiosidade de saber como funciona o Redux e o que ele consegue fazer além do Context, terá um artigo no Para saber mais. Nele vocês descobrirão o que o Redux faz e poderão até implementá-lo, se quiserem.

Talvez estejam se perguntando a diferença entre uma Web API e um Context API. Para entendermos, precisamos partir da definição de API, que é uma Interface de Programação de Aplicações.

Ela é um conjunto de definições e protocolos para criar e integrar softwares. Então a Web API é uma interface que integra diferentes sistemas. No nosso caso, integrava um aplicativo no celular e um servidor, que é um computador que armazena as informações. Eles são aplicações diferentes que se comunicam através da Web API.

Já o Context API conecta diferentes componentes do mesmo aplicativo. Então ele permite a comunicação de um componente com outro, mas tudo internamente. Se pegarmos um celular, não temos acesso a informações de outro celular.

Sendo assim, com a Web API, conseguimos colocar uma informação em um dispositivo, enivar para o servidor e acessar essa aplicação de outro dispositivo. Já com o Context API, as informações só estão disponíveis dentro do próprio aplicativo, onde os componentes interagem uns com os outros, trocando informações entre eles.

Vamos implementar isso no nosso projeto!

Sobre o curso React Native: utilizando o Context API nas suas aplicações

O curso React Native: utilizando o Context API nas suas aplicações possui 127 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas