Resumo do Vídeo sobre React Native

Oi pessoal, tudo bem? Nessa série de vídeos, nós vamos aprender como usar o React Native para fazer aplicativos móveis usando o JavaScript. React Native é um framework muito novo, foi lançado em 2005, ano passado. Já está na versão .32 aqui, e ontem estava 31, já mudou uma versão muito, muito rápido. Então, com React Native, você vai fazer aplicativos móveis usando o JavaScript e usando o React. React é um framework de JavaScript que é muito popular hoje em dia, foi criado no Facebook e agora todo mundo está começando a usar muito. Faz o front-end muito mais eficiente e mais fácil de manter o código. Então, vamos começar isso. Aqui é o website do React Native. Agora é só em inglês, não tem muita documentação em português, é coisa muito nova, como falei. Então, vamos passo a passo aqui para configurar. Primeiro, nesse vídeo, a gente vai aprender a configurar. Você vai precisar primeiro de tudo do Node, vai ter que ter o Node, que é tudo de JavaScript. Eu aconselho você usar o Chrome para ser o seu navegador. Estou usando o Chrome aqui. Vamos ver aqui. Vamos lá para o terminal e vamos começar a instalar as coisas. Se você quiser seguir no website, também dá no site deles aqui. Eu vou fazer para a plataforma do Mac, para iOS. Se você tiver outro sistema, só seguir aí. Mas esses vídeos, essas séries de vídeos, serão para iOS. Vamos ver aqui. Então, a primeira coisa, você vai ter o Node. Você tem que ter o Brua aqui, que é para instalar os pacotes. Package Manager, eu já tenho instalados. Se você não tiver, Google, busca no Google e instala. Então, vamos para o install Node, eu já tenho. Então, não precisa. Já tenho o Node aqui, a minha versão é essa. E depois, instala o Watchman. Também já tenho. Então, instala o Node e o Watchman. Quando você instala isso, a gente vai instalar o React Native. Vamos para o Global, NPM, install. Esse aqui para ser Global e React Native CLI. Eu já fiz aqui a instalação, demora um pouquinho. Se você tiver problema com permissão, acho que você tem que usar o sudo. Mas depois de instalar isso, a gente vai criar o nosso projeto. A gente vai usar o comando React Native. React Native vai dar o init, aí o nome do seu projeto. Vamos fazer o primeiro projeto. Vou falar que é o primeiro projeto. Você aperta aí, vai começar a criar. Eu já fiz, porque demora um pouco. Então, para economizar um tempo aqui, vamos assumir que você já tem. Depois disso, a gente vai entrar no diretor aí. Vamos ceder. Aqui, os arquivos que são generados pelo scaffold do init. React Native init e o nome do seu projeto. Depois de ir para a pasta do projeto, a gente vai executar um projeto com esse comando aqui, React Native, espaço run iOS. O React Native por um run iOS vai abrir o Xcode com o simulador do iPhone e vai também abrir essa tela aqui do React Packager. Então, vai ter essa tela e vai ter o simulador. Eu já fiz, porque demora um pouco no meu computador. Depois de fazer isso, você vai abrir o simulador. Eu mudei a tela para 33% para ficar menor. Se você quiser maior, só mudar para 50% e essas coisas. No simulador, você clica em tela, que é o Window. Aí vai Scale, 33%. O meu está em inglês, então. Seu deve estar em português. Vamos ver aqui. Depois disso, aqui tem o Package Manager. Aí está aqui. Se você quiser reload o app, o aplicativo é perto do comando R, comando R. Está escrito aqui. Para reiniciar o aplicativo aqui. A atualizar, comando R. Tem também o menu de opções aqui. Aperta comando D, que vai aparecer essas opções. Você pode clicar no segundo aqui, Debug GSM remotely. Que é para você fazer o debug no Chrome, no navegador. Vai aparecer a tela aqui. Você clica aqui e abre o console. Eu cliquei em Especial. Aqui vai ser o... Clicando no console aqui. Aqui, que você faz o debug. Se quiser fazer console log, essas coisas vão aparecer aqui. Por exemplo, vamos reiniciar aqui e atualizar. Você viu que já atualizou a página quando você faz lá. Tem também outras opções aqui. Você pode explorar. Muito bom. A inspecção aqui. O inspector. Inspector. Para você clicar no negócio e ver qual é o estilo que tem. Eu fiquei botar aqui. Menor. Eu cliquei naquele negócio ali. Tem um estilo. Aí fica dizendo as parâmetros aqui do estilo. Tem um text componente. Componente de text. E outro aqui. Aí tem os estilos aqui. Text line, margin. Essas coisas aqui. Não sei se você dá para ver. Vou aumentar aqui. Os problemas que a minha tela não vai para cima. Aqui eu. Então, é só isso para a introdução de como instalar React Native e fazer o seu primeiro aplicativo. Na próxima, a gente vai começar a modificar esse aplicativo demo aqui e vamos mudar as coisas e entender como é que funciona as coisas no código de JavaScript. Se você ver aqui no downls, um lista aqui, aparecem os arquivos. Como eu estou fazendo para iOS, a gente vai ver esse arquivo aqui. E vou usar o Atom. Então, vamos só abrir aqui só para você ver. Vou dar um preview para você que a gente vai ver no próximo vídeo. Demora um pouco, meu computador. Vamos ver. Está aqui. Então, aqui eu acho tudo o projeto. As coisas que você precisa suprar para agora são esse index. O index aqui. ponto iOS, que é o que a gente está fazendo. O que eu estou fazendo no iOS. Se fosse Android, você começaria naquele outro aqui, Android. Aqui é a estrutura do projeto. A gente vai ver no próximo vídeo. Basicamente, o que você faz é importar o React e o React Native, os componentes padrões aqui que já vem incluído. A gente faz uma classe aqui que é parte do ES6, a nova versão JavaScript, que vai ser adotada como padrão. E os estilos aqui no final, o que é que é só o negócio aqui para fazer o projeto executar quando você roda o programa aqui. Ele vai rodar essa classe aqui, esse componente que a gente fez. Então, é só isso para esse vídeo. No outro gente vai ver como o que é que está acontecendo nesse file, nesse arquivo index. Obrigado por assistir. Se você gostou, por favor, deixe nos comentários aí. Valeu, tchau.