NOVIDADES DO REACT NATIVE 0.76: DevTools, Nova Arquitetura, Performance e mais

fala pessoal Rodrigo Gonçalves aqui e nesse vídeo vamos falar da nova versão do react Nature essa versão traz várias melhorias e novidades que vão facilitar ainda mais a vida de nós e de quem trabalha com o react n e antes de eu te contar todas as novidades Deixa aquele like para fortalecer o canal e se você ainda não for inscrito clica no botão de se inscrever e ativa o Sininho para não perder nenhuma novidade sobre o desenvolvimento mobile com o react Nate Porque aqui no canal eu sempre trago as novidades para compartilhar com vocês então bora conferir o que que [Música] mudou a primeira novidade E essa é grande é a nova arquitetura que está habilitada por padrão Isso significa que a partir do react na 0. 76 qualquer novo projeto que você criar já vai estar utilizando essa nova arquitetura e essa é uma novidade grande literalmente porque foram 6 anos de trabalho até chegar a esse momento e agora ela tá pronta para uso em produção basicamente a nova arquitetura ela foi uma reescrita completa do react Native para melhorar a performance e oferecer uma base sólida para aplicativos nativos de alta qualidade inclusive coloca aqui nos comentários se vocês querem que eu grave um vídeo explicando essa nova Arquitetura em detalhes coloca aqui no comentário para eu saber [Música] e tem mais tá ainda falando sobre performance o metro que é o empacotador JavaScript que o react intive usa ele tá muito mais rápido Nessa versão agora o componente responsável por encontrar módulos de importação ficou cerca de 15 vezes mais rápido isso significa compilações mais rápidas especialmente PR chamadas warm builds que ficaram até quatro vezes mais rpas e só para contextualizar a primeira build ela é chamada de code build ou construção fria porque ela compila tudo do zero já a Warm build ela aproveita partes do trabalho que já foi feito ali como Cash módulos pré-compilados arquivos de configuração e E por aí vai e isso acelera o processo de build da aplicação então mais dois conceitos aqui para compartilhar que você aprendeu nesse vídeo caso você ainda não conhe [Música] e para fechar com chave de ouro essa parte de performance também temos uma novidade no Android com o react Native 0. 76 teve uma redução significativa no tamanho dos apps porque eles removeram ali muitos módulos deixando ali e basicamente ali o que é mais essencial e reuniu tudo em uma única biblioteca chamada Lib reactin it.

so e isso resultou em umas economia de cerca de 3. 8 MB no tamanho dos aplicativos Android e de quebra uma melhoria no tempo de inicialização que ficou ali aproximadamente de 15 milissegundos mais [Música] rápido agora outra grande novidade é sobre o react Native Dev Tools Já faz um bom tempo que o time do react Native vem trabalhando numa melhor experiência de debug e essa é a nova experiência de depuração com ele você tem um depurador completo ali baseado no Chrome Dev Tools que suporta ali pontos de interrupção inspeção depuração passo a passo e muito mais a integração com o react Native Dev toos ela também foi aprimorada com um destaque ali de componentes mais rápido também confiável até tinha né muita coisa mas não funcionava muito bem então Essa nova experiência trouxe muitas melhorias e de fato ele tá pronto ali para uso basta você abrir o Dev menu ali do seu app a utilizar a opção J ali na sua Cine inclusive vamos dar uma olhada nessa nova experiência aqui na prática eu criei um projeto react Native aqui pra gente ganhar tempo bem simples tá Eu só coloquei aqui um texto e eu tô centralizando aqui esse texto na tela e aumentei um pouco a fonte desse texto tá é só isso inclusive ó a gente pode olhar aqui em package. js que a gente tá utilizando a versão 0.

76. 01 tá muito bem eu vou ocutar aqui do lado pra gente ganhar espaço e vou abrir aqui o meu terminal eu vou executar aqui o metro primeiramente ó vou dar um enter e olha só a gente tá usando aqui a versão 0. 81.

0 tá E aqui vai aparecer as opções aqui pra gente executar mas eu vou executar aqui num terminal separado deixa eu executar aqui npm Run eu vou usar o Android já também deixei o emulador aqui aberto pra gente ganhar tempo eu vou dar um enter e vou esperar aqui a nossa aplicação abrir olha só já tá executando ali a nossa aplicação E aí vai aparecer o texto ali Centralizado na tela exato então só tem isso a o projeto então você pode também criar um projeto em branco aí um projeto novo né melhor dizendo E aqui olha só que interessante se eu volto aqui a gente tem algumas mensagens primeiro que a brid mode Ela tá aqui ah habilitado Então essa já é uma informação inclusive faz parte né da nova arquitetura não usa Bridge né para para se comunicar então tem uma comunicação ali eh entre a parte Nativa ali com a parte do JavaScript então a thread de interface do usuário e a thread onde tá rodando o próprio JavaScript e aqui eu quero chamar mais atenção além dessa parte de não usar mais a bridge que que faz parte da arquitetura antiga o que eu quero mais mostrar aqui é essa parte dos logs olha só os logs eles vão ser removidos do metro na versão 0. 70 27 eles já estão recomendando visualizar os logs pela Dev Tools né log é também uma ferramenta de debug né então eles já estão recomendando utilizar a Dev Tools então na 0. 77 a próxima versão a gente já pode esperar que isso também vai sair tá bom muito bem Olha só se eu apertar aqui o J ele vai abrir aqui para mim a Dev Tools olha só que legal aqui ó nessa parte de Welcome tem aqui a parte de documentação que é bem legal aqui embaixo ele tem a parte de console inclusive ele tá mostrando ali Ah o console aqui que também aparece aqui tá E é aqui que a partir da 0.

77 que vão ficar concentrado os logs aqui tem a parte para você visualizar só o console inclusive você pode limpar ele aqui e aqui se você volta pro pra parte de welcom o console Aqui de baixo também limpou tá então é o é o mesmo console aqui mas você tem ele em visualizações diferentes nessa parte de search é onde a gente consegue visualizar ó o conteúdo da nossa aplicação deixa eu aumentar aqui um pouco mais o zoom para você visualizar melhor a gente pode vir aqui ó nessa parte do local host aqui ó a gente pode visualizar dentro da pasta metro tá vendo ó o conteúdo da nossa aplicação app. test x que é ali o conteúdo do nosso app Olha só Inclusive eu posso vir aqui no meu App deixa eu fechar aqui esse terminal eu vou adicionar aqui uma deixa eu colocar até em em tela cheia aqui eu vou adicionar aqui uma função bem simples só pr pra gente testar vou adicionar uma função eu vou chamar ela de on submit e aqui essa função eu vou colocar que ela vai receber uma idade age Vamos fazer um exemplo bem simples aqui que que eu vou fazer um if ó vou fazer um if e aqui eu vou verificar se a idade é menor do que 18 eu vou utilizar aqui um Alert do próprio react Native vou pegar aqui um Alert e eu vou exibir aqui uma mensagem de alerta e aqui eu vou colocar um não ah não permitido por exemplo pro título e aqui eu vou colocar vamos pegar um exemplo de uma CNH né tirar habilitação então você ainda você ainda não tem ã idade para obter uma carteira nacional de habilitação pronto e eu vou fazer aqui um else porque aí o contrário disso eu posso até pegar esse Alerta aqui ó cont control ctrl v aqui aqui eu vou deixar como permitido e aqui eu posso trocar você ah pode você pode obter uma carteira nacional de habilitação pronto e aqui esse on submit a gente pode usar ele com um botão Vou colocar aqui um botão e vou colocar esse botão embaixo do texto o título dele eu vou colocar aqui como enviar e aqui eu vou usar o botão um do próprio react Native que ele vai renderizar com aparência Nativa aqui o onpress a gente pode chamar o on submit passando uma idade por exemplo eu vou passar a princípio 16 tá então tá aqui olha só se eu abro aqui o o meu Ah aqui o meu Dev Tools né Tá vendo que ele já atualizou ele já tá com código novo aqui então essa integração ela foi melhorada né nesse sentido Então ela já tá aqui o código novo e também a gente pode testar aqui ó deixa eu abrir aqui O emulador e deixa eu deixar o vest code assim olha só se eu clico aqui ó em enviar ele já vai aparecer essa mensagem ó não permitido a mensagem que a gente definiu aqui você ainda não tem idade para obter uma carteira nacional de habilitação Ok se eu troco aqui por exemplo para 19 ou para 18 clico em enviar Olha só você pode obter uma carteira então permitida O legal é que aqui se a gente vem aqui pro dev Tools a gente pode adicionar um Break Point Digamos que eu queira especional aqui ó venho aqui clico na linha cinco por exemplo tá vendo que ele fica com esse sinal aqui né Essa seta eh praticamente Azul então se eu venho aqui agora e executo ó deixa eu até deixar a Dev too assim do lado ó do emulador pra gente visualizar tá tirar um pouco o zoom Olha só se eu clico no enviar tá vendo que ele já parou lá inclusive ele aparece esse botão também é uma funcionalidade legal para você pausar aí ele para de de depurar o código ali né de debugar a nossa aplicação vou clicar novamente em enviar ele vai aparecer só que ao invés de pausar eu vou aqui pro lado tá vendo que aqui ele tá parado aqui na chamada da função aguardando eu dizer para ele o que que eu quero fazer eu posso vir aqui Ó nesses botõezinhos para controlar aqui ó tem a opção de step over então se eu clico aqui ele vai pra próxima etapa tá E aqui ele vai entrando dentro das funções aqui ele pula a função né então você pode ir brincando aí com aqui os controles do debug e tá vendo que aqui ó ele já parou nesse if uma coisa muito legal é que aqui do lado também você consegue analisar o escopo veja que eu consigo visualizar aqui ó Qual é o conteúdo da Ah aqui do do aid ó tá 18 isso é muito legal para você ah inspecionar o teu código né olhar ali para o que que tá passando de valores acompanhar o passo a passo da execução da tua aplicação tá então aqui você pode ir clicando por exemplo em avançar ó e aí vamos ver o que que vai acontecer olha só ele não entrou nesse nessa condição ele foi direto pro ELS né porque 18 não é menor do que 18 é igual então ele não entra aqui Veio para cá se eu clico aqui novamente no para continuar ó aí ele vai emitir ali o alerta tá inclusive também tem esse botãozinho aqui que ele resume se você clica nele ele basicamente para de debugar a aplicação E aí Segue a vida normal no app inclusive quer remover um Break Point né esse ponto de parada é só clicar nele quem não tem mais ó se eu clico aqui em enviar ele já não tá mais debugando a aplicação outra coisa muito legal é essa parte aqui de como componentes aqui nos componentes você consegue ó inspecionar a tua aplicação tá vendo conforme eu vou passando o mouse aqui ó ele mostra a estrutura ali dos componentes por exemplo aqui tá a view Aqui tá o toub p Aqui tá o Button Então olha só aqui tá o texto ali e aqui tá o botão olha só que legal dentro do botão tem um tob a Native feedback e dentro uma View e dentro da View tem um texto Olha que legal inclusive se eu trocar esse texto aqui ó se eu clico nesse texto tá vendo que aqui ele aparece ó conteúdo eu posso até mudar ele aqui por exemplo para ah validar ó vou dar um enter tá vendo que ele mudou aqui ó olha só que legal mudou o texto igual a gente faz no Google Chrome Essa é a ideia né da gente ter uma experiência de debug muito parecido com o que a gente faz ali na web tá bom inclusive se eu clic aqui no texto por exemplo eu consigo mudar o texto ó vou deixar só um um um Hello Vou colocar aqui uma exclamação por exemplo no final vou dar um enter olha só tá lá a exclamação vou tirar ela então você pode ó mudar o texto ó só vou deixar um Hello react Native Olha só enter já mudou o texto ali Inclusive essa parte aqui não ela não modifica o teu código tá se eu vi aqui na aplicação e recarregar ela ó vem aqui na onde tá rodando aqui a nossa aplicação recarreg ó aperto um R Olha só voltou pro como tava assim como a gente tem ali na web né então quando a gente modifica ali que a gente tá inspecionando se eu pegar aqui o texto né aqui o texto aqui ó e modifico ele eu tô modificando ele ali em memória né digamos assim mas não vai modificar lá o seu código é para você testar mesmo a sua aplicação outra coisa legal é que você consegue inclusive testar os estilos ó Font size aqui ó se eu quiser colocar um maior por exemplo de 32 ó vai aumentar o texto se eu quiser colocar uma nova propriedade Ah eu quero testar aqui como ficaria uma outra cor ó coloca aqui color enter e aqui posso colocar um um red enter Olha só mudei a cor então consigo também mexer na estilização em ah tempo real aqui para ver como vai ficando e de novo é testes aqui que a gente consegue fazer aqui na nossa aplicação tá agora vamos falar de estilos o react Nate 0. 76 ele traz duas novas propriedades que já são bem conhecidas na web que é o box Shadow e o Filter com o box Shadow Você pode adicionar sombras personalizadas nos elementos controlando ali a posição cor tamanho desfoque antes as sombras no Android por exemplo elas tinham várias limitações e agora isso foi resolvido Já o Filter a gente consegue aplicar efeitos como brilho saturação desfoque mas atenção tá no iOS ele ainda tem algumas limitações como por exemplo suporte apenas para brilho e opacidade mas aqui vai uma dica seja para você utilizar o box Shadow ou o Filter vale a pena conferir na documentação se tem suporte para o que você pretende fazer mas vamos dar uma olhada nessas novidades aqui na prática muito bem agora vamos dar uma olhada nessa parte de box shar na prática tá voltando aqui pro nosso código a gente vai adicionar aqui uma View Inclusive eu vou fechar essa View nela mesma não vai ter conteúdo nenhum eu vou aplicar uma estilização nela aqui que eu vou chamar de box agora vamos criar essa estilização aqui ó Box eu vou definir aqui para ela uma largura de 50 eu vou fazer a mesma coisa aqui pra altura também de 50 e aqui pra cor eu vou colocar como cor preta Black e vou salvar então vai aparecer aquele quadradinho como tá tudo muito colado ali uma coisa na outra no contêiner eu vou colocar aqui um GAP de 42 só PR as coisas ficarem mais distantes uma das outras ali tá então acho que eu vou até aumentar aqui para 100 essa esse quadrado aqui para ele ficar um pouco maior pronto muito bem agora eu vou aplicar aqui a propriedade Olha só de box e aqui eu vou aplicar Box Shadow e aqui a gente coloca como uma string tá posso colocar aqui ó 10 por exemplo 5 5 e vou aplicar uma cor por exemplo Red e Posso salvar tá vendo ó tá lá o nosso a nossa Box sharel inclusive aqui ó se eu quiser colocar por exemplo como Black também olha só já tá lá atrás tá vendo Então posso trabalhar aqui se eu colocar um 20 ele vai andar ali na horizontal Se eu colocar aqui por exemplo um 35 aqui ele vai andar ali na vertical e se eu colocar aqui por exemplo um tá vendo que aqui ele ficou mais sólido se eu coloco aqui por exemplo um ah se eu colocar aqui com cinco ó ele vai ficar mais embaçado Se eu colocar aqui com 50 tá vendo ele vai ficar mais fumaçado digamos assim né então aqui você controla ali ó esse efeito de espalhar ali A Sombra e aqui você você trabalha na posição na vertical e horizontal e aqui você define a cor que você quer aplicar pra sombra agora vamos dar uma olhada na parte de filtro para filtro eu vou utilizar uma imagem aqui do próprio react Native Vou importar a imagem eu vou adicionar a imagem aqui pra imagem eu vou utilizar aqui no sece dela até antes deixa eu já colocar aqui um estilo Style eu vou criar aqui um estilo pra imagem vou chamar aqui de image e agora no sece eu vou utilizar a minha própria imagem do meu perfil do github Até fica essa dica para você fazer isso ó usa o r aqui a gente pode pegar https 2.

bar bar agora github. com barra e agora você coloca o nome do teu usuário o meu usuário é o Rodrigo ppng e aqui você coloca ponto png para ele trazer a imagem tá agora eu vou pegar essa estilização de image e vou criar ela aqui vou colocar vou pegar aqui a mesma largura e altura coloco aqui salvo e olha só já tá aqui a imagem acho que eu vou colocar ela um pouco maior com 200 para ficar mais visível tá vendo ó Então tá pegando direto lá do meu github ó se eu clico aqui nesse link ó aqui ele tá buscando lá do meu github a minha imagem seix eu pegar aqui ó gth Hub olha só tá aqui a minha fotinha aqui no meu perfil Olha só então legal que quando você precisar do pegar e direto a tua imagem de perfil você pode usar essa URL aqui muito bem agora eu vou aplicar então o filtro aqui na nossa na nossa imagem aqui olha só eu posso aplicar aqui como Filter coloco entre aspas e aqui eu vou usar agora as funções de Filter por exemplo eu quero aplicar um Blur pro Blur quero aplicar por exemplo um BL um Blur de cinco e olha só salvei ele fica embaçado olha só que legal se eu colocar aqui um dois aí vai ficar um pouco menos se colocar um um fica um pouco menos se eu colocar um 10 ele vai ficar mais então você pode colocar esse filtro outro filtro legal além do Blur Ah vou deixar aqui deixa eu tirar esse essa função vou usar aqui mesmo é a Grey scale e aqui você pode passar uma porcentagem por exemplo se eu passar 80% e salvar Olha só então fica preto e branco ali se eu troco aqui por exemplo para 10 ó por.