Primeiras aulas do curso React Native: utilizando e criando Hooks

React Native: utilizando e criando Hooks

Projeto - Apresentação

Eu sou a Natalia Kelim Thiel e neste curso de React Native vamos aprender a utilizar hooks do React e também criar os nossos próprios hooks.

Não só isso, nós também vamos aprender como fazer aplicações dinâmicas que não são estáticas, que podem mudar em tempo de execução. Também vamos aprender a construir aplicações que não utilizam o Expo, vamos usar o React Native CLI, que é a linha de comando do React Native, utilizando o ambiente nativo.

Para fazer esse curso você só precisa ter feito algum componente, saber criar componente, já ter feito uma tela no React Native e você já está apto para fazer esse curso.

Nesse curso, vamos utilizar o Orgs, que é um e-commerce de produtos naturais e mais especificamente vamos fazer essa tela de home aqui, onde vamos listar os produtores, nós também vamos poder expandir um produtor e fazer uma classificação diferente ali, mudar as estrelas dele em tempo de execução. Se fecharmos e abrirmos o aplicativo essa informação não será salva, mas pelo menos enquanto estivermos dentro do aplicativo essa informação estará ali.

Para fazer isso, vamos utilizar hooks como, por exemplo, o hook de estado para salvar essa classificação, o hook de efeito para carregar os nossos produtores e também vamos criar nossos hooks customizados para ajudar a melhorar a nossa aplicação, o nosso código.

Gostou e quer continuar essa jornada no React Native? Venha para o curso, vamos lá.

Projeto - React Native CLI

Neste vídeo, vamos revisar o que já foi instalado na atividade anterior do ambiente de React Native. Para isso, vamos acessar o site do React Native e abrir a documentação na parte que fala do setup de ambiente aqui no Environment setup.

Veremos que temos duas opções: o Expo CLI e o React Native CLI. Como já vimos, o Expo tem algumas limitações, por exemplo, não conseguimos acessar o bluetooth, não conseguimos fazer compras integradas com a Apple Store e a Play Store.

Se quisermos desenvolver um aplicativo completo mesmo, vamos precisar utilizar o React Native CLI, mas precisaremos também instalar várias SDKs e softwares também para podermos rodar tanto no Android quanto no iOS. Lembrando que se você quiser rodar no iOS você só pode rodar se você tiver um computador MacOS.

Confere no artigo se você executou tudo certo para você poder rodar ou no Android ou no iOS, em um desses dois e vamos acompanhar aqui também como verificamos isso no MacOS que é o sistema em que eu estou agora.

Para Android ele já diz aqui que precisamos ter o node, precisamos ter o watchman. Não é obrigatório, mas é recomendado, ele fala aqui. É obrigatório que tenhamos a JDK e ele instala aqui a 8. E também o Android Studio.

Vamos verificar se isso está instalado mesmo. Esses comandos são possíveis de serem executados em qualquer sistema operacional, precisamos que esses comandos retornem um valor que faça sentido. Por exemplo, precisamos do Java, podemos rodar aqui java -version tanto no Windows, no Mac ou no Linux, e ele vai nos retornar a versão do Java, aqui é a "1.8.0_292".

Vamos precisar no node node --version. Aqui está "v16.8". E o npm também, npm -v que o v é abreviado de version. Temos as três coisas principais para rodarmos no Android, além disso vamos precisar instalar o Android Studio.

Essa versão aqui é uma versão mais recente do Android Studio, pode ser que ela seja um pouco diferente quando você estiver abrindo, mas a página de configurações é a mesma coisa.

Aqui eu vou clicar em "More Actions" para abrir mais ações, mas se você estiver usando outra versão vai ter um botão aqui também para você abrir algumas opções. E vai ter as mesmas opções que tem aqui, eu preciso acessar o SDK Manager que é onde vamos conseguir ver as versões do Android que estão instaladas, as SDKs.

É importante que você tenha instalado a versão 10 do Android na API level 29. Se você não tiver, seleciona aqui, aplica e instala na sua máquina. Basta isso para rodarmos no Android.

Agora vamos ver o que precisamos para rodar no iOS. No iOS precisaremos também do Node e do npm e vamos precisar de uma coisa a mais que é pod. Vamos checar a versão do pod pod --version, a versão que está aqui é a "1.10.2".

Essas SDKs todas aqui você vai poder instalar vendo o artigo da atividade anterior, a atividade "Preparando o ambiente". Volta lá e vê se está tudo instalado. Além disso, para você rodar no iOS, lembrando que só no MacOS você consegue rodar, você vai precisar também instalar o Xcode.

Também é recomendável checar as preferências, se em locations você tem uma command line tools selecionada, é recomendável fazer essa checagem.

Agora que verificamos tudo o que precisamos para rodar, na próxima aula usaremos o React Native CLI para criar o nosso projeto. O que é esse React Native CLI que falamos, o que é CLI?

O CLI nada mais é do que um programa. Mas ao invés de ser um programa que você vai abrir e ver alguma coisa, vamos usá-lo na linha de comando. CLI é Command Line Interface ou Interface de Linha de Comando.

Poderemos utilizar comandos como: npx react-native e aqui vamos falar o que queremos rodar, o que queremos executar do React Native. Essa forma de chamarmos aqui passando algum parâmetro é o command line interface do React Native que é parecido até com o Expo também.

Se você tiver alguma dúvida do que instalamos não deixe de nos procurar no fórum que vamos te ajudar. Te vejo na próxima aula para começarmos a criação do nosso projeto.

Projeto - Criar o projeto e emulador

Neste vídeo, começaremos a criar nosso projeto, também vamos olhar um pouco das pastas que o React Native criou para nós e vamos olhar os emuladores do Android.

Para começar, vamos criar o nosso projeto. Podemos fazer isso utilizando a linha de comando do React Native, o React Native CLI. Rodaremos aqui: npx. Provavelmente você já viu o npm para rodar alguma coisa que está instalado na sua máquina, já com o npx você consegue rodar pacotes npm sem instalá-los obrigatoriamente. Com o npx você rodar ele sem precisar instalar previamente.

Utilizamos o npx react-native, tanto que o React Native na documentação vai nos indicar preferencialmente sempre usar o npx mesmo. npx react-native init, init é a função que vai fazer com que criemos o novo projeto. E o nosso projeto pode se chamar orgsHooks porque vamos trabalhar com o orgs e também vamos trabalhar com Hooks e vamos especificar qual é a versão que vamos usar e vamos usar a 0.65.1, alura npx react-native init orgsHooks --version 0.65.1.

Vou dar um “Enter” aqui e esse processo pode demorar um pouco, pode ser que ele pergunte alguma coisa e você pode dar o yes ou apertar “Enter" para confirmar. Vamos rodar.

Agora ele está baixando o template do React Native e ele vai criar essa pasta. Depende do seu computador, depende da internet. E depois de esperarmos a instalação do React Native, teremos uma nova pasta aqui, vou dar um ls para ver quais são as pastas que tem aqui dentro, temos a orgsHooks.

Aqui ele também dar uma explicação de como podemos rodar no Android e no iOS caso você já queira rodar, mas vamos dar uma olhada nos arquivos antes. Vamos utilizar um editor de texto simples, neste caso vou usar VS Code, você pode utilizar o editor de texto que você preferir. Pode ser o VS Code também, o Visual Studio Code.

Podemos vir aqui no “File > Open” e selecionar essa pasta que acabamos de gerar com o React Native, vou selecioná-la aqui e abrir. Podemos fechar essa aba de welcome e dar uma olhada aqui ao lado esquerdo nos arquivos mesmo, nessa aba “Explorer”. Já de cara temos uma diferença do Expo CLI com o React Native CLI, temos as pastas Android e iOS, essas pastas têm os códigos nativos.

A pasta de Android, por exemplo, temos gradle, temos o manifesto, temos códigos Java aqui dentro. Ele vai gerar todo o código Android que precisamos e vamos ter que usar essa pasta Android também. E a pasta iOS, que vai ter o “Podfile” também e vários códigos em nativo iOS. Isso porque o React Native realmente converte para código nativo.

Diferentemente do Expo, rodaremos esses códigos nativos na nossa máquina e não diretamente no celular. Temos aqui também a pasta “node_modules” que se já estamos habituados a usar node vamos sempre ter essa pasta que vai armazenar os arquivos das bibliotecas que estamos utilizando.

Temos vários arquivos de configuração, mas os mais importantes são o “package.json” que vai ter as versões das dependências que estamos utilizando no Node, no npm, temos também alguns scripts que podem rodar algumas coisas mais facilmente para nós. Temos também o “app.js” que vai ser o arquivo onde vamos começar a desenvolver em React Native mesmo.

Antes de rodar nossa aplicação, vamos olhar para ver se o emulador do Android está funcionando, está configurado corretamente, caso você queira rodar no emulador. Eu vou abrir aqui o Android Studio, clicar em “More actions” novamente, lembrando que se for uma versão antiga vai ter outro botão aqui parecido com esse, e agora vamos vir em “AVD Manager”.

Aqui no AVD Manager que é o Android Virtual Device Manager, neste caso já temos um device virtual, um emulador criado, mas se você quiser pode criar um novo no botão de create. Você pode selecionar qual é o modelo de celular que você quer.

Esses modelos são basicamente para definir qual será o tamanho da tela e talvez algumas configurações de densidade de pixels. Inclusive, você pode configurar aqui qual é o sistema operacional que ele vai rodar, nesse caso o que eu tenho baixado é o iOS, mas você pode baixar outro sistema operacional.

Aqui podemos configurar se ele vai está portátil, na vertical ou na horizontal. E nas configurações avançadas também temos algumas configurações que podem ser relevantes para você.

Por exemplo, se você tem mais memória na sua máquina você pode alterar aqui a quantidade de memória que o emulador vai utilizar, o que pode ajudar o seu emulador ficar mais rápido ou você liberar um pouco da lentidão que pode ficar no seu computador. Caso queira você pode configurar aqui manualmente, se não quiser pode deixar no padrão mesmo.

Quando você clicar em “Finish” ele vai criar um novo emulador. Neste caso não vou criar um novo porque já temos um aqui. E daqui para frente vamos poder começar a rodar a nossa aplicação e editar o “app.js”. Te vejo em breve para fazermos isso.

Sobre o curso React Native: utilizando e criando Hooks

O curso React Native: utilizando e criando Hooks possui 177 minutos de vídeos, em um total de 44 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

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programaçã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.

  • 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.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programaçã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.

  • 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.

12X
R$120
à vista R$1.440
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