Au 01 - Mobile - React Native - Configurando ambiente e criando projeto - Mestres BEGIN

[Música] fala pessoal jancer aqui o vídeo de hoje é o primeiro vídeo aí de uma série de vídeos que a gente vai estar produzindo aí sobre o react n né A ideia é que esse curso aqui seja um minic curso e de react Nate onde a gente vai produzir um projeto né vai ser mais um vai ter mais conteúdo prático tá então a gente vai colocar bastante a mão na massa vai desenvolver bastante código entender testar muita coisa e basicamente a ideia vai ser essa né nessa primeira aula aqui a gente vai ser só configurando

ali a questão de ambiente né entendendo as os diferentes ambientes de desenvolvimento e na próxima aula a gente já inicia introduzindo aí a ideia do projeto como que ele vai ser né O que que a gente vai fazer e enfim a gente já inicia aí os conteúdos Tá certo então para essa aula aqui né como a gente tá falando de de ambiente eu já deixei aberto aqui algumas Abas já pesquisei aqui algumas coisas que a gente vai ter que est configurando aí e entendendo para começar a desenvolver tá então pesquisando na própria documentação do react

Native né a gente pesquisa aqui por react Native Docs ele vai abrir aqui né a introdução pro react Native E aqui nessa segunda são aqui né Desse menu lateral nós temos aqui o setting up the development environment que é onde a gente vai iniciar começar o ambiente e aí sim a gente começa com o projeto tá então se a gente olha aqui né set up development environment a gente tem basicamente duas opções que é com Expo go e com o react Native cli o que que é a diferença né o Expo ele seria meio que

um encapsulador que a questão do react Native né o quando a gente tá falando de react Native é é um desenvolvimento usando react só que ele é híbrido né Ele vale tanto para Android quanto para iOS agora a gente tá tendo está chegando aí a parte web também do react Native mas a priori a gente vai imaginar isso só no ambiente mobile né Eh Android e IOS então o Expo ele me que capsula esse desenvolvimento assim como o react Native faz só que o Expo fornece pra gente outras ferramentas né outras bibliotecas bastante coisa pronta

então para quem tá iniciando é muito interessante a gente desenvolver com Expo e a gente pensa em partir pro react Native cli quando o nosso código o nosso projeto em si ele já precisa ter uma interação um pouco maior com a parte Nativa né E aí a gente começa a pensar no rex n c mas quando é projeto simples quando é coisa mais tranquila a gente pode tranquilamente usar o Expo para est fazendo isso e nesse nosso curso aqui não vai ser diferente né a gente vai est usando o Expo até porque a aplicação ela

não vai ter nenhuma funcionalidade tão e que interaja tanto assim com essa parte Nativa Então se a gente olha Expo go né Quick start ele dá um exemplo aqui pra gente né pra gente usar npx eh Create Expo app e o nome do projeto e ele fala e se a gente muda aqui né para react na cli caso você queira fazer nós temos diferentes configurações para Windows Linux e Mac para Android e IOS também né Isso Aqui varia bastante Então aqui tem um tutorial de tudo como a gente vai estar fazendo com o Expo é

interessante a gente buscar no na própria documentação do Expo né se a gente pesquisar aqui por Expo react naate ele vai trazer aqui pra gente né o o site do ex a gente clica aqui e já tem ali já tinha ali né as Docs mas aqui no nesse menu superior né no header Aqui nós temos aqui a opção Docs né E clicando aqui ele vai abrir a documentação só que de início a gente tem aqui a parte de instalação e criando uma aplicativo né a configuração em si do Expo que E aí para isso funcionar

a gente vai precisar do node tá a gente vai ter precisar do do node instalado aí na nossa máquina e o que que é o node né para quem não tá ligado aí o node é que uma Engine né que ele executa JavaScript né inicialmente o JavaScript ele tava só presente nos browsers E aí com o lançamento do node o JavaScript sai do browser e passa aí para para algum e sistema operacional né então eu instalo no meu Windows aqui você pode instalar no Linux no Mac você instala lá o nodejs e a gente consegue

executar o JavaScript em cima desse nodejs né fora do do browser tá então a gente precisa do node x do nodejs para est usando o Expo né para instalar o Expo e enfim desenvolver o o react Native em si né porque é tudo baseado em JavaScript então o bloco fundamental aqui gira tudo em torno do node tá então aqui já tem um link né se a gente clica aqui ele já abre o site do node ou você pode pesquisar por nodejs a gente já tem a documentação oficial com a página aqui de download né então

você seleciona ali o installer clica aqui ele vai fazer o download né já vai iniciar aqui eu vou cancelar porque eu já ten instalado e outro outra coisa que a gente vai precisar também é de um editor de texto né e aqui não tem como não recomendar o visual Studio code que seria aí é o mais popular de todos aí e enfim é muito simples é muito leve é muito personalizável então visual Studio code aqui a gente pesquisa no Google né A aa o site oficial consegue aqui fazer o download e para fazer o download

ele já já cliquei ali né ele já começou a fazer o download eu vou cancelar porque eu já tenho isso aqui tá e com esses dois caras né Por enquanto aqui vamos ficar nesses dois né no node e no editor de texto eu já tenho os instaladores deles aqui e aqui seria basicamente abrir o instalador e e passando pelo passo a passo aqui para instalar né eu vou abrir aqui o node ali abriu eu dei next gente Tem que ler os termos né Eu já li os termos Então você lê os termos aqui concorda dá

o Next é decide aqui qual passa que isso vai ser instalado aqui são os módulos dentro do node que a gente pode escolher ou não o que baixar o que instalar o que não não instalar recomendo deixar isso aqui como default e prestar atenção aqui no pef né que esse do pef ele ele é bastante interessante a gente já deixar ele já adicionar no nas variáveis né do PF ou executável do node pra gente conseguir usar chamar o node ali no terminal dá um next aqui essa essa opção aqui para instalar automaticamente e ferramentas extras

do node isso aqui eu recomendo que você deixe desmarcado até porque a gente não vai tá usando e isso aqui é algo mais avançado aí do node não a gente não precisa entrar fundo nisso agora né pode deixar aqui desmarcado dá um next clica em instal ele vai instalar não vou clicar Porque eu já tenho instalado na minha máquina tá E na verdade eu deveria até instalar porque essa versão tá mais recente que a minha mas eu vou cancelar aqui certo vou sair aqui e no visual Studio code também é a mesma coisa aqui ele

vai dar um erro porque eu já tenho uma Instância do vs code rodando deixa eu fechar ela aqui e aqui é aquele mesmo processo né aceitar os termos e aqui é a questão dos ícones e tal né interessante deixar o pef né adicionar o pef marcado clique next clicar instal ele vai instalar também tá não vou instalar porque eu também já tenho aqui na minha máquina beleza e aí com esses dois instalados vamos voltar aqui na documentação do Expo né que aqui ele fala pra gente instalar o node aqui tem também a questão do Git

ou para quem tá em Mac ou Linux tem que instalar também o Watchman e enfim né Caso seja seu caso procurar clicar aqui no link do Watchman ele vai instalar como que eu tô no Windows não preciso o Git também é interessante né todo programador deveria ter ali deve ter o seu conhecimento em Git tá então com isso aqui tudo instalado que que eu vou fazer vou abrir aqui o meu CMD e aqui a gente digita node traço v e ele vai printar aqui a versão do node Ó o meu tá na 16 na mais

recente é 18 Mas enfim e para você ter certeza que o node tá instalado né caso eu não tenha Aparecido Isso aqui é bom você iniciar reinicia sua máquina né que isso aqui vai aparecer ou então é aquela questão lá do pef né das variáveis ali de ambiente mas com o node já executando nós temos aqui o npm e o npx que são basicamente o npm né node package Manager npx é o node Packet executer que é basicamente gerenciadores de pacote né e o Expo ele é um pacote né Ele é uma biblioteca pensando ali

JavaScript ou seja ele ele tem todas as instruções ali para que ele funcione e isso foi está sendo disponibilizado pra gente via npm então eu uso o npm ou npx eh tem ali as suas diferenças mas não vamos entrar tão a fundo nisso para Tá instalando o Expo né então ele ele fala aqui pra gente pra gente executar né o npx exp Men H isso aqui é para meio que rodar o help para ele sugerir pra gente comandos ou tipos de comandos que a gente pode estar executando enfim tem aqui toda a parte de login

porque o Expo em si ele é uma plataforma né Ele é um serviço então a gente pode registrar criar a conta lá o Expo El ele dá pra gente um serviço de Deploy por exemplo pra gente publicar os nossos apps nas Stores né na App Store na Play Store então É bem interessante para isso a gente precisa dar conta né mas aqui só para desenvolver a gente não vai precisar tá fazendo isso né Mas a questão da instalação é basicamente a gente vai executar o aqui ele fala do Expo go né que o que que

é esse ide aqui do Expo go é que a gente vai desenvolver o código na nossa máquina e eu vou instalar o Expo go ele é um aplicativo que eu instalo no meu dispositivo físico tá então com isso com isso instalado com esse aplicativo eu conecto o aplicativo no meu celular com o que eu tô desenvolvendo E aí eu meio que trago o código que eu tô desenvolvendo pro meu dispositivo então é muito interessante tá é muito legal a gente usar isso aqui com Expo porque a gente meio que tem uma experiência ali real de

como o nosso app tá ficando em um dispositivo tá então caso você eh queira testar aí usando no seu dispositivo físico é só eu procurar na loja do do seu celular o aplicativo Expo Tá eu vou mover aqui no passo para pro Create New app e aqui no Create New App ele já vai sugerir pra gente aqui as questões do para pra gente tá fazendo a criação de uma aplicação Mas voltando aqui na instalação ele fala né que aqui para para executar esses comandos todos ele usa npx tá e o npx é basicamente esse Executor

de código é meio que para mim executar uma função de um pacote sem ter ele instalado na minha máquina tá e o npm a gente usa para instalar na máquina tá então o que eu recomendo que você faça é dar um npm aqui eu já tinha digitado né dá um npm install Expo menos G que que é isso eu vou instalar o Expo na minha máquina de forma Global tá então sempre que eu for rodar um processo sempre que eu for fazer alguma coisa que precisar do Expo a gente usa a gente pode chamar né

o Expo e enfim o comando que eu quero Executar a gente consegue executar em qualquer terminal em qualquer pasta enfim tá instalado globalmente né então eu recomendo que você Execute isso aí ele vai fazer aqui a instalação enquanto ele faz né vamos voltar aqui pra criação da aplicação e na criação ele usa outro pacote né que esse Create Expo app ou seja os npx Create Expo app e o nome da aplicação e isso aqui ele já vai criar um template né o uma base ali do projeto o que que é o Projeto um um um

projeto uma arquitetura usando o Expo ele já vai trazer tudo configurado pra gente então a gente pode estar fazendo isso aqui usando npx tá caso você não queira instalar o Create Expo app que tanto faz tá eu vou fazer usando o npx e aqui a gente vai passar parâmetros a mais que é referente a template tá porque aqui a gente vai fazer esse desenvolvimento dessa aplicação usando react Native mas a gente vai usar também typescript tá então eu vou fazer a criação de um projeto usando template de typescript que já vai vir no typescript configurado

para mim também certo então vamos aqui no terminal ele instalou aqui para mim né o Expo só que aqui como eu abri o CMD ele tá numa pasta num diretório né Eh que não é o que eu quero executar agora esse comando e esse comando para criação do projeto então eu vou abrir aqui um diretório que eu quero tá que eu quero criar esse projeto né Deixa eu só pegar aqui o diretório esse diretório aqui ó deixa eu puxar aqui pra gente vou fechar o terminal aqui eu tô no meu diretório da Mestres né É

aqui nós temos os arquivos do curso react que a gente acabou de gravar mas eu vou criar aqui o projeto react na né o projeto com Expo e esse diretório ele vai criar para mim uma pasta com o nome do projeto tá então eu vou est criando aqui a gente clica aqui na barra de pesquisa né Pesquisa não né no aqui no onde mostro o pef Né o diretório que tá aberto e digita CMD né no ele já vai abrir para mim o terminal e nesse diretório que eu quero então aqui a gente executa né

o npx Create Expo traço app né aqui o nome da aplicação eu vou chamar isso aqui de minicurso react Native né traço Native e aqui é a hora que a gente passa o template né que seria a tag Men t ou seja vou indicar um template para ser usado e esse template é o traço template traço Blank traço typescript ou seja ele vai criar para mim um um template branco né por isso Blank ali sem nenhuma funcionalidade sem nada usando o typescript tá então aqui eu dou enter ele vai me fazer uma pergunta aqui né

se eu quero instalar o pacote Create Expo app né Porque que a gente usou o npx Mas no processo ele pede para instalar o Create Expo app e aqui você pressiona o Y né para concordar e aqui ele vai fazer toda a instalação e criação do do projeto nesse diretório tá então quando finalizar aqui eu volto então finalizou aqui né a instalação do projeto e se a gente volta aqui na no diretório né que eu tinha indicado Ele criou aqui a pasta né minicurso react na se a gente abre já tem todo um projeto aqui

tá beleza então eu vou fazer o que agora vou vir aqui no vs code né a gente vai executar aqui o visual Studio code e o seu vai abrir um pouco diferente do meu porque o seu vai abrir um pouco diferente no meu Porque aqui no meu eu criei uma um workspace né O O vscode ele tem essa configuração de workspace de área de trabalho porque eu tenho um um um visual stud já com muitas configurações aqui que eu uso né no dia a dia e Eu criei esse workspace mais simples com menos extensões mais

limpo pra gente estar trabalhando mas quando você abrir aí vai ter uma cara parecida com essa você pode clicar aqui na parte superior esquerda né em file e abrir Open folder né para abrir uma pasta ou então só arrastar aqui ó e aqui no app minicurso react Nate eu vou arrastar para aqui pro ele não vai aceitar não vai né certo eu vou copiar aqui o pf dele a gente clica aqui em Open folder eu vou colar ali na parte superior né basicamente abrir a pasta que eu acabei de criar né que é b essa

aqui né react Native minicurso react Native então a gente clica aqui em Ed ele vai abrir essa pasta aqui no nosso vs code E com isso aqui a gente já tem né o projeto se eu abre aqui o app.tsx né esse aqui já é um projetinho com react Native e e aqui agora a gente vai abordar mais coisas de como rodar isso aqui né então o que que a gente pode fazer a gente pode abrir o terminal aqui no vs code né eu abrir o terminal clicar aqui na parte superior New terminal né Aqui tem

um atalho também para abrir contol shift aspas né que eu acredito que eu mudei isso né não se eu deve estar diferente mas enfim a gente vai abrir o terminal e no terminal na verdade vamos olhar aqui ó no pack Jason né o arquivo que foi criado e noval isso aqui é um arquivo um um projeto baseado em node né então nós teremos aqui o pack json teremos a pasta node modules que são E no caso a node modul é onde fica as dependências né do projeto os pacotes que o nosso projeto depende e o

pack json vai ficar essa configuração de dependências e também de scripts e descrição do projeto em si né então nos scripts Aqui nós temos o script start que ele executa ó start então lembra lá que a gente instalou o Expo globalmente ele vai ser usado aqui por na verdade a gente já instalou o Expo como dependência deste projeto né então eu meio que não precisaria de ter o Expo Global porque ele já tá dentro aqui da node modes que é dependência do projeto Mas enfim e a gente vai executar Expo start E aí ele vai

iniciar Esse exp tem aqui Android IOS e web também mas a gente não vai est entrando muito a fundo nisso agora né Vamos ficar aqui no start então eu vou executar aqui né npm start certo e executando isso aqui ele vai executar o Expo start que vai me dar algumas opções tá tá iniciando aqui vamos aguardar certo rodou aqui tá com essas opções aqui e olha só tem um QR Code esse QR Code se você ler esse QR Code com o seu celular com o Expo instalado ele já vai fazer esse link entre o seu

projeto e o seu dispositivo físico né E vai rodar esse projeto aqui no seu celular e tem mais features dentro disso como por exemplo a gente pode compartilhar esse esse QR Code esse link com outras pessoas e outras pessoas que tão com com esse link vai poder acessar o código que eu estou desenvolvendo tá então por exemplo você tem um colega aí de trabalho você tá fazendo a Fit quer que alguém olhe você pega esse link manda para essa pessoa ela conseguiria ver e tem que ter algumas configurações a mais né para esse para essa

configuração funcionar nessa configuração de outros dispositivos fora da sua rede local né porque aqui ele usa a rede local né lembrando né que o exp go lá ele tem que tá conectado na rede local no mesma rede que tá o seu computador para que tudo funcione tá tem esse detalhe mas aqui mais embaixo né ele tem umas opções que se eu pressionar a tecla a aqui no terminal ele já tá falando que que vai abrir o Android né se eu pressionar w ele vai abrir o Web como aqui tá no Windows né nem apareceu aqui

para Pressionar para abrir o iOS mas teria essa opção aqui também caso a gente tivesse um Mac mas o fato é que eu posso usar isso aqui via Expo go Mas a gente pode também rodar um simulador um emulador né ou simulado iOS caso você esteja no no no Mac e rodar esse projeto também no no próprio computador né no próprio emulador ali ou simulador de um dispositivo e nesse caso aqui como eu tô no Windows eu tenho aqui o emulador Android tá o emulador Android se a gente vem aqui no Browser eh nós temos

o Android Studio tá então Android Studio é o o a plataforma ali que a usada pela Google para desenvolver nativo Android só que dentro do Android Studio A gente consegue criar os emulador a gente usa o Android Studio para criar os emuladores né então eu tô até com o Android Studio aberto aqui né se você instalar aqui tá você pesquisa por download Android Studio ele vai abrir aqui o link de download D sde você faz o download ali faz ali toda aqu aceitar os termos eu não vou passar por isso porque seria injusto com a

galera do Mac Mas você instala o Android estud né caso você queira já eu já tô sendo injusto com a galera do Mac mas na verdade eu não vou conseguir testar eh fazer o processo de um Mac aqui mas você vai instalar ou o Android Studio ou no Mac lá é o xcode né você vai fazer ali a instalação e aí no caso do Android Studio você vai ter uma tela mais ou menos parecida com essa aqui você pode abrir um projeto criar um projeto novo né então a gente pode clicar aqui em new Project

eu vou criar aqui um novo activ porque a gente não vai desenvolver de verdade dentro do Android Studio só vou usar para criar um o emulador né então a gente clica aqui em no activity clicka em next ele vai pedir pra gente dar um nome pra aplicação enfim definir onde vai ser salvo a linguagem que vai ser isso aqui a gente pode só finalizar para ele abrir a ide e dentro da ide aqui no canto superior direito nós temos aqui esse Device Manager tá então se a gente clica aqui a gente vai ter a possibilidade

de criar um dispositivo né aqui ele tá iniciando então enquanto ele inicia aí vamos voltar aqui tá vamos voltar aqui no na configuração do Expo né isso isso né que aqui na parte nessa parte aqui de Create a new app né Ele fala aqui o comando para criar um app o Expo start né que foi o npm start que a gente executou lá e ele fala PR questão de abrir né que foi o que eu acabei de falar aqui que a gente pode usar via exp ou via simulador iOS ou emulador Android é então aqui

no vs code se eu pressionar a tecla a ele vai abrir o emulador que eu tenho instalado aqui na minha máquina tá então ele ele abriu aqui ó o emulador tá iniciando então vou aguardar essa inicialização aqui e eu já volto para mostrar para vocês e ele finalizou aqui Tá eu já tô aqui com o aplicativo rodando e o que ele fez aqui na verdade se a gente olha aqui os logs eu a né para abrir no Android Ele abriu o emulador eh no Pixel 4 né iniciou lá o o bundler né E aí ele

fez um update no meu Expo go porque eu já tinha instalado o Expo neste dispositivo tá nesse emulador no seu caso aí na primeira vez ele vai fazer a instalação do Expo go nesse dispositivo E aí né que depois que ele instalou Ele criou o bundle e abriu iniciou o aplicativo tá então na primeira vez que abre vai aparecer essa tela aqui que tá falando que a primeira vez que a gente abriu o Expo e tal que enfim é um boas vindas a gente clica aqui em goret para ele não ficar aparecendo isso toda vez

que você abr o app e esse menu aqui é o menu do Expo go tá então que a gente consegue recarregar a gente consegue habilitar ou não o fast refresh que é basicamente quando a gente salvar o código lá no aqui no vs code ele vai recarregar o app tem aqui o modo debug o monitor de performance enfim eh a gente não vai mexer nisso Agora tá mas o fato é que se eu fecho aqui ó nós já temos aqui uma tela branca com esse texto escrito e é basicamente isso que tá aqui nesse meu

Deixa eu só fechar diminuir aqui isso no arquivo web. tsx né que nós temos aqui na raiz do do projeto tá aqui a gente tem nós temos o anvio com a tag Text e onde tá esse texto aqui né se eu altero esse texto ti eu só vou deixar Open up FSX e vou salvar ele já atualizou aqui né no meu aplicativo se eu desfaço e salvo ele voltou ali o texto né Então tá funcionando a gente já tem um o código né um projeto nós já temos aqui o emulador executando eh e detalhe aqui

tipo se eu se eu tô aqui no emulador né E nós pressionamos R duas vezes ele vai recarregar o app né se eu clico aqui no terminal eu pressiono R uma vez isso a gente pressiona R uma vez clicando no terminal ele vai recarregar o app também e tem outro comando aqui que é o comando do menu né que a gente pode pressionar M aqui no terminal ele vai abrir aquele menu que estava aberto aqui no app aqui se a gente fecha aqui o Expo go Vamos abrir aqui né exp aqui ele instalou né o

ativo no meu emulador e aqui tem o projeto né então se o projeto tá rodando aqui no terminal a gente pode clicar aqui e ele vai tentar conectar né fazer essa conexão entre o aplicativo xogo com a minha ide aqui ele já conectou né já tá aqui de novo código se eu editar isso aqui e salvar ele vai atualizar também tá certo então outra coisa além disso é aqui no Android Studio né que a gente tinha deixado carregando eh para a gente conseguir abrir aqui o Device Manager né e abrindo ele aqui no meu caso

aqui eu tenho esse Pixel 4 né Nós podemos criar um device né Create device aqui e eu posso criar por exemplo outro Pixel 4 e tem um detalhe também né importante falar que no react Native a gente o que ele recomenda L na documentação é pra gente usar a ap31 tá E que é o Android 12 então eu tenho que criar um emulador né Eu acho que a maioria da do pessoal que vai tá criando esse dispositivo né Eh a gente vai criar esse emulador aqui com o Android na api o o Api level 31

né que é o Android 12 clica aqui em next a gente dá um nome né Para esse cara e clicar aqui em finish ele vai criar tá então com isso aqui feito nós já temos aí né esse ambiente de desenvolvimento usando o Expo aqui eu dei o exemplo com o Android Studio né eu executando Android e vou falhar aqui vou deix ficar devendo aí o pessoal do iOS do Mac mas o processo é parecido tá só muda detalhes ali da plataforma mesmo parecido mas não é tá certo mas beleza então para essa aula é isso

Tá certo eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]