Se for a mesma coisa, se fazer assim, FALA FUNCTION, aí assim, RETURN, como se fosse assim. Mas agora a gente não precisa mais falar function no ESX, que é muito... Descreve muito, então a gente só ponha os parênteses. Fica muito melhor agora, né? Então vamos voltar aqui para o Render Function, a função de Render. Então só relembrar que todo componente vai ter que ter no mínimo essa função aqui, você define retornando como é que você quer que essa cena aqui apareça no seu celular aqui, seu móvel, aplicativo móvel. Então aqui tem vários componentes que são usados aqui, já vem com o React Native, esse primeiro aqui vamos aprender o View. Esse View aqui é a mesma coisa que se você estiver fazendo um aplicativo web, mesma coisa que o Dev. Então se você sabe Dev, mesma coisa que eu vi aqui, é o container aqui. Então e o Text é como se fosse um span. Aí todo o texto que você tiver, todo o texto tem que ser dentro do Text, entendeu? Aí quando você retorna da função Render, você tem que sempre retornar somente um componente assim. Por exemplo, nesse caso tem um View, né? Vamos fazer assim. Tem um View, mas se eu tivesse assim outra View, tem duas Views, né? Mas esse caso aqui não pode no React Native, no React, né? Parte de React. Você sempre tem que retornar somente um componente. Então vai dar problema aqui, vamos ver. Se você veio aqui, leu erro. Leu erro aqui. Então, a dizendo aqui não pode ter isso dois juntos. Se você quer ter duas Views lá, você pode botar uma outra View e põe as duas dentro dela. Assim vai ficar bom. Sem problemas. E eu cliquei no negócio e agora vai abrir. Que chato. Esperar. Então, quando você quer pôr estilo, quer mudar aparência aqui, do qualquer elemento, quer componente, você põe o style igual, põe o braces aqui. Como o nome do estilo style sheet é styles, você põe styles dot do ponto, o contero, o nome da classe como assim. Mas não é CSS, não é CSS, mas como se fosse assim. Então o o está aqui, né? O negócio funcionou então. Vamos tirar isso e deixar como estava antes. Está aí. Então para os estilos, normalmente você define aqui, põe styles dot o nome do estilo que você definiu aqui. Nesse caso aqui vamos ver para esse texto aqui. Welcome to React Native. Então o estilo é welcome. Vamos ver o que é. Está aqui definido. O tamanho da fonte é 20. Aí está desenhando para alinhar o texto no centro e tem uma margem aqui. Então vamos mudar isso, vamos aumentar a fonte para ver o que acontece. Agora vai atualizar automaticamente que aumentou, muito grande agora. Vamos mudar essa margem aqui talvez, um pouco a 30 aí que acontece, muito grande texto. Botou a margem e agora o texto foi para a nova linha, o native, palavra native. Aí é assim que põe os estilos. Vamos ver essas instruções aqui, instructions. Centro, co aqui, vamos botar outra co aqui, vamos botar vermelho aí, red. Ver o que acontece. Mudou a color do texto, color em vermelho. Aí você pode adicionar os seus styles props também, vamos fazer um novo texto aqui, um novo texto. Aí sempre assim estamos usando o GSX. Isso aqui não é HTML, parece, não é, é chamado GSX, JSX. Parece o HTML, mas é na verdade o JavaScript, é funções de JavaScript que fazem isso. Aqui são na verdade funções JavaScript que invocam uma função do react, yeah, create element. Se você não tivesse esse GSX aqui, JSX, você tinha que digitar todo o tempo, react.create element. E você já sabe que já digitar isso aqui é muita coisa, fica muito mais fácil de ver, atualizar as coisas e fazer as coisas se você usar o GSX. Então a gente vai fazer o texto aqui, vou botar uma mensagem aqui, olá, mundo, essas coisas. OK, sem assento nisso. OK, vamos ver, botar o simulador, vamos salvar e vai automaticamente atualizar aqui. Tá lá, mensagem, vamos adicionar um style, vamos fazer style igual, aí põe os braces, aí vamos fazer styles, mensagem aqui. Vamos criar mensagem aqui, vai no styles aqui, adiciona o novo objeto, botar o nome e mensagem. Vamos botar a back ground color, com o texto para ser branco, vamos ver o que acontece. Tá aí. Fundo, fundo, azul, texto branco. Bota que eu sempre põe um vírgula aqui, só de precaução, às vezes a gente se esqueça e dá problema, então eu sempre põe. Tá tudo bem se você botar isso. Eu te dou conselho de sempre botar, sim. Algumas pessoas não gostam de ser muito... Vamos ver aqui. Mas a gente aprendeu aqui a adicionar um style no componente de texto e aprendeu a fazer o nosso, o que é a função render. Todo componente tem no mínimo a função render que retorna o template. Retorno como você quer que se apareça na sua tela, na sua screen. Aqui é o nome do componente, sempre deriva, extends do objeto componente, que é o componente parte do react aqui. E é isso por esse vídeo. Você pode mudar, adicionar umas propriedades aqui para os estilos e ver como é que aparece aqui para praticar e faz uns textos aqui, bota mais um aí. Bota um avio, sei lá, faz umas coisas aí e bota uns estilos. Vamos ver se funciona. Funciona ou não, né? Se lembra que eu disse que todo o texto tem que estar dentro do texto? Então vamos pô. Aí, aí eu usado de estilos, sei lá, pode também botar o estilo inliner. Se não quiser declarar o estilo aqui, pode fazer aqui. Então é só dar um objeto aqui. Está aqui style, igual, põe os braces, aí põe mais outro brace porque você tem que mandar um objeto, né? Põe um objeto aí e põe a definição, não vê, vou botar color red para mudar o texto, fonte. Colar fonte agora é vermelho, aí é só botar virro aqui e botar mais propriedades. Background color. Vamos ver, e alô. E aí? Só assim, normalmente eu não tenho espaço aqui, mas eu só botei espaço para você ver como é que você pode botar um objeto ali. E se você depois quiser tirar isso aqui daqui e botar lá no final do arquivo, só ir na style sheet, só recortar aqui, dar o nome a ele, sei lá, texto. Aí vai aqui, define texto e cola lá. Vou botar aqui, botar um virro ali, só de precaução. E aí, está aí funcionando. Então é, para esse vídeo é só, espero que tenha aprendido alguma coisa, só praticar mais aí, esses, usando esses componentes básicos, a view e o text, e a adicionando estilo com style e definindo seus próprios estilos aqui na style sheet que é criada no final. E vê aí, você pode adicionar coisas com border. Por exemplo, vamos adicionar esse welcome text, põe uma border, border width, nesse caso, para botar um border aí, como explicou. É, vai na documentação e vê os estilos, tem aqui, se você for no website, vai na documentação para o componente que você está usando. No meu caso aqui, vamos ver como é que muda o style aqui, cadê? Vamos ver o text, por exemplo. Está aqui todos os estilos que você pode aplicar, essas coisas. React nestiles. Vamos buscar aí e ver que o style, página aí, aí tem dizendo os exemplos aí. Pode também olhar na documentação do flexbox para aprender flexbox, essas coisas. Espero que tenha gostado do vídeo, muito obrigado por assistir e vamos praticar, hein? Tchau.