Resumo do Vídeo sobre React Native

Muito bem, vamos continuar aprendendo React Native. Então, no último vídeo a gente viu como fazer o setup, configurar, instalar os modules e rodar a nossa primeira aplicativa, nossa primeira aplicativa, o móvel. Aí o React Native cria, genera esse aplicativo dentro para a gente que tem umas coisas aqui. A gente vai inspecionar, vamos dar uma olhada para ver o que está acontecendo aqui. Então, aqui é o meu simulador, vou chover aumentar aqui, fazer maior. Vamos botar aqui Live Reload. Então, quando eu fizer umas mudanças no meu código aqui, vai automaticamente atualizar o meu aplicativo. Isso é uma das vantagens de fazer um aplicativo móvel no React Native, que funciona como se você estivesse fazendo um aplicativo web, aí você pode só atualizar. Em vez de compilar as coisas e ter que esperar para todo o aplicativo, esperar ele compilar como se fizesse Swift ou Java para o Android. Então, aqui é só Reload, Command R, Command R. Mas eu botei o Live Reload, então vai automaticamente mudar as coisas aqui. Então, vou botar esse negócio no lado aqui, aí eu vou aumentar a tela aqui. Então, vamos ver o que está nesse arquivo. Eu sou primeiro de tudo no seu componente aqui, isso que a gente chama o componente, o componente chamado primeiro projeto, é o componente que vai, que é, primeiro lançado quando você roda a aplicação. Então, as primeiras coisas que você faz é importar o React, que vai ser o framework que a gente está usando. Então, importa o React do React aqui. Aí depois importa os componentes do React Native. Se você não sabe o que é que significa aqui, esse negócio é chamado de structuring, de estruturação. O que a gente faz isso para não ter que escrever aqui, por exemplo, esse componente aqui, se a fé é isso, mas o que é isso? Dentro do objeto React, tem um negócio chamado component. Aí, se eu não tivesse essa parte aqui, eu teria que botar assim. Porque na verdade, component é isso aqui. Dentro do React, do objeto React, tem outro chamado component. Aí, quando você faz o structuring assim, é mesmo quando você fala, eu quero que você extraia o component, o objeto. Então, dessa maneira, eu não tenho que ficar todo o tempo falando React.react. Eu só falo componentes. Mas na verdade, é parte do módulo do React, desse objeto aqui. Então, fica mais fácil escrever as coisas, não tem que escrever muito. A mesma coisa com esses outros aqui. Você está importando esses componentes aqui que está dentro do objeto, que é fornecido por esse módulo aqui do React Native. Então, eu não quero ter que digitar React Native. essas coisas todo o tempo. Então, eu só dou um structuring aqui dentro dos braces. E a gente pode falar view, text, e style, sheet, essas coisas sem escrever React Native. Entendeu? Isso aqui é o chamado componentes. Esses aqui são fornecidos pelo React Native e são os mais básicos, já são dados a você e você só usa eles para fazer essa aplicação. Mas a gente pode fazer os nossos próprios componentes, que é baseado no uso dos componentes que já são fornecidos. Então, aqui, depois de importar o React e o React Native, vem a classe. A gente está usando o ES6, o ECMAScript 6, que é a nova versão de JavaScript, que vai ser o padrão. Agora, todos os navegadores suportam o ES5, o ES5, mas já estamos nos... vamos mudar para o ES6 e o ES6 tem... agora tem classes, tem as classes no JavaScript. E ficam muito... as coisas ficam muito mais fáceis de digitar, não tem que falar function todo o tempo. É só botar um... esse negócio assim com a... com a... essa arrow function aqui. Ok, mas vamos ver, aqui é o nome do componente. Se o todo componente que você cria no React, você tem que extender do componente. Esse aqui é para fazer inheritance, que é essa classe que deriva desse componente. Se o todo componente que você cria deriva do componente, que é dentro do... que é parte do framework do React que a gente importou ali. Você vai sempre ser assim, classe o nome do seu componente, extends component. Aí dentro do componente vai sempre ter a render function, a função de render. Todo o componente tem que ter essa função e dessa função você retorna o que você quiser, que seja render para a tela, assim. Que é o mais básico... componente mais básico que você pode ter. Ter que ter... você dá o nome a ele e tem que ter a função de render. Aí você retorna qualquer coisa, pode ser... vamos fazer aqui só um texto aqui. Essas coisas aqui. Aí eu já salvei e já atualizo automaticamente aqui. Então você vê que o texto está lá porque não tem nenhum estilo. Está feio, mas não tem nenhum estilo. Mas você vê que... essa é a ideia. Vamos voltar para o que era antes. Já tem esses aqui, um template. Essa view que já fizeram aqui, com aqueles negócios. Vamos salvar para atualizar automaticamente ali. Já tem aí. Aí depois disso, tem aqui os estilos. Normalmente você põe aqui quase no final do arquivo. Você declara com const, chama de styles e cria um style sheet. Você usa esse componente que é chamado style sheet para criar o seu, a sua style sheet. Aí você passa um objeto que tem os estilos aqui, por exemplo. Esse aqui é o nome do estilo, aí você define como é que você quer esse estilo. Como é que você quer isso aí? Aqui no React Native, eles usam Flexbox para o modelo de, não é o box model, é o flexbox. Flexbox é uma alternativa nova para o modelo da Caixa, o box model, que é muito melhor. Então, se você quiser dar uma olhada, busca aí flexbox. Para ter um, ter um, para aprender o básico. Mas aqui nesse vídeo a gente não vai ver muito disso não. Então, você tem que aprender aí que esse vídeo vamos focar no React Native. Aqui em inglês, eu não suporto procurar um português aí. Que eu estou em inglês aqui. Caixa flexíveis, essas coisas, tem um MDN. Então aqui, sem projetilos aqui, aí no final normalmente você exporta o módulo ou, nesse caso, como é o primeiro componente, o componente que roda a aplicação, você tem que fazer esse app registry e registrar o componente. Aqui é o nome e você passa uma função aqui que retorna o componente que é feito aqui. Esse primeiro projeto aqui é o nome desse aqui. Esse aqui é o Errol Function, a função de, que é nova no ES6. Esse aqui é como se fosse...