Resumo do Tutorial sobre Criar um Aplicativo React Native

Então, agora eu estou aqui de volta para o meu terminal e eu vou criar um novo aplicativo do React Native usando o comando React Native. Então você digite React Native, espaço init, espaço o nome do seu aplicativo. No meu caso, escolhi lista de posts redux. Aí, eu enter e espero até todos os arquivos serem gerados, tá bom? Eu já fiz porque demorou um pouquinho. Então, já tenho que, depois disso, eu já tenho a pasta aqui. Você dá um CD para a pasta. Está aqui os arquivos. E agora, dependendo do sistema que você vai usar, você dá React Native, Run iOS. Se for iOS, se for Android, usa Run Android. Eu espero que você já tenha configurado o React Native para sua plataforma, seja o iOS, seja o Android, tá bom? No meu caso, eu vou usar iOS. Eu também tenho configurado o Android. Normalmente, para mim, quando eu dou o Run Android, não funciona porque ele não acha o meu emulador do dispositivo. Então, eu gosto de abrir o Exco, o Android Studio, desculpa, e abrir o projeto no Android Studio e rodar o aplicativo de lá, porque normalmente o comando não funciona para mim. Então, você pode fazer isso se tiver usar Android. Se você não souber ainda configurar, vai para a página do React Native, Facebook, www.gethub.io, e clique aqui no Getting Started e selecione seu sistema e o seu dispositivo, o sistema do dispositivo. Se você quiser o Android, olha aqui, você tem que configurar o Android Studio e baixar todos os SDKs e essas coisas. Normalmente, no meu foi o 23, então eu tive que baixar o API 23 e o Build Tools, versão 23.0.1, tá bom? E também exporta a variável do Environment Variable, do ambiente, Environment, no seu Bash Profile ou BashRC, dependendo do seu sistema, e assim por diante. Agora vamos continuar. Eu já dei a rodada aqui no iOS e ele abre o meu simulador do Xcode e também o React Native Packager, que é uma tela do terminal aqui, React Packager. Está aqui o meu anulador, página gerada foi essa, tá bom? E vou dar uma olhada aqui no código, deixa eu só abrir, dá um Atom aqui. Eu uso o editor ARM, tá bom? Você pode usar o editor de suas escolhas, mas eu gosto do ARM, recomendo também. Aqui, já estava setup aqui, o Rio tinha fechado. Então aqui tem os arquivos, então tem um do iOS e tem um do Android, tá bom? O que a gente vai fazer primeiro? A gente vai deletar tudo, vai começar do zero, tá bom? Então, a maneira que a gente vai fazer o nosso aplicativo vai rodar nos dois sistemas, vai rodar em iOS, vai rodar em Android e vai ser o mesmo código, tá bom? Precisa mudar nada. Então, eu vou apagar tudo do index Android, se você estiver fazendo index Android ou iOS, mas nesse caso a gente vai fazer os dois, então delete tudo. Eu vou começar do index.ios, mas a gente vai fazer um negócio aqui que a gente vai só apiar para o outro arquivo, vai ser a mesma coisa para os dois, tá bom? Então, primeiro a gente vai fazer um import, vai dar um import no app registry, from viac.native. Tá bom? Esse app registry é para registrar a aplicação no ponto de entrada, tá bom? E a gente vai dar app registry register component, tem que dizer o nome do componente, tá bom? E o componente aqui. Nesse caso eu vou fazer um componente app e deixa eu fazer aqui uma pasta. Vou fazer uma pasta chamada essa RC, tapou todo o código lá, nesse SRC eu vou criar um arquivo chamado app.js. Esse vai ser o ponto inicial do aplicativo. Aqui a gente vai registrar o componente com o app que a gente vai criar aqui. Então, vamos fazer só um componente funcional, não é de class, então import react, from react, vai precisar do react, não precisa de component, tá bom? O que eu vou fazer? Eu vou criar um componente chamado app, vai ser um funcional de class, e vai retornar o template. Agora vamos pôr um view só. Texto. Como eu estou usando view e estou usando text do react native, eu tenho que importar. Import view, text, from react native. Tá bom? Porque eu estou usando esse aqui no template. E no final eu tenho que exportar default o app, porque eu vou precisar usar disponibilizar esse app para outros arquivos. Tá bom? Só recapitular aqui se você não entendeu o que eu fiz aqui. Eu já discuti isso no vídeo anterior, isso que é um componente funcional chamado functional component no inglês. E não usa class, porque eu não preciso, é só um template que vai retornar alguma coisa. Normalmente você só faz uma função aqui, função, argumento, normalmente é props, mas não precisa de argumento aqui agora. E o nome do componente, e eu uso const, porque a gente está usando a versão es6 JavaScript, sempre, tá bom? Sempre usando es6, não uso mais es5. Nesse caso, tá bom? E exporto aqui. Vamos salvar, tá bom? Vamos por o app aqui, vai ser o componente inicial. E como eu não sei, ele não sabe que app ainda tem que importar, mas onde é que está isso? É dentro do src, dentro dessa pasta src, é uma import app no diretório, presente, barra, src, barra app. Então, vai importar esse cara aqui dentro desse cara. E é o nome do componente, vou ver só o que eu tinha antes. Deixa eu dar um control comendo z aqui. Você note que eu tinha antes isso? Teve esse nome inteiro aqui, eu vou copiar, que é isso que é o nome do componente inicial. Lista de posts, redux, vou aumentar aqui. Isso que eu tinha antes. Tá bom? Então, vamos ver o que vai acontecer quando der o refresh. Tá aí, ooioioi está aqui, que não dá para ver, mas está lá. Deixa eu só aplicar um estilo aqui, para você ver. Vou dar um estilo para view. O objeto aqui vai ser... Flex, veja o que acontece. Aí, flex, adjustify content. Eu quero centralizar verticalmente, então vai ser esse. Aí, só para demonstrar que está funcionando e está aparecendo ooioioi. Tá bom? Recapitulando. No ponto de partida, arquivo, que é o ponto de partida. A gente só importa o app registry do React Native, porque a gente precisa disso para registrar esse componente como ponto de partida para o nosso aplicativo. É que tem o nome, que é na verdade o nome que eu criei a aplicação, e passa uma função de flecha com o componente app, que está aqui, importado, e esse cara aqui, que eu criei dentro da pasta src, e o componente funciona. E só mostra ooioioi. Tá bom? Agora, para a sua atenção, esse arquivo aqui já está feito, não precisa mais mudar, copia o index e copia para o Android. E salva. Dessa maneira, vai funcionar nos dois sistemas sem precisar modificar os arquivos. Vai usar o mesmo código, tanto para iOS como para Android. Tá bom? Agora, a gente vai começar a fazer todo o nosso código dentro dessa pasta src, e vai rodar nos dois sistemas.