Aprenda a instalar o Node com o nvm. Gerando um projeto de React Native com o create-react-native-app. Conectando ao aplicativo Expo para desenvolver no próprio dispositivo móvel.

React Native - Guia de Instalação (Node e Expo)

Aprenda a instalar o Node com o nvm. Gerando um projeto de React Native com o create-react-native-app. Conectando ao aplicativo Expo para desenvolver no próp...

Nesta aula aprendemos a instalar o Node.js no Ubuntu com o Node Version Manager (nvm).

O `nvm` é um gerenciador de versões que nos permite instalar e mudar a versão instalada do Node sem ter que se restringir à uma específica.

O repositório oficial do nvm contém instruções de como instalar. Uma delas é através de um script de shell que é baixado e executado na sua máquina. Pode-se baixar o script manualmente e rodá-lo. Ou usar tanto o comando `curl` como o `wget` para baixar e redirecionar a saída para o comando `bash` (ou qualquer outro tipo de shell). [Clique aqui para acessar o repositório](https://github.com/nvm-sh/nvm#installing-and-updating) e copiar o comando de instalação:

```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```

(O comando acima se tornará obsoleto com novas versões então recomendo acessar o repositório diretamente e copiar de lá)

O diretório `.nvm` então será criado no caminho do seu diretório pessoal (`/home/usuario`).

Linhas de configuração do nvm também serão adicionadas ao seu arquivo de `.bashrc` no seu diretório pessoal. Para confirmar, execute o comando:

```
tail ~/.bashrc
```

Espere uma saída que contém uma passagem parecida com a seguinte:

```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

Para rodar o nvm sem ter que abrir uma nova janela ou aba do terminal, rode:

```
source ~/.bashrc
```

Para instalar a versão mais atual do Node de suporte a longo prazo ("long-term support"), rode:

```
nvm install 'lts/*'

# o seguinte também funciona
nvm install --lts
```

Para listar as versões instaladas:

```
nvm list
```

Para usar a versão instalada, rode `nvm use 16`, onde 16 é o número da versão desejada. Para usar a versão de suporte a longo prazo, use:

```
nvm use 'lts/*'

# o seguinte também funciona
nvm use --lts
```

Para confirmar que estás rodando a versão desejada, rode os seguintes comandos:

```
node -v

npm -v
```

[Ubuntu] Instalando o Node com NVM

Nesta aula nós vamos aprender como instalar o node no Linux usando o NVM.
NVM é o Node Version Manager, é o gerenciador de versões para o node.
Quando a gente usar NVM a gente pode escolher que versão do node a gente quer usar.
Ele também muda a versão do NPM.
Então, para começar vamos lá no navegador e para a página do NVM no GitHub.
GitHub.com.creationix.nvm. GitHub.com.crie.nix.nvm.
Nesta página tem as instruções de instalação, se você ir lá para baixo aqui.
Installation. E é bem simples, a gente vai baixar um script de instalação e executar no nosso shell.
Aí vai instalar o NVM na parte da .nvm no seu diretório pessoal.
Então vamos lá, vamos primeiro copiar esse cara aqui.
Você tem a opção de usar o curl ou o Wget, eu vou usar o curl, tá certo?
Então vamos copiar o link do script de instalação.
E vamos voltar ao terminal aqui, vamos lá no terminal.
E vamos chamar o curl, traço o o, traço o, espaço e vamos colar aquele link.
Aí você dá um pipe para o baixo.
E ele vai baixar o NVM e vai instalar na pasta .nvm no seu diretório pessoal.
Ele também vai adicionar essas quatro linhas para o seu .bashrc.
Se você der um tail no .bashrc, seu diretório pessoal, você vê que ele realmente adiciona esse script.
Esse cara aqui vai inicializar o NVM toda vez que você abrir o seu terminal.
Se você tentar usar o NVM agora, não vai funcionar.
Então você tem que abrir um novo janela do terminal.
Se você não quiser abrir um novo janela, você pode dar um source na hora.
Dá um source assim no .bashrc para poder iniciar o NVM.
Se não, era só abrir uma nova janela, certo?
Com isso o NVM está instalado, a gente pode instalar a versão do node que a gente quiser.
Por exemplo, digitando o NVM install, LTS, barra, asterisco, vai instalar a versão de long term support.
Nesse caso é a versão 8 no momento que eu gravei esse vídeo.
Então ele vai baixar a versão do node 8 com o npm5.
Mas nós não vamos usar o npm5 porque no momento que eu gravei esse vídeo tem problema para rodar o create react native app.
Então a gente vai voltar lá para a versão do node 6 que vem com o npm3.
Se você quiser usar o node 8, pode usar e em vez de usar npm você usa o yarn, certo?
Então vamos continuar.
Eu vou agora instalar a versão 6 e mudar de versão.
Então bem fácil, só digitar NVM install 6.
Ele vai baixar e instalar a versão do node 6 junto com o npm3.
Então é bem conveniente e fácil de instalar no versões e de mudar de versões.
Se você dá o npm list, ele lhes distas versões que você tem, certo?
Note que a gente está usando agora a versão 6 com o npm3, certo?
Então esse é o npm.
Estalamos o node no Linux, no vunto, na minha ocasi versão 17.10.
E usamos a npm para instalar versões diferentes do node.
Se quiser ter mais informações de como usar o comando, dá uma olhada aqui no page no GitHub.
Tem várias maneiras de usar o padrão e se pudir antes, certo?
Então até a próxima.


0009-01 [Ubuntu] Instalando o Node com NVM

[Ubuntu] create-react-native-app

Depois de ter instalado o node usando o NPM, nós vamos agora instalar o módulo de NPM
chamado Create React Native App.
Esse módulo nos permitirá gerar projetos de React Native de maneira conveniente.
Vamos lá e usar o NPM, NPM install, traço de create react native app, certo?
E ele vai instalar esse comando globalmente.
Só um detalhe, eu estou usando node versão 6 com o NPM 3, certo?
Você também pode usar o yarn para instalar esse módulo.
Certo?
Depois de ter instalado Create React Native App, basta digitar o próprio nome,
seguido do nome do projeto para ser gerado.
Por exemplo, projeto de amostra.
Depois que digitar isso, vai criar um projeto de amostra com o nome da pasta sendo o nome do projeto.
Como esse cara demora um pouquinho, eu já fiz aqui na outra aba do meu terminal, certo?
Na verdade, ainda está fazendo.
Então, ele instala várias coisas aqui para poder gerar o projeto, certo?
O node que está criando o projeto aqui, certo?
E depois de um tempinho, o projeto termina de ser gerado.
Quando o projeto for gerado, ele vai dizer os comandos que você pode usar para iniciar o servidor de desenvolvimento.
Se você já tem o Xcode ou o Android Studio instalados, você pode rodar os simuladores daqueles caras, certo?
No nosso caso, a gente só vai querer rodar o servidor de desenvolvimento.
Isso a gente vai fazer no próximo vídeo, certo?
Então, a gente vai dar um CD para o nome do projeto que for gerado e aqui estão os arquivos.
Então, até a próxima aula, onde a gente vai aprender a rodar o servidor de desenvolvimento e usar o Xcode para poder rodar o aplicativo.
Até mais!


0009-02 [Ubuntu] create-react-native-app

[Ubuntu] Rodando o Servidor de Desenvolvimento

Depois de ter gerado o projeto usando o Create React Native App, a gente agora vai instalar
todas as dependências necessárias para rodar esse projeto.
Então dentro do projeto, a parte do projeto a gente vai dizer NPM, install.
A gente vai instalar todas as dependências necessárias para poder rodar esse projeto.
Certo?
Eu já fiz o NPM, estou aqui na outra aba.
Depois de fazer isso, agora a gente está preparado para poder rodar o servidor de desenvolvimento.
A gente só fala, só fala NPM, Start.
Vamos ver o que aconteceu.
Ah, porque eu estou usando o botão Ubuntu aqui, versão 17.10 e eu não tenho.
O Watchman está dando esse erro.
Então se você tiver esse erro aqui, quando você der o NPM e Start, e te mensagem, unable
to start server, está dizendo você deve instalar o Watchman ou rodar os comandos seguintes.
Certo?
Se você quiser instalar o Watchman, vai resolver o problema.
No meu caso, eu não vou instalar o Watchman.
Eu só vou rodar esses comandos aqui para poder deixar tudo certinho para o projeto
do React Native rodar esse servidor de desenvolvimento.
Certo?
Então a gente só vai copiar e executar esses dois comandos usando o Cess CTO.
Tá bom?
Então vamos lá.
Vamos digitar sudo.
Você vai precisar do sudo, certo?
Cess CTO.
Deixa eu dar um clear aqui.
Cess CTO, traço WFS.inotify.max.usur instances.
Eu posso apoi mil e vinte e quatro.
Show.
Mostrar você melhor aqui.
sudo.cess.tl, traço WFS.inotify.max.usur instances dessa maneira.
Aí depois faz quase a mesma coisa.
Cess CTO de novo.
Traço WFS.inotify.max.usur watches.
E aí você põe 12.288.
Certo?
E com isso não vai ter mais problema quando você der o NPM start.
Certo?
Então vamos continuar e dar o NPM start de novo para poder rodar o servidor de desenvolvimento.
Então vai começar o Packager.
Aí vai mostrar quando terminar um código de QR.
Nós vamos usar esse código de QR para poder linkar com o Expo que vai estar rodando no nosso dispositivo.
Então você vai pegar o seu celular ou seu tablet que está rodando o iOS ou o Android.
Você vai instalar o aplicativo do Expo e rodar esse aplicativo.
Aí você vai escanear esse código aqui, QR, certo?
Aí ele vai linkar com o seu aplicativo.
Aí você pode começar o desenvolvimento, o código que você muda no seu computador e vai repletear aquela mudança no seu dispositivo.
Isso que a gente vai ver no próximo vídeo, certo?
Então com o NPM start já rodando aqui o servidor de desenvolvimento, você vai obter esse código QR.
Nós vamos usar esse código próximo vídeo para poder linkar com o dispositivo, certo?
Se você não conseguir rodar, usar o código QR que também pode usar o link aqui do IP, certo?
Então até a próxima!


0009-03 [Ubuntu] Rodando o Servidor de Desenvolvimento

[Ubuntu] Expo no Dispositivo Móvel

Depois de ter executado NPM Start para rodar o servidor de desenvolvimento do React Native,
agora só basta a gente instalar o aplicativo do Exo para poder linkar o código do nosso computador
para o aplicativo que vai rodar no próprio dispositivo. Então, vamos lá? Eu tenho aqui
um dispositivo que roda Android e um dispositivo que roda iOS. A gente vai lá, no caso do Android, por exemplo,
vai na Google Play, na Play Store e você vai buscar pelo aplicativo chamado Expo. Você vai instalar esse aplicativo chamado Expo, certo?
No caso do iOS, é a mesma coisa, buscamos Expo e instala o aplicativo.
Depois de instalar o Expo, nós vamos lá e rodar o Expo, certo? Então, deixa eu abrir o Expo aqui no meu
dispositivo, Android, vai dar lá o Expo. O que a gente vai fazer? A gente vai scanhar aquele código QR do terminal,
certo? Então, vamos lá? Deixa eu me movimentar aqui para o computador. Vou pegar o dispositivo, estou aqui na frente,
pelo computador o código QR, certo? Rodando aqui no Ubuntu. Eu vou clicar aqui no scan QR code no Expo e vou rodar lá para a escraninha.
Opa! Acho que a minha câmera não está...
Estou na ano, não...
Aí, pronto. Abriu aqui o Expo no meu dispositivo, a câmera vai scanhar o código QR, certo?
Então, scanhei.
Depois de ter scanhado o código QR, ele vai conectar esse cara aqui no um... o servidor de desenvolvimento que está rodando o seu computador.
Note que esse dispositivo aqui móvel está conectado ao mesmo Wi-Fi que o computador aqui, certo?
Na mesma rede de Wi-Fi. Por isso, pode acessar do dispositivo para esse cara aqui.
Então, a gente scaneia o código QR com o aplicativo do Expo. Aí, ele vai linkar o seu aplicativo lá, o seu código, para rodar no seu
dispositivo. Note que aqui o aplicativo já está rodando. Agora, vamos modificar o código ali e ver o que acontece.
Então, vou aqui no projeto e vou modificar esse arquivo chamado app.js. É o ponto de partido do aplicativo móvel.
E vou para lá e vou mudar o texto aqui só para você ver.
E vou mudar aqui. Estou aprendendo a desenvolver aplicativos móveis com React Native, dentro aqui do retorno da função render.
Então, a gente espera que depois de salvar isso, ele vai dar um auto reload.
E você note que já mudou aqui, já atualizou automaticamente no dispositivo.
Apareceu a nova mensagem. Estou aprendendo a desenvolver aplicativos móveis com o React Native.
Certo? Então, ele atualiza automaticamente a maneira que você modifica o código fonte aqui no computador.
As mudanças lá do computador são refletidas no próprio dispositivo usando o Expo. Certo?
Se você quiser abrir o menu de desenvolvimento aqui no dispositivo, você pode dar um chacoalhar assim.
E ele abrir aqui as opções. Pode debugar JS Remotely no navegador.
Pode desabilitar o Live Reload. Isso que a gente está usando para poder atualizar automaticamente.
Tem o hot reload e tem inspector e outras coisas. Certo?
Pode até dar o reload aqui, manualmente.
Então, esse é como se rodar o aplicativo móvel usando o Expo no próprio dispositivo.
Recapitulando, a gente rodou o NPM Start aqui.
Depois de dar o NPM install, a gente deu o NPM Start para rodar o servidor de desenvolvimento do React Native.
Ele dá esse código QR que você pode usar depois de ter instalado o aplicativo do Expo no seu dispositivo móvel.
Você escaneia esse código QR para poder linkar o código fonte aqui, o bundle JavaScript,
para ser enviado aqui para o seu dispositivo e ser rodado aqui com o aplicativo.
Com a maneira que você muda o código fonte aqui no computador,
vai refletir as mudanças no próprio dispositivo. Certo?
Então é isso, usando o Expo. Então, até mais. Tchau!
