Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: criando um app

React Native: criando um app

Criando o projeto - Apresentação

Você quer desenvolver aplicativos Android e iOS aprendendo uma única tecnologia e usando programas que pesam menos que um ambiente inativo? Eu sou Natalia Kelim Thiel, instrutora aqui da Alura e neste curso nós vamos aprender a criar aplicações híbridas usando React Native com Expo!

Todos SDKs e programas que você precisa configurar para desenvolver em uma única plataforma. Fique tranquilo! Nós da Alura queremos que você possa começar a desenvolver aplicativos, sendo você um programador experiente ou se você estiver começando na programação.

Por isso, o único requisito deste curso é que você saiba o básico de JavaScript. Se você ainda não sabe, fique tranquilo também porque aqui na Alura nós temos vários cursos sobre o JavaScript.

Eu vou deixar um curso linkado aqui na página deste curso de React Native para que você possa aprender esses conceitos. Depois que você aprender, não se esqueça de voltar aqui para o curso de React Native para continuar a aprender o mundo mobile.

Nós vamos utilizar o React Native com o Expo, que facilita muito na hora de criarmos o nosso ambiente. Nós não vamos precisar instalar softwares pesados; como o Android Studio, por exemplo. Nós só vamos precisar instalar o Node.js e usar um editor de texto simples.

E também, você vai poder rodar no seu celular - seja ele iOS, mesmo não tendo um macOS ou Android, em qualquer sistema operacional; seja ele Windows, Mac ou Linux.

Nós vamos utilizar o conceito de um e-commerce de produtos naturais que se chama orgs. Nós vamos aprender os componentes do React Native, como textos, assim como esse título, Cesta de Verduras; ou mesmo o Detalhes da cesta, que é um texto que está por cima da imagem.

Nós também vamos aprender a adicionar imagens e vamos aprender a adicionar botões, como o botão de "Comprar". Nós também vamos aprender a criar os nossos próprios componentes e estilizar os componentes que criamos e também estilizar os componentes do React Native para que eles fiquem parecidos com essa tela que você está vendo.

Nós também vamos criar listas, essa lista de itens da cesta. Nós vamos aprender o que precisamos evitar e como podemos otimizar essa lista para que o dispositivo não trave caso haja uma lista muito grande.

Nós também vamos utilizar o Google Fontes, fontes externas. Essa é a fonte padrão do Android. Nós instalamos uma fonte mais bonita para que o nosso aplicativo fique mais legal. Então essa é a fonte normal e essa é a fonte externa que adicionamos.

Se você tem interesse em começar no mundo mobile ou aprender React Native, uma única tecnologia para desenvolver aplicativos para Android e iOS, te espero neste curso. Vamos lá?

Criando o projeto - React Native e Expo

Agora que nós já decidimos ou estamos considerando utilizar o React Native como tecnologia na nossa aplicação, vamos dar uma olhada aqui no site do React Native, nas "Docs", para vermos como que instalamos o ambiente aqui em "Environment setup", na primeira opção, para começarmos a desenvolver em React Native!

Já de cara nós começamos com a nossa primeira decisão: nós vamos utilizar Expo CLI ou React Native CLI? Qual dos dois é melhor? No começo, para desenvolvermos aplicações nativas mesmo, Android, iOS e até hoje em dia nós precisamos instalar o Java, precisamos instalar SDK de Android e emuladores - no caso de Android, o Android Studio ou Xcode - para desenvolvermos para iOS.

[00:48]Além disso, nós só podemos desenvolver para iOS em sistemas macOS no computador da Apple. Então, já que estamos utilizando o React Native, que ele converte o mesmo código para código nativo em ambas as plataformas, nós talvez não precisaríamos nos preocupar com tudo isso.

Na verdade, não necessariamente. Se nós utilizarmos o React Native CLI nós ainda vamos precisar configurar o ambiente para cada plataforma que estivermos desenvolvendo.

Então, se nós quisermos rodar a aplicação no Android, fazer o build dela ou gerar um pacote para instalar, nós vamos precisar configurar todo o ambiente Android. E se quisermos fazer isso para iOS, nós também precisamos configurar o ambiente iOS no computador da Apple.

Então nós temos uma opção aqui que é recente, que é o Expo CLI - que até vem como padrão no React Native agora que permite fazer isso de forma muito mais fácil, porque antes só existia o React Native CLI, que é o modo tradicional de criar aplicação.

Então nós, utilizando o Expo, podemos criar uma aplicação e rodar ela sem a necessidade de configurarmos o ambiente nativo em si. Isso acontece porque o Expo instala uma aplicação no nosso celular que vai intermediar o React Native e o nosso celular em si.

Então dentro dessa aplicação do Expo já tem todos os códigos nativos necessários para rodar no Android ou no iOS. Então nós só precisamos desenvolver e instalar essa aplicação no nosso celular para que ela compile os códigos e nos mostre o aplicativo nativo sem a necessidade de configurar todo um ambiente de desenvolvimento complexo.

Outra vantagem que o Expo disponibiliza para nós são as atualizações via OTA, que significa atualizar o aplicativo na loja sem a necessidade de fazer upload de uma nova versão.

Nós fazemos upload para o servidor do Expo e ele já automaticamente atualiza o app dentro dele mesmo, sem o usuário fazer qualquer download na loja, por exemplo.

Mas por causa disso também, por conta do código nativo já estar dentro desse aplicativo do Expo, nós temos algumas limitações. Alguns recursos nativos que teríamos no React Native tradicional não são possíveis com o Expo e nós também temos uma aplicação um pouco maior, porque ela demanda que todo esse código nativo já esteja nesse aplicativo base.

Então se você quer uma aplicação muito pequena, pode ser que o Expo não seja ideal; mas como estamos começando com o React Native para facilitarmos as coisas, nós vamos utilizar o Expo neste curso.

Nas próximas atividades você vai ver como configuramos o ambiente com o Expo, que basicamente é só a instalação no Node e do Expo; e também como que vamos começar a criar o nosso projeto Expo do zero.

Criando o projeto - Criação da aplicação

Depois de configurar o ambiente, vamos criar o nosso projeto. Se você ainda não instalou o Node.js ou o Expo, volte nas atividades anteriores e instale eles seguindo o passo a passo.

Agora, se você veio do Node.js, pode estar habituado a criar um projeto dentro do npm-init e ir adicionando as bibliotecas manualmente; mas esse processo pode ser um pouco complicado se nós vamos utilizar alguma coisa tão complexa quando o React Native.

Então, tanto o Expo quanto o React Native já disponibilizam comandos para criarmos o nosso projeto de uma forma mais fácil, já englobando todas as bibliotecas necessárias.

Aqui no Expo nós já podemos ver na documentação que basta nós instalarmos o Expo, que nós já fizemos, e digitar expo init botando o nome do projeto.

Então vamos abrir o nosso terminal na pasta que você desejar, basta digitar cd e entrar nas pastas. Nós vamos criar um projeto Expo aqui. Vamos digitar expo init e o nosso projeto vai ser o orgs-cesta porque nós vamos criar a tela da cesta do aplicativo Orgs.

Então eu vou apertar a tecla "Enter" e ele vai me perguntar qual é o template que eu quero escolher. Para começarmos, vamos colocar no blank mesmo que é um aplicativo limpo, que vai ter só uma tela ali de exemplo.

Esse processo pode demorar um pouco, visto que nós vamos baixar todas as bibliotecas, as dependências e instalar dentro da pasta "orgs-cesta". Daqui a pouco eu voltarei com o projeto criado.

Pronto! O projeto já foi criado e aqui ele já diz algumas coisas que podemos fazer para rodar ele; mas antes de rodarmos, vamos dar uma olhada nos arquivos que foram criados dentro desta pasta que é a "orgs-cesta".

Para abrir os arquivos eu vou utilizar o VS Code, mas você pode usar o editor de texto que você quiser. Vou abrir aqui o VS Code, em "File". Nós vamos abrir uma pasta. Eu vou entrar no caminho, em "orgs-cesta".

Podemos autorizar. Vamos fechar a aba "Getting Started" e aqui nós já temos as pastas da nossa aplicação, os arquivos e as pastas nesta parte da esquerda.

Nós podemos ver aqui algumas coisas do Expo, nós podemos ver o "node_modules". O "package-lock" e o "package.json", que são do Node e que nós vamos ter as versões das bibliotecas que estamos utilizando.

Nós vamos ter no "node_modules" todos os arquivos dessas bibliotecas que estamos utilizando e temos também o "app.json", que é um arquivo que só vai ter no Expo. No React Native normal nós não vamos ter esse arquivo.

Aqui nós podemos configurar algumas coisas do Expo que ele facilita para nós. Por exemplo: o nome da aplicação, então podemos colocar aqui "Orgs", por exemplo, para ficar mais bonito. Esse é o nome que apareceria na gaveta de aplicativos.

[03:] A versão do aplicativo, o ícone que está dentro da pasta assets, que vão ter os ícones. A splash screen ele já permite atualizar a splash screen e também algumas outras coisas.

Nós temos também o "App.js", que é o arquivo JavaScript onde nós começamos a desenvolver a nossa aplicação.

Na próxima aula nós vamos rodar esse projeto que acabamos de criar e começar a editar a nossa aplicação!

Sobre o curso React Native: criando um app

O curso React Native: criando um app possui 173 minutos de vídeos, em um total de 43 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