React Native CLI - Configurando no Windows - Aula Grátis #01

Olá, tudo bem?

No vídeo de hoje eu vou lhe ensinar, passo a passo, como configurar o ambiente Windows para desenvolvimento de apps Android e iOS com React Native CLI (Interface de Linha de Comando). Após esta aula gratuita, você estará apto a executar um app de Olá Mundo no smarpthone ou em algum simulador.

Link da documentação oficial: https://reactnative.dev/docs/environment-setup

Para o curso completo, visite https://www.luiztools.com.br/curso-react-native

Para tutoriais em texto, visite: https://www.luiztools.com.br/post/introducao-ao-react-native/

Um abraço e sucesso.

Prof. Luiz

—

o Olá tudo bem Aqui é o Professor Luiz
do curso de react-native nesta lição eu
vou mostrar pra você Como você pode
configurar um ambiente Windows para tá
programando usando o iett Neide destilai
ou CL a ideia que seja um vídeo bem
curto meu objetivo realmente tá com
setup da máquina Windows certo então sem
mais delongas vamos fazer a configuração
aí uma vez um
é o primeiro passo é você acessar o link
está na descrição do vídeo ou aí na aula
do curso que você está assistindo esse
link é da documentação oficial Direct né
onde ele diz exatamente que a gente quer
fazer a configurando o ambiente
desenvolvimento seu rolar aqui eu já
tenho duas opções que é o clipe estate
Collection que é muito mais simples tá
programação usando o Hector mais simples
mas ao mesmo tempo menos profissional em
outros vídeos do curso talvez agitorio
ético em outras oportunidades mas hoje
nosso foco aqui é o iett leite se ele ai
que é a forma mais profissional e que te
dá maiores poderes para construção de
aplicativos ou selecionar durex na pista
lhe custar a gente tem aqui a escolha do
ambiente do sistema operacional aqui eu
tô na máquina Windows em outros vídeos
talvez você vai ver a configuração para
Linux e promete né que eu tô na máquina
menos máquina Windows eu não consigo
pagar para o s usando Jackson eles ia lá
e Ok com a expo tem uma jogadinha gente
consegue testar
e se tiver um iPhone mas tu não consegue
de fato usar simuladores do iPhone no
Windows e nem mesmo fazer o bild depois
para gerar sua aplicação no Windows
então que eu consegui aqui é na verdade
programar usando Direct name para
Android apenas claro que depois você
pode utilizar um rack o alugando Mac na
nuvem fazer aí os testes necessários e
humilde porque eu já tirei ele suporta
as duas plataformas levar essas etapas
mais finais do seu aplicativo vamos lá
instalando dependências que diz aqui ó
Você precisará de node or at night
command-line Interface para você lá em
pai com dois uma jdk que eu fiz o
aumento do Java e Android Studio essa
nossa lista de ingredientes nossa
receita não quem tá me sugerindo
instalar o nome de o Python através de
um tal de chocolate quer um visor pacote
para Windows Vamos abrir aqui vou clicar
aqui no canal não vou deixar meu e-mail
ele vai me fornecer aqui um
tchau tchau agora eu vou iniciar para
abrir o powershell do Windows tem
executado como administrador Ok então
essa dor
o chocolate ele pede para de verifique
se a gente tem as permissões corretas já
conhece guete execution policy
o rock diz que tá restrito
Oi gente vai rodar esse outro comando
aqui ó
o atendente o by-pass
e vamo confirmar então agora uma
executar esse outro comando aqui debaixo
queria fazer ele vai rodar na sua
máquina que ele por ser baixado do site
do Chocolate perfeito ele falou outra
aqui a página do Rex mexer agora a gente
vai usar a gente dois pacote de
chocolate que a gente acabou de falar
com comando choca Hospital pedindo para
sala j s o Python o jdk Java
e ele vai baixar esse pacote para sua
máquina e vai instalar ele se você não
quiser usar o chocolate em gestão de
pacote Pelo menos você pode no site do
not install node o site do Pai então
instalar o Python e os aqui Java Então
já tá carro agora versão do Python e por
último baixando e instalando o jdk
beleza falamos então novo de pai que eu
já tô de cá uma tacada só com chocolate
vamos avançar ambiente e desenvolvimento
do Android primeiro passo tem que baixar
instalar o Android Studio isso porque o
react Native seu aplicativo na verdade a
roda é dentro não é para Android então
eu vou ter que arrumar mento geral vivo
geral APK configurar dependências etc
então para isso eu vou precisar ter
Android tudo nela aqui claro que eu vou
usar menos um Android Studio do que eu
usaria se eu fosse Resolver um Java ou
em pó ter estamos sendo captado consegue
andar de tudo é pesado e talvez seja um
problema aí na sua máquina a gente vai
usar ele no durante o curso mas
pontualmente isso claro com você
a causa no seu Smartphone Android se
você for testar quer usar o simulador
então talvez você vai usar pelo menos
uma dor no nosso estúdio com bastante
frequência vamos lá então tem um link
aqui para baixar o instalador de Túlio
fabriele ou baixar para minha máquina
servo agora O valor vai demorar um
pouquinho vou fazer um rápido corte aqui
no vídeo eu já volto assim que o
download tem lá beleza baixo um lugar de
tudo então vamos falar ele é importante
que você tá jdk antes Android Studio
para evitar uma série de problema então
vamos lá no blog todos etapa Vanessa que
não tem o hábito de fora da máquina
beleza posso pão daqui você a partir do
zero no seu Windows Como instalar um
estúdio o galo já vai estar lá beleza
quando a costura instala algumas
recomendações né se você não for fazer
essa parte do jeito que eu mostrei por
exemplo sem garantir que falar de cá
oito ou mais nova e o node tem que ser
versão 10 ou mais recente para você
descer podendo-se verificar essa
informação tô passando na documentação
oficial porque alguma coisa pode mudar a
data cobrar no vídeo
e você vai ver a luz de carro instalação
completa vamos avançar não está lá vou
deixar aqui marcado para missão do
estúdio primeira vez essa quantidade de
tudo então vamos cortar a população
nenhuma Você quer ou não quer
compartilhar dados de uso com o Google
mas avançar Standard de modo a nossa é a
nota fiscal noturno ou claro é só para
realizar as configurações
e eu tudo que ele vai baixar Symbian
baixar mas a cacetada de coisa para sua
mãe beleza baixou instalar os
componentes precisavam finalizar eu vi
ali que ele aparentemente estalou a
camada de virtualização para processador
AMD que não é a máquina tem um
processador AMD não é Intel se eu vier
aqui em configure SDK Manager at
Decathlon eu tenho aqui uma opção Intel
x86 emulei para acelerar Papa Você tem
uma camada de localização para dar maior
performance se a sua máquina computador
Intel aí que você marca aqui e dá um ok
no meu caso aqui não adianta então a
máquina com processador AMD para adianta
querer instalar esse cara aqui essa eu
quero ter maior performance uma máquina
com a MD a sugestão aqui na porta
pallets Leite ele é que você clica aqui
ó para o caso AMD né eles vão explicar
né que vem trabalhando há muito tempo
para melhorar a performance
revitalização do simulador no MD é que
tem um passo a passo para Linux para Mac
e para Windows
o Jack London Studio já falamos certinho
e tal nós temos que habilitar Windows
retrovisor platform em Windows features
iniciar
o Windows features eu vou procurar aqui
então a plataforma do Windows iPad vizer
a plataforma do rapper vai seu Domingos
selecionar ela ok vai ter Visa é a
camada de virtualização fornecida pela
Microsoft para que Rode máquinas
virtuais emuladores com maior
Performance em cima do Windows vai
precisar fazer isso aqui no computador
que não seja Hotel tá agora sim Theo
você vai lá onde eu mostrei no Android
beleza e falamos vamos voltar para o
passo a passo Direction próximo passo é
instalar o Android SDK por padrão dores
podia nessa sala já última só explicar
para gente Para aquela hora ali que ele
tava baixando no final também tá dizendo
aqui que eu tenho que instalar o Android
SDK ele está exigindo esse
especificamente o Android 10 tá ok como
é que é o cheiro nesse cara eu venho
configure essa da câmera já e marque a
opção Android 10 que é o que não achei
e vai baixar mais uma cacetada de coisas
tá os termos avançar para baixar e
instalar Beleza então instalou
componente precisava ser né próximo
passo ele disse para a gente ir
novamente no SD câmera já
e configure esta caminha já clico no
Android 10 o quê
as marcas soapex details Vamos ver que
tinha falado aqui ó
E ele disse para a gente tentar falado
quando você quer praticar 29 aqui e o
Intel x86 apto 64 ou googleapis Intel
x86 então eu vou no Google HP Intel x86
ato Google App Intel x86 a Tom é essa
aqui tá na verdade se eu tivesse antes
marcada a opção aqui de uma são os
detalhes a gente poderia ter me falado
esse elemento faltado tá esse tem aquele
vai começar para poder criar o emulador
usando essa imagem aqui de processador
Atom com o Google apis uma pesquisa para
poder tê-las aprendido de mapa Google
Play vai vai tá então achei Android SDK
build-tools
e esse elemento aqui vamos fazer feliz
e vão precisar do 29.02.19
a planta que você vê esse vídeo atenção
a documentação para as versões que ela
tiver te indicando naquele momento
atualizado ok aqui nessa data tá
indicando 2902 meu ex Neide daqui é o
então preste atenção a documentação faz
mais atenção ao forma como estou falando
aqui do que exatamente a versão que eu
tô usando a versão você consultar a
documentação na vez que você for fazer
você tá 2902 de tudo e vai instalar essa
imagem aqui de emulador
um ok para baixar aí mais um ponto 1gb
fazer mais uma corte rápido e no vídeo
beleza falou os componentes vão utilizar
vamos lá próxima etapa configurar a
variável de ambiente android-home as
ferramentas do retnet alguns homens ó
vou tentar executar comandos do Android
stecar já vai precisar essa maravilha
ambiente configurada
Bom vamos lá na praia de controle do
Windows
o José Carlos não contas de usuário
e vamos aqui em fazer alterações na
minha conta
a procura aqui na barra de pesquisa por
variáveis de ambiente
o resultado as variáveis de ambiente
para sua conta
e aqui você pode dar uma olhada se eu
não tenho android-home quem já varrone
não tem android-home então vamos ficar
aqui em Nova
o Android primeiros Android underline
home
Oi e o valor da variável tem que ser o
caminho até o seu Android secar esse
caminho vai variar de máquina para
máquina Ok mas geralmente ele vai estar
aonde
a planta o computador
e você
os usuários nome de seu usuário deve
aqui na barra de endereço contra-barra
ep data com a e b maiúsculo
o local
o Android SDK esse caminho aqui cê
usuários e usuário rap data local
Android SDK você vai copiar e vai colar
com o valor variável
e quem aqueles tomar outra dica se você
não achou esse de cá você pode descobrir
ele tá instalado no toca a andar de tudo
lá no estúdio
em configurações settings appearance and
River System settings Android secar aqui
o caminho ó pode copiar daqui até agora
aquele nos dias vamos fechar os por ser
o atual para garantir quando ele abrir
ele vai estar com essa gravar um
ambiente já me falava já configurada
vamos novamente deixando forçamos abrir
de novo como administrador
diferencialmente né raça já necessário
permissão para o motivo vamos pegar Este
comando aqui deve tarde ontem
Tá certo verifica Alessandra de Roma
está parecendo android-home beleza
próximo passo vamos acionar caminho do
blackpool painel de controle
as contas usar colchetes e cai de novo
em fazer operações da minha conta vamos
de novo em variáveis do ambiente
a e agora a gente vai selecionar a
variável PF e mandar editar ela Rosário
vai lá no teste editar vai clicar aqui
em novo
nós vamos adicionar aqui o caminho para
o platform-tools que ele fica na junto
hora que ele Android barras de cá uma
subpasta telefone tu pegar aqui ó eu tô
indo lá com aquela endereço aberto
e aqui platform Tools selecione esse
caminho com a loira aqui
um ok de novo beleza configurei o meu
Windows configurar Android Studio
configurei variáveis de ambiente
Fortaleza da caneta de node Python
chocolate em uma série de outras
questões aí qual é o próximo passo react
Native Command Line interface Então como
usar interface é os utilitários de linha
de comando né que você vai fazendo pelo
prompt do dólar no caso do Windows né ao
invés de instalar o Jefferson ele descer
lá na sua máquina a recomendação é
sempre que você for criar aplicação você
usar o comando npx que ele já é
justamente para baixar a versão e já
rodar ela e executar o comando que você
quer tá então Claro é algo que vai
Talvez parecer nesse sentido pelo
momento mas garante que está sempre
usando a última versão do Hatch net no
celular como ele é um projeto muito vivo
né não se recomendo você está aí na sua
máquina é uma npm install aonde tipo
assim
Ah e deixa lá ele quietinho você como é
que você sempre o papel aplicação você
usa ele preciso o Etna tive o justamente
em baixa o leque de leite naquele
momento para já executar ele para criar
sua aplicação Então a gente vai instalar
entre as que eu já criando uma aplicação
Nossa Máquina aqui os links recomendamos
que você desinstale o leque neste você
lá e se você já tiver instalado ele
alguma vez tá então vamos lá eu vou
abrir aqui o prompt de comando
eu vou abrir como administrador que às
vezes precisa então ele vai ficar
correto
e vamos aqui tá aqui
o primeiro deixa eu ir para uma pasta
com projetos né CDC:
Rua José Luiz eu tenho aqui são
carimbloco né vou criar uma pasta no
icadir we are Native Project on
eu vou entrar no sapato e aqui dentro
e eu vou dar o comando tá em casa ali
tem MPX Vectra Native init e o nome do
projeto por exemplo sugestão deles ali
Nossa urgente para baixar o iett Native
vai executar e já vai criar uma pro já
Toda vez que você for criar um novo
projeto do zero você vai tá espumando
dentro da pasta Onde você quer salvar o
projeto né npx Rex netfinity nome soro
já vou cortar o vídeo aqui porque vai
demorar um pouco essa informação Beleza
então terminou de inicializar o projeto
e atinei na parte o login do Latino
e quais são então template copiou
template Professor tem play salão
dependência ele serve e nem aqui tá
algumas instruções para rodar esse nosso
já antes disso vamos voltar aqui para
documentação oficial tem que um passo
opcional tapa na hora de ir só projeto
que você usar uma versão ou tentou
específico tá bom Então aceita para a
senhora se fica aí aqui usando o
template por exemplo o template com
typescript não pode ser uma opção
interessante é que você depositar
recomendo você resetar novamente roda eu
nem preciso mulher continente Infinity o
nosso nome do projeto passando tentei
digitar Street porque no curso outras
aulas a gente vai ver né usando
typescript no pro já tá aqui não vai
fazer diferença no nosso caso que a
gente só vai fazer o funcional olá mundo
no GetNet agora tá garantir com nossas
etapa do ambiente foi feito com sucesso
então se você chegou até aqui e fez tudo
passo a passo corretamente tem nenhum
problema estranho quer dizer que a sua
máquina ela está preparada para ro
a aplicação feita com react Native
obviamente testando só com Android
resolvi parar o vídeo por aqui antes de
fazer o teste que agora você tem dois
caminhos possíveis ou você vai pegar um
dispositivo Android físico configurar
ele e testar com ele ou você vai pegar o
Android Studio criar uma máquina virtual
Android e usar ela para os seus olhos
então você tá vendo esse vídeo no
YouTube eu vou colocar aqui em cima os
cargos com os dois possíveis caminhos
para você escolher para onde que você
vai você vai para Android físico ou se
vai para Android virtual você tá vendo ó
plataforma do curso completo você vai
encontrar logo adiante na outra forma os
vídeos seguinte então você pode escolher
qual o vídeo assistir em qualquer
maneira agradeço por essa tensão e Fica
atenta aí os próximos vídeos eu vou
seguir produzindo aí de moleque de leite
junto com o Daniel meu sócio um abraço e
até.