Como ser mais produtivo nos projetos com React, Vite e Tailwind

[Música] bom então vamos lá então qual que é o nosso objetivo hoje tá o meu objetivo é conversar com você que já tá com alguns primeiros passos ali de react que você já trabalha com react ou até mesmo já fez algum projeto tá meu objetivo hoje não é construir um projeto do de ponta a ponta com vocês mas é te ajudar a montar um arquitetura mais pro então o que que tá acontecendo principalmente se você Tiver chegando no mundo do react Olha só tudo que eu vou te dizer aqui hoje não é para você se

assustar muito pelo contrário é muito mais para você ter um caminho mais bem definido de estudo entender para onde o mercado tá remando tá porque que acontece né eu tô vendo que o pessoal acaba consumindo muito conteúdo principalmente ali em YouTube tudo mais de react só que é o seguinte o mercado Ele tá muito diferente do que alguns conteúdos têm apresentado né não Atua dentro de pro a gente sempre tem focado nisso em criar trilhas aliás e que seja um conteúdo atualizados de mercado tá E aí o react ele sofreu uma grande mudança no começo

do ano tá então se você começou a trabalhar com react aí no começo do ano e assessor a documentação de uns tempo para cá vocês podem ver que a documentação ela tá totalmente diferente então ele tá trazendo mais um opinião dentro do seu projeto né E aí eu vou conversar um Pouco mais sobre sobre essas ferramentas tão andando em conjunto com react e eu preparei um super conteúdo aqui com algumas dicas para montar um projeto escalável tá E aí como nosso Foco hoje vai ser isso nessas ferramentas Tá eu vou apresentar essas ferramentas primeiro para

você começar a colocar um pezinho na água ali e também para você conhecer o que tá dentro do mundo Rex tá então Felipão Hoje a gente vai desenvolver um clone do Netflix ou de alguma outra coisa do tipo esse não é o foco hoje tá nosso foco é conhecer um pouco mais desses conteúdos que estão dentro do react porque a verdade é o seguinte o que vai diferenciar você de uma centena outra de deves ali que vão estar ali no processo seletivo é o que você sabe tá então o que você sabe é o que

vai fazer a diferença então quando o pessoal fala que conhecimento é poder eu acredito nisso mas eu também acredito que Conhecimento aplicado é o que de fato é poder ali tá E hoje Renan que que eu vou trazer para o pessoal eu vou conversar muito ele sobrevite tá então para quem nunca ouviu falar Então a gente vai entender melhor ali o que que é o White a gente vai entender também conhecer a biblioteca do taylondy que é uma das principais biblioteca que está sendo utilizado no mercado agora se você já ouviu falar ali no Bootstrap

ali é um forte concorrente ali do strep que sim Tem ganhado uma adição muito grande e já é muito comum que você vê nas vagas aqui brasileiras aqui então e outro ponto ali que é importante de falar é questão de produtividade eu sei que tem muita gente que fala Putz desenvolvedor tem que trabalhar com Linux e tudo mais eu vou mostrar algumas dicas de produtividade para quem está no Windows tá eu sou grande defensor aí a Diamante da Microsoft né bem sabe então eu trouxe também desse conteúdo algumas Dicas para você que utiliza Windows ali

para você acelerar ali o seu Fronte com algumas dicas ali de powershell tá então esse é o nosso Foco hoje se você já sabe react tá na hora de você dar um segundo passo vamos um pouco além ali porque chegou a hora de você começar a ganhar produtividade no seu trabalho quer fazer muito mais por menos tempo a gente vai Construir ali um esquema ali de um projeto que vai lembrar muito ali o feed do Tik Tok mas o meu objetivo Final é te mostrar como um conjunto de ferramentas pode acelerar o seu desenvolvimento react

a gente vai ver algumas das Ferramentas e tudo que tem de mais novo dentro do ecossistema e ainda por cima eu vou te passar algumas dicas para você deixar do projeto ainda mais pro então se você ainda tá criando projetos reacts ali com Create app saiba que existem soluções mais novas de mercado e muito mais performáticas a gente vai ver um projeto react criado Com o Wright que hoje é o principal se é ali para você criar projetos react além disso a gente vai estar utilizando Type script e a gente vai utilizar o nosso projeto

ali de ponta a ponta sem digitar uma linha de CSS isso porque a gente vai utilizar a biblioteca do Tay Wind que é uma biblioteca ali muito parecido com Bootstrap que vai te ajudar a estilizar o seu projeto ali com vários códigos para prontos e para que você consiga ganhar produtividade na hora de acordar Um projeto react a gente precisa passar por quatro etapas ali no primeiro momento é preparar o seu vs Cold para isso a gente vai instalar algumas extensões que vai ajudar ali na hora da gente desenvolver aplicações react de uma maneira muito

mais produtiva a gente vai estar na extensões para trabalhar especificamente ali com a técnica de Paul CSS Conta aí o índio e também a gente vai instalar uma extensão de Snipes que para você que não sabe são Justamente ali pequenos argumentos ali de código ele que quando você digita ele substitui por um montante de código então isso aumenta muito sua produtividade além disso a gente vai instalar o virth para você que não conhece o vai tirar uma ferramenta unificada de selar para que você crie projetos ali front-end onde você pode resgatar da internet alguns templates

que já começar a cobrar em cima e na nossa terceira etapa ali a gente vai Configurar o nosso Tale Wind no nosso projeto para a gente aproveitar o poder de ter ali uma folha de estilo para pronta só para a gente consumir e por fim ali na nossa quarta etapa eu vou te mostrar um comando para você ver que aquela telinha preta do seu computador ela é sua amiga e ela esconde um poder que eu tenho certeza que você não tá explorando e poderia fazer muito mais coisa editando bem menos código vamos junto nesse projeto

[Música] e claro para que você se torne uma máquina de produtividade o seu melhor amigo que houvesse code também tem que ser uma máquina de produtividade E para isso a gente vai estar lá algumas extensões para poder ajudar a gente nesse percurso e também dar algumas funcionalidades a mais para o nosso vs code então se você não sabe basta você clicar aqui ó nesse desenho onde tem essas caixinhas aqui e a gente já tá Pronto aqui para procurar qualquer extensão e a primeira extensão que a gente vai procurar é a do react Snipers caso você

ainda não tenha ela instalado Eu recomendo essa versão aqui do Burke Holland tá que que essa extensão faz sabe quando você digita começa a digitar alguma coisa ali no seu editor de código ele já aparece uma sugestão que você só Dá um enter e ele Auto completa aquilo para você então ele torna esse processo com react ainda mais prático porque Porque basta você digitar por exemplo ffc e ele já vai criar um componente funcional vai criar toda aquela base de código então com três letrinhas Você já quer aquela base de código e isso por si

só agreguem muito ali na velocidade na hora que você tá programando e como a gente também vai trabalhar com uma biblioteca em específica que é UTI Wind a gente também vai estar lá a biblioteca específica dele que é o twind CSS interessante ele que vai ajudar né já Que o índio por padrão ele não tem esse autocomplete você vai utilizar tem o índicess inteligência já para ele entender para você houvesse code sugerir ali quando você tiver digitando seus comandos com t e Wind então isso também Vai facilitar na hora que a gente tiver utilizando essa

biblioteca de estilização e outra extensão que você vai precisar também é a possess lengos de suporte ela que vai ajudar você a trabalhar com esse CSS pós processado Afinal o nosso CSS ele vai passar por um processo ali de ser retrabalhado então quem vai interpretar isso aí é essa extensão aqui que é o CSS lendas de suporte e por fim a extensão que vai fazer né Essas conversões do nosso CSS vai ajudar a gente a fazer esse trabalho aí que é a auto prefixo né que ele vai fazer um passe do seu CSS e com

tudo isso que instalado Você já está pronto para trabalhar em um projeto react muito mais prático e claro para você tornar a Criação de projetos muito mais prático a gente vai utilizar uma ferramenta aqui que é o White que é o Generation frontchange tury isso porque o White ele é um conjunto de ferramentas para facilitar o desenvolvimento de front-end e Ele oferece algumas coisas que bem interessante para desenvolvimento frontiene no geral então ele tem um instante server Starter ou seja ele vai pegar todos os módulos do seu projeto e já vai iniciar um server ele

vai te dar Um servo de uma maneira muito prática somente comando ali ele vai subir um servidor Além disso ele tem a funcionalidade de Light Fast hmbr que é a ideia ali de você poder salvar um código e não precisar reinstartar o servidor para ver sua alteração ele já vai recarregar ali em tempo real servidor já com as alterações que você fez então é isso é o hot mode replaceme onde ele vai substituir o código que você tá editando já vai subir uma nova Versão do servidor sem você ficar sem você precisar ficar ligando e

desligando ele toda hora Além disso ele tem Fitness ricas né como ele fala então ele suporta tudo que tem de mais novo como pepscript jsx coisas que você pode trabalhar com CSS que é o que a gente vai utilizar que esse SSS pós processado e claro uma das coisas aqui que você vai ver que é uma diferença muito grande caso você ainda esteja utilizando o Create react app que é o otimizard build onde ele vai sempre Construir modelos de template de projeto para você com tudo que há de mais moderno e otimizado você vai ver

que a diferença de tempo na hora de criação de projeto é muito rápido além também de ter vários plugins universais que você pode dar uma estudada e ver mais do que a comunidade que está fazendo também para estender os poderes do vite além de fully Type apis né então ele é uma programação ele fala que ele tem uma programação aqui flexível né com apis Chipadas em taip script então tudo que você precisa trabalhar do vite é muito bem feito para outros desenvolvedores mas vamos ver na prática como é que a gente utiliza esse carinha aqui

e para que você comece a trabalhar com ele agora mesmo você vai acessar essa parte em lugares tarde que inclusive é o nome de um quadro aqui do Jailton então ele vai te mostrar tudo que você precisa para poder começar de fato a trabalhar como vai e quando a gente olha aqui ele Fala os templates que ele tem Felipão o que que é um template de um projeto basicamente ele é uma forma de um projeto pré-pronta para você só trabalhar em cima o que você também vai encontrar na internet como o nome de buller plates

e aqui Ele oferece alguns modelos padrões de start para o seu projeto desde java script Vanilla até Type script Então você consegue criar projetos ali né com um tapescript com viu um projeto react um projeto react Que é uma variação do react com Lite e esbelt e o modelo que a gente vai trabalhar aqui é esse template aqui do react TS então ele já vai criar um modelo de projeto react com um arquivo de configuração do Type script tudo ali para pronto para a gente só sair programando vamos ver lá no nosso editor de código

como é que a gente começa a utilizar esse modelo aqui na prática e para você utilizar ele não se preocupe porque se você não tiver instalado na Primeira utilização que você tentar chamar ele o seu note pack de manager vai pedir para instalar e basta apertar Y ali de S tá então o que que a gente vai fazer a gente vai chamar o nosso gerenciador de pacotes do node que é o npm e vamos digitar cliente que é justamente a palavra de criar e Vamos definir aqui que a gente vai utilizar o White E aí

eu posso definir qual a versão do White eu tô utilizando E aí eu vou passar @letest e isso aqui me Garante que eu já tô utilizando a última versão disponível do virth na sequência eu coloco o nome do meu projeto então aqui no meu projeto aqui eu vou chamar de Tik Tok traço feed importante você não tem espaço no nome do seu projeto é interessante você manter aqui um separador em caracter tá depois disso aqui eu vou dar espaço e vou passar dois tracinhos que isso aqui é justamente para conseguir imputar alguns parâmetros e o

parâmetro que eu vou imputar aqui é O traço traço template onde eu para ele Qual o template de projeto ou seja qual forminha de projeto que eu quero utilizar e o projeto que eu quero utilizar é o react-ts ou seja um projeto de react utilizando tapescript quando eu faço isso aqui dou um enter ele já vai trazer lá da internet lá um template né uma forma de projeto react para pronto para utilizar utilizando pepscript e se você já utilizou o Create app você deve se Lembrar que esse é um processo mega e perder morado afinal

ele baixa um monte de pendências e quando a gente tá trabalhando com White ele já tá pronto aqui ele já trouxe toda a estrutura de projeto com arquivo script configurado já para a gente poder utilizar você não pode esquecer de executar Esse comando aqui que ele já fala para você para você entrar dentro da pasta do seu projeto então o que que você vai fazer você vai digitar ceder de Change Director e o Nome da pasta do projeto que você acabou de criar que é o Tik Tok feed então uma vez que você digita Esse

comando aqui deu um enter ele vai estar dentro da pastinha aqui do meu projeto com isso a gente já conclui a utilização do White só que além do virth a gente vai utilizar o tem o índio para a gente estilizar no nosso projeto de uma maneira mais prática vamos ver como é que a gente instala ele e para instalar o índio a gente vai no site oficial dele Que é o índicess.com então basta você acessar esse site aqui você vai cair Justamente na página oficial e assim como toda documentação começa pelo lugar start tá então

eu vou clicar aqui no garestar e aqui você já vai cair direto no nosso manual de instalação como a gente está utilizando um Framework eu vou clicar aqui na abinha dele Aonde diz Framework guydes Ou seja a instalação própria para frameworks e se você olhar com calma que ele tem os principais Frameworks e ferramentas e uma delas é justamente e aqui não tem segredo basta a gente seguir esse passo a passo de comandos aqui e a gente vai estar lá eu tenho no nosso projeto vamos fazer isso na prática como nosso projeto já está criado

o próximo passo aqui a gente está lá tem um índice e inicializar o arquivo de configuração então para isso basta você aqui ó onde tem esse ícone de prancheta aqui clicar nele aqui ele já vai copiar essas duas linhas de código Vamos colar aqui no nosso terminal e vamos dar um enter aqui quando eu faço isso o que que ele vai fazer ele vai baixar as três dependências que eu tenho o índicess o Paul CSS e o auto prefixo igual a gente tem lá nas extensões e ele vai dar um limite no t e o

índio ou seja ele vai criar um arquivo de configurações iniciais do Tay Wind Então vamos esperar ele instalar aqui e a gente já volta então ele já instalou aqui o Tale Wind aqui e também já criou Dois arquivos aqui de configuração que é o arquivo do Tail Wind CSS e o arquivo aqui de parte né que é o post CSS então quando eu venho na raiz do meu projeto você já vai ver esses dois arquivos de configuração e o próximo passo que a gente vai executar aqui é justamente falar para o nosso arquivo de configuração

do Tay Wind que a gente tá trabalhando com um projeto react tá então se a gente seguir aqui para o passo 3 dele ele vai falar para você Acessar o seu arquivo tem o índio que é justamente aplicativo aqui e dentro da parte dele aqui de content a gente vai ter aqui as configurações né de que tipo de conteúdos a gente está trabalhando e aí a gente copia essas duas linhas aqui afinal a gente está trabalhando com conteúdo ali do Index HTML que é o arquivo principal e arquivos né de JavaScript assim como o jsx

E tsx então basta eu colar aqui dentro do content e Salvar pronto a gente já tá falando para o índio que a gente está trabalhando com esses tipos de conteúdos e por fim e não menos importante é a gente adicionar direitinhos aqui do Tay Wind no nosso Style CSS tá então o que que a gente vai fazer a gente vai dentro do src dentro do Index assim como ele aponta aqui e copiar essas importações padrões aqui então vamos lá dentro do nosso src vamos lá dentro lá do nosso arquivo Index CSS e vamos colar ele

lá na raiz lá em cima então só vou colar colar eles aqui salvei e pronto se quiser rodar o meu projeto eu já vou ter um projeto react como a biblioteca de CSS aqui instalada pronto para a gente começar a trabalhar com o nosso projeto react e se você já fez outros projetos react você sabe que uma das coisas para você criar projetos escaláveis é a organização da sua estrutura de projetos e muito Provavelmente a primeira coisa que você vai fazer aqui na sequência e sair clicando aqui no sinal de mais e criando um monte

de pastinhas eu vou te ensinar alguns comandos aqui no terminal para você acelerar ali na hora de construir uma estrutura de projeto mais profissional eu vou passar uma estrutura aqui mas você poderia aplicar isso por qualquer estrutura de projeto que você quer aplicar e lembrando aqui eu tô utilizando o Windows tá e o terminal que Eu tô utilizando é o powershell e todo esses comandos aqui você tem análogos para ele no Linux inclusive você gostaria de ver conteúdos de produtividade para deves para Linux deixa aqui nos comentários Então vamos lá eu vou digitar aqui quais

pastas eu gostaria de criar e a primeira coisa que eu vou criar aqui é dentro do src uma pasta chamada isso eu vou passar vírgula aqui e passar também que eu quero criar uma pasta Dentro do src que é a pages tá isso aqui não é uma coisa do White nem do react nem nada isso aqui são comandos do Windows que você poderia utilizar para qualquer coisa e aqui que eu faço para dizer que isso aqui é uma expressão eu posso passar aqui uma barra Pipe e um sinal de percentagem para dizer que esse carinha

aqui é uma expressão então o que que eu faço eu abro o Chaves aqui e falo o que que eu quero fazer com cada uma dessas desses comandos que eu digitei Aqui então vou dizer que eu quero criar um diretório ou seja meio que dia né mkdir E aí eu represento eles com um cifrão underline que que ele vai fazer ele vai pegar cada um desses textos que eu digitei aqui e criar um diretório dentro dessa estrutura então quando eu faço isso aqui dou um enter olha só ele já criou as duas pastas aqui pra

gente aqui do Peixes e o componentes só que a gente pode evoluir isso aqui um pouquinho mais por exemplo para a gente Criar os componentes para criar o nosso layout eu já tenho alguns componentes semente e a gente sabe que para a gente criar eles ali a gente precisa ter um o ponto tsx ali dentro Então em vez de criar esse manualmente Vamos criar também via terminal Então olha só como é que a gente cria os nossos componentes ali com o arquivo index ali já para a gente deixar pronto só para digitar o nosso código

Então a primeira coisa que eu vou fazer é dar um CD de tings Director para entrar dentro do src E aí eu vou criar o meus componentes também utilizando aqui o Power Shell para a gente criar ele todos de uma vez só tá olha só o que que eu tenho aqui eu tô passando os componentes que eu quero criar então dentro da pasta componentes crie ou Avatar que nem o feed Card e o feed Grid e aí eu passo a expressão mkdir para criar make directory ponto e vírgula e a próxima expressão que é mi

de New item e o que para cada uma dessas Passinhos eu quero que você tenha um arquivo index.tsx então quando eu faço isso aqui e dou um enter Olha só dentro da minha pasta componentes ele já criou uma pastinha para cada componente e já criou um arquivo index tsx muito legal né bom mas eu preciso escrever Ainda o conteúdo se você utilizou a extensão do Snipers que eu te mostrei lá no nosso começo lá basta você digitar ffc e dar um enter aqui e ele já cria a estrutura Base de um componente react funcional para

você e aqui eu posso colocar o nome dele Avatar e pronto eu já tenho uma estrutura base de um componente react totalmente funcional e eu sei você deve estar olhando agora falar poxa Felipe mas o projeto ainda nem começou só que esse que é o ponto tudo isso que eu te mostrei aqui agora te adiantou várias outras coisas que além de você fazer um projeto que antigamente era muito mais pesado por conta dos arquivos agora você Já tem uma ferramenta que é o White ali para padronizar toda sua esquematização de template de projeto Você também

está utilizando o índio que a gente vai ver como se comporta no dia a dia que num projeto real para que você não precise escrever muito CSS Inclusive eu não vou utilizar CSS nenhum eu não vou escrever uma linha de corte de CSS para o nosso projeto também aprendeu como é que você pelo terminal mesmo um conjunto de arquivos ali para que a gente consiga Acelerar ali a estrutura do nosso projeto e claro você também adicionou ali a vantagem de você trabalhar com Snipers porque agora você vai ficar muito mais produtivo na hora de você

inicializar e criar novas partes do seu projeto então basicamente agora você só vai precisar se preocupar com a lógica ali que a sua aplicação tem que resolver e não mais passar tudo que ele tem porque você passava fazendo setup de um projeto criando pastas isso me pastas Mas vamos ver como isso aqui se comporta no mundo real em um projeto funcionando eu tô dentro da pasta src e aí eu vou editar CD de Change Director tá que é esse commandinho aqui e colocar ponto para ele voltar para a raiz do nosso projeto e vou dar

um npm e de install para ter certeza que ele baixou todas as dependências que o nosso projeto precisa e você vai ver que ele é muito mais rápido quando a gente tá trabalhando com White afinal ele deixa o nosso projeto Muito mais leve e aí eu já deixei alguns HTML prontos aqui então eu vou te apresentar o que que tá acontecendo tá então dentro do nosso index E aí já vamos ver como funciona o Tay Wind na prática tá Então olha só que legal eu tenho aqui basicamente uma div principal Aonde eu tô passando alguns

parâmetros para ele então ele recebe tanto o nickname quanto o Real name para a gente criar um Avatar e dentro dessa div eu chamo algumas classes pré-prontas do Tail ind tá então o que que eu tenho aqui por exemplo ao invés de colocar lá criar uma folha de estilo CSS colocando que o widget é 100% basta eu vir aqui editar tá w fu então o que que ele tá fazendo por debaixo dos panos Olha só o Tay Wind tá aplicando um estilo aqui de widget 100%. então eu consigo utilizar várias classes para prontas que você

consegue consultar lá na documentação e já estilizar o seu projeto inclusive se você quiser ver um conteúdo focado em Wind deixa aqui no chat que eu posso fazer passo a passo com você e te mostrar as principais classes que eu tenho em então eu criei uma dívida que basicamente com uma imagem e algumas classes aqui do Tay Wind então por exemplo para adicionar aqui um gradiente de cor quando eu coloco o Rover aqui ele já injeta tudo isso de código Então em vez de eu fazer um efeito e aonde eu tenho que editar todas essas

linhas de código basta eu digitar essa classe aqui Ó que é Rover dois pontos e o que eu quero que aconteça tá aqui ao invés de digitar todas essas linhas aqui para fazer aquele efeito de escala Eu Só adiciono essa classe e bom nosso efeito tá totalmente funcional eu tô apontando uma imagem que eu coloquei aqui e aí eu tô passando os parâmetros ali de nome né e o nickname para que a gente pegue esse conteúdo dinamicamente então toda a minha utilização eu não escrevi um arquivo de CSS Se você olhar dentro do Meu componente

eu não tenho nada de CSS assim como eu fiz também o fi de card é onde eu basicamente criei uma dívida ali com um conteúdo ali dentro de um H2 e um p um texto aleatório com parâmetro que eu recebo aqui e o feed Grid tá aonde eu basicamente ali chamam um Grid invocando cada um daqueles feed cards né para a gente ter uma tela de um Grid com 9 cards ali imitando aquele layout de feed do Tik Tok e lembrando o meu foco aqui é explicar para você que já trabalha com o React tá

Mas caso você esteja começando com react a gente tem outros conteúdos para você também tá E aqui que que eu fiz basicamente ali eu chamei na página do nosso feed page né eu chamei o nosso Avatar e o nosso Grid então o código ficou bem chuto E aí para a gente executar esse projeto agora na prática basta você ter habilitado aqui essa opção de npn scripts caso você não tenha habilitado no seu vs code basta clicar aqui com o botão direito habilitar o npm Script e da Play aqui nesse código aqui de deve então quando

eu faço isso eu dou um play ele vai subir uma Instância do servidor com a minha aplicação react então basicamente eu só tive que me concentrar na estrutura do HTML não precisa me preocupar com a estrutura do projeto com o setup do projeto se eu tô utilizando as boas práticas ou não ali porque ele já criou um bandol ali otimizado para mim e também injetou todo o código CSS para mim e vou lá Basicamente só preciso me preocupar com HTML e agora quando eu seguro o conto e clico nesse link aqui ele já vai abrir

a minha aplicação de maneira funcional então eu já tenho a aplicação rodando aqui em um servidor e olha só sem digitar uma linha de CSS eu consegui criar uma tela com efeitos de mouse over aqui então componentes reutilizáveis e criei aqui um componente básico Então a gente tem ali o que seria uma base de um projeto do feed do Tik Tok e se você Gostou desse conteúdo aqui eu vou deixar o link do github para você estudar o código HTML e até mesmo evoluir esse projeto aqui e deixar ele ali com a sua carinha mas

tudo que você precisa levar em consideração é que você já consegue pegar essas dicas e aplicar no seu dia a dia seja para utilizar o White ali para você criar o seu ambiente ali de maneira muito mais produtiva tem o índio para você estilizar o seu código então se eu abrir qualquer componente aqui você vai Ver que eu não tô importando nenhum arquivo CSS o tail Wind ele é uma ferramenta muito parecida com Bootstrap e ele tem ganhado cada vez mais mercado ele tem gerado muitas discussões tem pessoas que falam que tem Wind deixa o

código HTML mais poluído tem pessoas que ele falam deixa o código mais legível e existe até estratégias diferentes de como se utilizar o t e o ind mas tudo que eu te mostrei aqui são técnicas que você pode aplicar inclusive em projetos Que você já tá trabalhando ou até mesmo criar o costume como por exemplo aí criar toda sua estrutura de Passos com um comando a dica que eu deixo é para você salvar esses comandos que a gente digitou aqui seja em algum Sniper ali no seu Bloco de Notas seja ali no seu github porque

assim você consegue ser muito mais produtivo seja para criar a estrutura de um projeto seja até mesmo para adaptar ali o seu projeto para utilizar alguma biblioteca Afinal você Também consegue utilizar o seu CSS em conjunto com ti uma coisa não excluir a outra ou também para você começar a trabalhar com essas extensões de snipedes e onde que você encontra isso aí no dia a dia você vai encontrar em grandes empresas então por exemplo quando você trabalha ali com arquitetura de projetos Então imagina que você foi lá de planejou toda estratégia de como seu projeto

vai funcionar você não vai parar ali para ficar criando uma Passinho por passinho Você pode ter um script como esse que eu ensinei no power Shell uma vez que você definiu Como vai ser a maturidade ali do seu da sua arquitetura de criar Aquilo em massa principalmente porque muitas vezes você vai criar mais de um projeto você vai estar criando um projeto back end o processo do projeto ali frontchange então você pode utilizar essas dicas de porschel que eu te passei aqui inclusive se você curtiu essa dica a gente pode Trazer mais conteúdos de powershell

aqui pra acelerar o seu desenvolvimento assim como também para você criar projetos para padronizados ali partindo de um mesmo template é muito útil Então a gente tem empresas ali como por exemplo iFood o Uber a Amazon aí que estão preocupadas com a possibilidade do projeto então partir de um template otimizado e uma maneira padronizada de você seguir uma arquitetura de projetos é muito útil no dia a dia inclusive se Você já tem um projeto funcionando você pode ir lá e adicionar o índio também você pode ir lá e começar a retrabalhar ali a estrutura de

projetos ou até quem sabe para o seu próximo projeto ali para você não ter que fazer tudo do zero porque a gente sabe que setup é um momento ali que a gente gasta muito tempo também só que aquilo não agrega valor então para que você consiga se concentrar muito mais ali na lógica do seu projeto ter toda essa parte de setup Otimizada seja utilizando Sniper seja utilizando scripts de porshell ali para você automatizar ali a criação de uma estrutura mais complexa seja para você partir em cima de um template por isso aí vai te poupar

tempo para você trabalhar no que realmente interessa que é o seu projeto em si seja nada de marcação do HTML seja em alguma lógica que você precisa fazendo java script Então você vai estar muito mais focado aonde agrega valor e não preocupado em Investir mais tanto tempo como a gente para você fazer um setup de projeto E como você viu ele te dá ali um servidor ali com um hot World né então você consegue alterar e ele já vai fornecer sempre um novo servidor para você então espero que essas dicas tenham agregado muito aí no

seu dia a dia só que é o seguinte eu tenho muito mais coisa para falar para você vamos lá o White ele não é só uma ferramenta para você criar projetos Reacts se você tá começando em react em 2023 Eu recomendo você começar direto no White tá Ah Felipão mas todo mundo quando eu vejo o conteúdo mais desatualizados fala para criar com o Richard app e por muito tempo foi porque não tinham soluções tão melhores mas hoje por que que eu recomendo o White primeira coisa o time responsável pelo voo sabe o voo JS que

aquela outra ferramenta é responsável pelo Vibe e o que que é o legal do vai estar é que ele Poderia sim ser uma ferramenta exclusiva só para projetos voo Tá mas não ele é pais entre os reinos imagina com uma mesma ferramenta você poder criar projetos tá só o ângulo que ainda não tá aqui tá mas se domina uma é tipo já viu o Senhor dos Anéis que você tem um anel para todos dominar é uma ferramenta para todos dominar essa assim para mim por si só é muito legal e aí o que que acontece

Todos os projetos que você criam combate ele tem esse ponto aqui ó que é o otimizard build Felipão que que é isso ele sempre vai trazer para você um template de projeto com tudo que tem de mais otimizado então é como se você pegasse uma caixinha pré-pronta para você criar o seu projeto com tudo que tem assim de compatível com todos os navegadores que é melhor para você utilizar tá E para você que é mais nerd tá eu sei eu sempre sei que tem aquela Galera que é mais nerd jogava RPG para quem jogava Final

Fantasy tinha opção lá de otimizar que você já equipava esse boneco com tudo que tinha de melhor com a melhor combinação é a mesma ideia tá E aí qual que é o ponto aqui tá com esse projeto do virte aqui ele é um celular né Ele é uma ferramenta de linha de comando E aí qualquer ideia você consegue criar projetos padronizados com tudo que tem de mais otimizado essa é a primeira coisa que é Lindo do vait a segunda coisa que eu gosto muito do muito do White é isso aqui ó que é o light

Fast hmr E olha que legal que eu gosto de utilizar o meu vs code que transparente junto com essa funcionalidade aqui do hmr né que é o hot Model replacement né primeiro ele permite você fazer mudanças bruscas ali no seu projeto ali e o seu projeto ele vai recompilar e voltar ao servidor para você até mesmo em pequenas alterações tá Então Olha só eu vou fazer uma pequena alteração eu vou vir aqui no meu componente aqui eu vou vir aqui no meu componente de [Música] eu vou vir aqui no meu peixe vai para a gente

fazer uma mudança aqui mais brusca olha só que interessante eu vou fazer uma mudança aqui de Felipão e vou salvar Olha que legal se você reparar que que ele falou aqui ó as 20 horas sete minutos e segundos aconteceu Um update no arquivo dentro de peixes dentro de feed index a tsx o que que ele fez ele já entendeu que teve uma alteração já recuperou e olha só lá no fundo ó já mudou lá para Felipão um dia eu tá ou seja não precisa ficar parando toda hora e reinstartar meus projetos que que aconteceu antigamente

a gente tinha algumas ferramentas que quando a gente ele até carregava mas quando a gente tinha algumas mudanças muito bruscas a gente tinha que desligar o Servidor e ligar o servidor de novo o Watt ele é muito mais inteligente nisso tá em detectar onde teve alterações já recarregar o projeto do Servidor então assim isso para produtividade é excelente tá então eu poderia colocar aqui ó Então vou colocar aqui é por exemplo vou colocar uma coisa totalmente aleatória aqui Tá eu vou colocar aqui Anitta no Manchester City porque teve jogo no sítio hoje E aí tá

quando eu tenho alguma alteração ali no meu servidor Ele sempre vai tentar startar aqui tá E olha só quando eu tô como eu tô salvando ele aqui ó você vê quantas vezes ele recarrega na memória eu tô com um desafio aqui do delay por conta da Live tá por isso que vocês não não vão não vão ver na mesma velocidade que ele altera mas olha só aqui embaixo ó tá vendo Anitta do Manchester City tá Tô aqui embaixo ó vou só tirar aqui ó vamos colocar aqui Felipe tá salvei olha só ele já alterou e

aquele mostra quantas alterações eu tive ali naquele arquivo quantas vezes ele recarregou Isso então isso aqui por si só é uma ferramenta gigante de produtividade com react eu Felipe hoje não vejo sentido você criar um projeto sem utilizar eu não me vejo hoje mais quero um projeto do react com o cliente react justamente por conta dessa só essas duas vantagens aqui do de você criar um modelo otimizado já de projeto E se desse possibilidade dele retardar o servidor para você ali no Real Time para mim já não me faz trocar junta que eu deixo sempre

aqui meu vsco de transparente para mim assim produtividade sobe absurdamente Nossa Felipe mas deixar houve Transparente é uma dica de produtividade só para mim sim eu recomendo você experimentar Pode ser que você se adapte pode ser que não tá mas esse combo para mim faz total diferença na hora rodando E aí sempre Vai ter alguém que vai perguntar Felipão mas eu já tenho um projeto criado com o Create app eu consigo migrar você consegue migrar tá ele é bem tranquilo é basicamente tá eu tinha um projeto muito grande onde eu precisei migrar E aí o

que que eu fiz eu criei um novo projeto com White e o literalmente movi a minha surf de dentro do meu copiei minha chance do meu projeto com Create app e movi para o outro lado se o seu projeto tiver organizado dentro de uma Surf você Não vai ter encrenca no máximo ali Você vai precisar levar os seus arquivos confie que estão fora da series porque ele é totalmente compatível com um projeto Create app ali você pode inclusive no mesmo diretório tá isso é uma alternativa criar ali um White Project ali né da mesma estrutura

que já tá o projeto e depois só Apagar os arquivos que você não vai utilizar que é daqueles arquivos de banda que fica ali aquela aquele arquivo de sujeira mas Como vocês viram no vídeo vocês viram agora nossa vai ele é muito mais rápido que um que um que o chrishappchap Então olha só para eu subir o meu projeto se pode comparar com Ops Nossa eu levo às vezes um minuto sabe dois minutos aqui a gente levou 2.500 milissegundos sabe a diferença é absurda tá Então essa é a primeira grande dica aí para você que

tá trabalhando para um Change com react aí para que você aumente a sua produtividade na aliás um conjunto de Dicas né fala sério só isso aqui por si só já deu uma bela né ajuda Então para mim Felipão de transparente com Grazi um crente com substituir o cliente tá para a gente ter um projeto já otimizado não tem que ficar pensando muito E ainda por cima tem esse Hot World aqui para mim é maravilhoso tá vamos falar do agora tá e tem o índio Ele é bem polêmico tá então lembrando só tá para você acessar

a documentação do vait é o vai de js.dev lá você consegue Ver o White e vários plugins tá que dá para você deixar o seu vai te ainda mais do nada então você tem plugins só com coisas ali para o para react se tem e assim tem plugins da comunidade ele é bem tranquilo de usar não é aquela coisa que você tem que ler e aprender uma programação uma coisa extenso ele é muito isso E assim a documentação dele é curtíssima curtíssima assim de verdade numa sentada ali você se entende o que que ele faz

você consegue ler a Documentação ela é curtíssima direto ao ponto e o melhor anota que eu tô falando o White ele é Paz entre os reinos você vai dominar uma ferramenta daqui a pouco para criar projetos FIEC projetos viu e tudo der certo eu espero que algum Momento Angular também entre o bolo tá então para você que é Frontier Poxa Felipe as vagas agora tá pedindo react estão pedindo tudo assim vai numa ferramenta fazer isso tudo entendeu a gente tem tecnologia para isso tá então Não não tenha medo de migrar entre as tecnologias certo vamos

lá né vamos vamos para o índio Vamos explorar muito mais agora o mundo aqui do Tay Wind então que é o Tay Wind tá E por que que ele é parecido com Bootstrap mas tem suas particularidades tá e o que que ele tem de diferente do Bootstrap tá Então olha só tem o índio meu site ele tem dois sites que eu tenho em wi-fi para você ver alguns componentes e eu tenho o Índicess que eu recomendo para você começar tá ele é imagina o seguinte ele é como se fosse uma folha de estilo gigante ali

pré-pronta um CSS gigantão pré-pronto para você utilizar sabe porém modularizado tá que que isso quer dizer que que eu quero dizer com modularizado ao invés de ele carregar várias viés ali então o Bootstrap ele tá muito mais focado ele para você fazer estilizações e eu diria que eu tenho o Índio ele tá Muito mais focado ali para você de fato concentrar e construir o seu System designer ali o seu tipo de design daquele sistema porque eu vou abrir os dois aqui tá Felipão não conheço nem o Bootstrap e nem eu tenho um índio prazer já

é um bom momento não se preocupe tá Não se preocupe não há nada de novo debaixo do Sol isso aqui é só CSS escrito por outra pessoa tá Não tenha medo caso você nunca tenha visto tá Então vamos lá qual que é a grande Diferença o HTML o Bootstrap tá ele trabalha muito nessa ideia de você construir layouts primeiro ele veio resolver o problema de você construir layout de maneira rápida responsiva e que você tenha componentes para prontos né então ele Ele carrega muito HTML CSS java script tá então Toda vez que você injeta no

seu projeto você tá carregando muito mais do que só CSS se tá carregando muito jovem para os Componentes dele funcionar também algum CSS são bem carregados ali então às vezes você quer utilizar uma coisa e se acaba te trazer um conjunto veja bem eu gosto muito do Bootstrap não tô falando isso como mal isso aqui ajudou e continua ajudando e eu sou muito fã Já criei até temas dele não significa porque ele é ruim tá tudo tem o seu seu uso eu gosto muito tá um front Change bom não é um frontiend que defende uma

tecnologia e mete palma E outra guarda isso Frontier de bom é aquele que explora o que todas tem de melhor para oferecer para mim tanto Bootstrap contém Whindersson muito bons porém chega um momento ali que eu vejo que ele se diferenciam e objetivos diferentes para de ser defensor de tecnologia tá usa o que ela acende melhor para oferecer então o strep ele acaba carregando muitos que a gente chama de vieses né para o nosso front Chang né então você não tem só um CSS Você tem é muito HTML ali muito java script embutido não à

toa Quando eu olho lá na Bootstrap tá você pode ver que ele carrega ainda né Muito banda ou ali de Java script tá o que não é ruim antigamente o Bootstrap ainda tava preso ali ao depois de um momento ali na ele fez uma limpeza Agora ele trabalhou só que JavaScript Vanilla disse tornou ele muito mais rápido muito mais compatível com muitas coisas e menos amarrado com Passado então assim ele tá muito bacana porém surge a necessidade ali no frontchange ainda mais que o Frontier de criando muito mais responsabilidade se você já está se aprofundando

em frente você já deve ter percebido que o Frontier tá virando tá existindo um quase um submundo dentro do front Change ele de responsabilidades né Agora você consegue fazer até o conceito de BFF né que é back ange Ford né Você tem um conceitos De back end no front Change Então você tem lógica o CSS agora você consegue declarar variável você consegue fazer alguns controles que antigamente você só conseguia fazer com ajuda de jovens sabe e pós processadores então assim o front ele ganhou muito mais responsabilidades e o que que isso Acabou gerando necessidade o

frontinho dele acabou gerando necessidade de você deixar cada vez mais apertado as coisas tá e alguns Projetos até mesmo para você conseguir construir alguma coisa menos enviesada E aí é onde eu tenho o Índio ele se diferencia do Bootstrap tá então lembrando no índio não existe essa conversa de um ser melhor do que outro eles servem um objetivo em comum quer te ajudar na civilização do seu projeto porém chega um momento que os dois ali Eles tomam camisas diferentes aonde o Bootstrap está focado ali a gente trazer componentes ou seja algumas coisinhas Ali prontas ali

para você utilizar enquanto tem Wind ele foca mais nessa parte de ser como se fosse uma grande folha de estilização ali short tá então com pouco com poucas chamadas você chama partes bem grandes ali de CSS tá E aí o tail Wind ele é uma ferramenta assim que muita gente olhou torto tudo falou teu Índio ele polui o CSS mas na verdade é o seguinte eu tenho ele já É realidade no mercado é muito comum hoje em dia você pode pesquisar se vai abrir uma vaga tem muita vaga que pede muita vaca já tá pedindo

bootstrapta e o índio Felipe bom preciso me desesperar Não não precisa eu diria que se você tá utilizando bem um se você já tá utilizando bem O Boticário quando você for migrar para ter Wind vai ser instalado de dedos tá não você vai ter um dia ali para você entender ali como ele funciona mas você não vai perder Produtividade tá e quais são as particularidades do Twitch primeiro é que ele todo o conceito dele era essa ideia de você se modularizado então até a dele ele deixa uma instalação ó própria para algum Framework que você

está utilizando Ah vou utilizar com um projeto com um White Então olha só ele vai te falar né para como você que um projeto passo a passo e vai colocar no conteúdo Ali você vai dizer para ele o que você está Utilizando ele não vai ter sobrecarga ali de conteúdos tá então ele sempre vai ser alguma coisa focada para você criar o seu projeto ali então ele tem uma única responsabilidade te ajudar no seu System design ali com CSS ponto ele se propõe em ser bom nisso tá então você pode colocar os plugins de acordo

com que você gosta pode colocar temas junto com ele mas sem carregar nada enviesado e aí quando a gente fala na utilização prática do nosso taynho né que a gente Cai até nesse outro site que eu tenho Uai onde a gente tem também muitas demonstrações de componentes dele mas deixa eu voltar na nossa documentação vou clicar aqui na parte de dox aqui mas a gente cair lá no mundo dos componentes que ali a gente já cai um outro mundo tá então o que que ele tem aqui ó quando eu vou chamar alguma coisa ele me

dá uma maneira abreviada de eu escrever o meu CSS Então olha bem não é que o Tay Wind ele vai enviesar o seu frontiend igual o Bootstrap ele vai fazer o que ele vai te permitir escrever menos CSS para trazer mais coisa eu vou voltar lá no meu projeto vs code isso vai fazer sentido Então imagina o seguinte imagina que você tem que colocar por exemplo aqui no meu feed Grid tá aqui ó tá vendo nesse vídeo aqui ele tem um margem top tá de 10 pontos que que eu faria sem o ind eu teria

que vir aqui tá no meu page tá então vou vir aqui no meu page E aí o que que eu tenho que fazer Poxa eu teria que criar repara que eu nem tenho arquivo de CSS e tô utilizando o meu projeto tá eu teria que vir aqui criar um arquivo style.css teria que colocar aqui né pegar o nosso elemento através de alguns seletor então teria que colocar uma classe nele aqui ó então Poderia chamar toda vez que eu pegasse Vamos colocar uma classe aqui então colocar uma classe Vamos colocar uma ideia aqui só para misturar

ali com a classe Tá então vamos Dizer que eu coloquei isso aqui como conteúdo geral ali então vamos colocar aqui como man section e aí o que que eu tenho que fazer eu tenho que pegar esse mês section aqui tá como referenciar e colocar margem top aqui 10 como a gente já viu isso 1 milhão de projetos Olha o que eu tenho ainda faz tá obviamente que eu teria que importar o arquivo aqui também tá Só de eu colocar mp-10 Olha só vou só passar um mouse Aqui ó ó o que ele tá fazendo por

trás ele tá colocando o meu margem top tá porém Além disso ele está se preocupando com que ele tá se preocupando com a parte da responsabilidade então ele nem tá utilizando Pixel ele tá utilizando o Rain tá que é uma outra unidade de medida e isso aqui dá um equivalente a uns 40 pixels se fosse convertido ele já traz isso aqui ó tá vendo Então ele já me traz de brinde o quê Só de eu colocar aqui ó e ó eu tenho vários outros ó Mt- e aí eu tenho aqui ó tem um margem de

0 margem top margem top aqui de quatro pixels aqui já em Rain tá convertido então o que que eu tô ganhando de brinde ele tá me ajudando a construir um layout mais responsivo e escrevendo pouco CSS aqui eu já tô criando meu design System aqui então por exemplo aqui eu queria que ele tivesse 20 ali de altura tá então o que que eu faço eu coloco o mt5 tá onde ele tá colocando 1.5 de Rain colocando 20 Pixels eu não tenho que me preocupar e ficar fazendo conversão de Rain para para Pixel nem nada ele

já vai me dar de brinde isso aí né ele vai abstrair para você essa parte do de estar calculando essas unidades de medidas tá principalmente para a gente tá construindo layoutível ideal é que a gente sempre trabalha ali comunidade de percentuais então ele te ajuda muito nessa parte tá e qual que é a próxima parte esse cara que ele tem um único Propósito quer fazer uma arte top e ponto tá então diferente do woodstrap onde algumas partes elas carregam várias coisas e você fica meio que Rendido algumas coisas do Bootstrap no Tay Wind você pode

compor o seu layout da maneira que você quiser tá E outra coisa que é importante aqui de falar é que eu consigo trazer até mesmo algumas coisas que tem eventos ali tá nos nossos pseudos seletores então por exemplo eu vou pegar aqui ó O avatar tá vendo Sabe aquele efeito de Hover que eu tenho aqui ó quando eu passo o mouse eu tenho dentro do Tail Wind esses efeitos também olha só ao invés de escrever tudo isso aqui de CSS ó eu consigo ver o que que eu tenho a gente tá fazendo por debaixo dos

panos então por exemplo eu quero deixar ele animado ele quero dar um animed eu consigo jogar isso aqui no Twitch eu quero deixar ele totalmente arredondado com borders ali então eu já tenho um Raded full Aqui tá um Road full quero Putz Felipão mas eu quero passar uma unidade de medida específica que o que eu tenho Wind não tem Ele também me permite customizar tá eu consigo passar aqui ó entre colchetes aqui uma unidade de medida específica se eu quiser tá então tudo isso aqui que que ele tá fazendo ele tá abstraindo o CSS para

você então com um conjunto de classes pré-prontas do twind eu consigo compor qualquer layout tá então em vez de Escrever tudo isso aqui de CSS Eu só chamo essa classe aqui e já coloco esse cara aqui Além do mais ele permite tá ou tem Wind ele permite você fazer extensões para ele tá ele como eu faço uma extensão você consegue criar ali tá é classes para trabalhar em conjunto com pergunta você pode criar suas classes para trabalhar Inclusive tem um índio então o que que você consegue fazer você Consegue criar temas ali tá então por

exemplo eu consigo definir um padrão ali de hexadecimal que é onde eu chamar ele junto com o índio aqui ele vai substituir por isso eu posso definir ali padrões de fonte Families ali e dá apelidos para elas que depois eu só chamo por esse nome e eu consigo definir criar basicamente É como se você tivesse um Framework que te ajuda a criar um Framework Framework tá ou biblioteca eu defendo que o teu Índio ele já é um Framework tá não é uma biblioteca mas eu não vou entrar nessa discussão com você hoje tá mas tudo

que você consegue fazer contém Wind você consegue também incrementar ele Então imagina que você pudesse de uma maneira fácil é dar mais super poderes por ter o índio criar plugin para ele só utilizando CSS então você pode então você consegue criar padrão para o seu layout do seu sistema inteiro e depois chamar só por esses apelidos aqui né ou como a gente chama De ilhas né que são apelidos para você chamar um conjunto de CSS depois então isso por si só é assim é maravilhoso tá a Nicole falou uma coisa que é muito interessante isso

aí o pessoal usava muito mais muito mais muito Antigamente eu ainda vejo que era ter um arquivo nos projetos que era o Global CSS tá antigamente antes de mundo de Framework essas coisas tá era essa mesma ideia né a gente tinha um Global CSS que ele era basicamente um pouco de estilizações né Ou às vezes alguns times chamados de úteis CSS Nossa onde você tinha um CSS gigantesco com um monte de coisas tá e no mundo do de hoje em dia tá a gente tem de uma maneira muito mais organizada tá eu gosto muito desse

desse mundo principalmente porque você não fica amarrado com ele que você consegue estilizar eu tenho índio Felipão eu queria ter um índio tivesse ali alguma um padrão para chamar Fontes você consegue escrever só escrevendo CSS tá Então isso é um mundo da modularização onde você consegue começar a repartir ali o seu frontchange por responsabilidades então eu tenho eu tenho o índio ali somente com a responsabilidade de design para você estilizar ali o seu sistema e não mais a nível de componetização tá e eu também consigo dizer para ele como eu gostaria de ter apelidos para

o meu CSS consigo criar o meu CSS e dar apelidos para ele que é eles para ele de maneira Muito mais fácil e além disso obviamente tá você consegue se tem uma série de plugin de terror de criado pela comunidade tá eu consigo criar o meu padrão de projeto não tem Wind e compartilhar com meu time você compartilhar com outras pessoas tá eu consigo praticamente criar o meu próprio Framework para minha própria biblioteca em cima tem o índio e compartilhar com outras pessoas Então assim tem vários temas de surgindo E por que que as Empresas

estão adotando ele justamente primeiro por ele ser uma coisa é modularizada e por você poder criar o seu padrão em cima dele assim como aqui no exemplo que você vê aqui no site aqui você consegue criar os seus erros então eu consigo por exemplo criar um padrão de Blue com hexadecimal que toda a empresa utiliza então não importa se você tá programando aí da sua casa ou alguém tem problema no lado do México se eu tô utilizando o teu Índico o mesmo Arquivo de configuração que você toda vez que eu digitar Blue vai ser exatamente

aquele hexadecimal que nós definimos no nosso projeto Então esse assim por si só é o motivo pelo qual o teu Índio ele tem ganhado muita força tá no mercado a gente tem visto cada vez mais ele ganhar ali uma participação notória assim projetos com Bootstrap e sim se você estivesse perguntando é possível você utilizar O Bootstrap no mesmo projeto eu Felipe recomendo Sinceramente não seu projeto se a ideia dessas duas ferramentas é padronizar ali o seu desenvolvimento junto com o CSS se você tem duas coisas você não tem um padrão né E aí eu acho

começa a ficar muito a salada mas sim se você tem essa dúvida assim você pode utilizar os dois ao mesmo tempo tá outra coisa que eu tenho em de tem são os presets Tá o que que são os presets se você já Se aventurou um pouco mais no mundo ali de padronização já deve ter ouvido falar muito dos links né dos fixos ali que tinha que tem né para o mundo do Java script para o dot net para o Java e eu tenho ele tem esses padrões né ou seja esses Piece sabe quando você vai

lá no seu Instagram aí você escolhe um filtro e ele já deixa meio que não precisa de cores ali A ideia é mais ou menos a mesma só que para configurações de ter o índio Então você consegue já pegar um Preceito de configurações que tem publicar tem várias publicadas na internet tá que você já pegar e já utilizar Literalmente com uma linha você só vai vir aqui no arquivo de configurações e falar com o projeto citar utilizando tá isso por si só então eu consigo por exemplo utilizar o preset da daquele deu um exemplo aqui

está acquare aqui eu consigo utilizar todo aquele P7 carregar todo P7 com uma linha só para o meu projeto você consegue Criar o seu o seu Pixote então assim aquela ideia que você tem lá de filtros do Instagram sabe que você escolhe o filtro lá para tirar aquela fotinha Marota do seu café da manhã que eu tô ligado que você faz isso então você consegue ter isso agora no mundo do frontie Change O que traz muito mais facilidade como Frontier tá ganhando muito mais responsabilidade para um desenvolvedor Frontier de 2023 essas dicas de produtividade para

mim elas são Assim essenciais então a regra é você conseguir fazer mais por menos o que não mata a necessidade de você entender o que tá acontecendo por debaixo dos panos de estudar CSS HTML ali e o Java script tá deixa eu olhar o chat aqui deixa eu ver o que que vocês aqui é a lembrando aqui que eu tava falando dos colchetes né você não precisa ficar amarrado eu tenho o índio tá tudo que eu passo pelos colchetes eu consigo customizar então eu consigo passar um hexadecimal Personalizado por aqui tá tudo que eu passo

entre colchetes aqui ou então por exemplo 6 pixels aqui que eu passei que que é é um padding de seis pixels Tá mas ele também tem ó quando eu coloco P traço ele tem ó várias coisas aqui ó então ele tem o padrão de cores aqui ó já na escala eu tenho os borders tá vendo ó padronizados aqui ó para deixar um border purple então assim ele traz padronização para o seu layout ali e aí sim a gente tá conversando não só de Utilização mas é nível de design System né para você ter cuidado com

o padrão de sistema da sua aplicação e respondendo eu vi uma pessoa perguntou aqui sim o Tay Wind você consegue utilizar em projetos sem biblioteca nenhuma só com HTML JavaScript SS puro você consegue utilizar sim você também consegue utilizar o indico um ângulo com vu com qualquer um desses outros com leite com esvelt tá ele não tá amarrado nada a ideia dessas ferramentas Especializadas é isso é você modularizar o frontiene então ele tem a responsabilidade de estilização e design System ali você pode utilizar com qualquer coisa inclusive com HTML puro e tem o índio por

si só já dá para você fazer um projeto muito massa tá pouquíssimo tempo deixa eu ver aqui o que o pessoal tá falando aqui né usar três bibliotecas CSS Nossa Senhora que isso assim não tratada de loucura assim interna tá não além de não Identificar negócio até biblioteca não tem padrão padrão ela tem padrão é loucura tá vamos ver quem mais aqui o pessoal tá falando aqui tá até com você consegue tipo assim ele é muito versátil tá E outra coisa uma coisa que eu tô gostando muito do Tay Wind é que ele tem evoluído

muito rápido assim ele tem onde ele sabe ouvir a comunidade tá isso para uma ferramenta para nós que trabalhamos muito também com isso é muito bom Então por exemplo quando eu clico aqui em show cases você consegue ver por exemplo olha só quem tá aqui ó vocês conhecem essa ferramenta aqui ó esse tal de chat PT já ouviram falar dessa ferramenta aqui eu acho que já né Daqui a pouco conhecida agora tá assim isso aqui é um exemplo de ferramenta ali com um índio tá o shopping Fire também você tem o lume também que é

uma outra ferramenta muito conhecida tá essa linda impede aqui ó que é do Onde fica o Ranking ali da Netflix tá então assim ele não é uma ferramenta que vai enversar o seu Fronteira Quais são as reclamações que muita gente tem feito tá é que eu tenho onde ele deixa o seu HTML poluído Essa é uma das reclamações que o pessoal tem feito Ah mas ele ele deixa polido assim Isso é verdade Porém tem técnicas para você utilizar o taylond tá eu não é o foco dessa Live mas se você gostou desse conteúdo gostaria de

ver um conteúdo 100% focado e o índio até para Trazer técnicas ali de como utilizar o índio a gente de repente construiu um clone de alguma coisa do zero só utilizando o tail Wind tá deixa aí no chat aí marca lá depois né o pessoal da dieta falou queremos uma live de ter Wind com Felipão e aí eu vejo se vocês quiserem de fato a gente pode fazer isso mas assim ele traz uma premissa nova para o mundo do frontiend que é fazer mais por menos sem envezar o seu frontchange sem te deixar amarrado em

Nada tá então esse é o foco aqui do tailing Deixa Eu Voltar para o chat antes de eu voltar aí para a gente ir para o próximo top então bom o Márcio fosse só dar uma quebradazinha sim eu eu gosto de dar uma quebrada nas linhas assim porém algumas empresas tá já vou abrir meu coração para você algumas empresas elas não são a favor disso aqui que eu tô fazendo tá tem lugar que vai olhar e vai falar que isso aqui é legal porque fica legível Mas tem empresas que usam links modificadas ali aonde ele

jogam tudo isso aqui numa linha só tá de empresa minha empresa eu prefiro quebrar assim para mim ficou muito mais visual tá Então olha só eu tenho aqui ó mt3 tá 50 pouca coisa tá eu eu gosto de fazer isso eu sei que tem empresas que também fazem isso mas eu já vi tá caso que pessoas que não adotam isso aqui por padrão tá mas aí é aquilo é gosto como é uma ferramenta relativamente nova eu Acredito que o mercado tá passando pelo um processo de amadurecimento de como utilizar e de boas práticas ali dentro

do tailing tá então tem muita coisa aí que a gente vai ouvir falar eu topo tem muita coisa para falar tá e como fica a classe tem visto Ah isso é legal vamos lá Felipão fiz o meu layout utilizando eu tenho Wind fui lá meti um ter um ninja a dar com pau lá no meu no meu front-end como que Ele fica na hora que eu vou debugar esse código né Vamos lá eu vou abrir aqui ó botão direito inspecionar tá muito legal obrigado viu Nicole tá enriquecendo aí a nossa Live aí tá então ele

não passa por um processo de conversão diretamente tá o que isso significa né algumas ferramentas ali quando a gente trabalha ali com o CSS Quando você vai ver ele vai lá e substitui né aquelas classes pelas classes específicas ali né do que Você tá utilizando né então por exemplo se lá ele tá tipo sm-10 E aí quando você vai ver lá no tubos ali ele substitui ali e deixa um monte de estilização aqui às vezes até em Line né algumas ferramentas eu acho meio nojento ele não faz isso por padrão tá quando você vai lá

no débitos ele Você ainda vai ver as classes ali que você tá utilizando e vai ver a estilização que ele tá carregando ali do lado tá Tem prós e contras nisso tá eu não gosto muito quando essas ferramentas de civilização de jogos online não tá me vendo nenhuma na cabeça agora que faça isso a maioria que eu veja migrar quando eles transformam no CSS para jogar tudo CSS online isso é horrível Eu lembro que ali quem tava fazendo muito nessa medida Ali era o blazer mas não sei se ele ainda faz isso que ali junto

com o ambiente na internet então nem vou envisar a Live Com isso tá a gente tem outras também que eles eles jogam ali as classe CSS ele joga em live mas ele jogam ali de uma maneira mais organizada então ele não sofre um processo de conversão tá quando você for ali precisa deve tudo você vai ver exatamente as mesmas classes O que é ruim de um lado porque você vai ter que ficar você vai ter que consumir ali esse esse carinha aqui como se fosse o twind tá então você tem que estar com ele na

cabeça aqui então você Vai ver aqui que Ele carrega algumas coisas até que é desnecessária aqui não deve tudo tá então você vai ver que ele carrega algumas configurações que são the fold tá de maneira desnecessária tá não que o CSS padrão Não faça isso Tá Mas eu sinto que Ele carrega muito mais coisa tá sendo sincero porém contrapartida quando eu vou analisar aqui ele é muito deve like ali né ou seja o mesmo ambiente que eu tô vendo em produção a Mesma ambiente que o governo de deve tá então se eu confrontar o que

eu tô vendo aqui é a mesma coisa que eu vou estar confrontando aqui tá no meu no meu editor de código mas é aquilo que eu falei tem seus prós e tem seus contas Tá mas obrigado unicórnio tá enriquecendo aí a nossa Live vamos lá a Cristina fez uma outra pergunta aqui que ela foge um pouco do tema aqui de produtividade mas que eu acho muito legal de falar do Ecossistema react e aí eu vou até abrir aqui o site do react para a gente conversar Opa Isso aqui é uma outra coisa esse site que

eu abri por engano mas eu gosto muito também que é para você transformar svg sem componentes eu gosto muito dele ficar só uma dica a parte aí mas vamos lá é para responder a dúvida da nossa amiga Qual é o mais utilizado o contest E piá tá então vamos lá ambas as ferramentas ali Elas resolvem uma mesma situação ali que era o nosso problema ali de de ter um controle maior ali Principalmente quando a gente falava nível global de ter a gente controlar o Stories ali dos nossos componentes né da gente estar compartilhando ali informações

ali de um componente para o outro ali de você fazer de uma maneira muito mais organizada antigamente o react ele não tinha uma medida própria dele tá então era muito comum e outras Variações do hits então a gente tinha muita coisa tinha um ricoy também acho que o ricoy ainda é ativo também tá ele ainda ele ainda existe tá E ele tem a mesma premissa né de ser um Statement ou seja ele controlar ali estados ali de aplicações de rack de uma maneira mais fácil tá e o que que acontece a gente criou um legado

por conta do react não ter isso no artigo por um tempo a gente começou a Criar dependências dessas outras ferramentas tá então sim hoje eu ainda recomendaria pelo menos o Redux você saber como funciona se você quer ser um desenvolvedor ali dentro do ecossistema Aliete eu considero sim Válido por enquanto principalmente para dar manutenção em projetos Porque sim ainda é muito utilizado é o Redux tá porém se você pegar qualquer projeto foi construído recentemente o pessoal da preferência pelo contexto porque Primeiro por ele ser uma coisa ali que já tá dentro do ecossistema react então

se eu vier aqui dá um contexto Vamos dar um react conta eu vou eu vou entrar aqui na documentação legada isso aqui é a documentação antiga do react por conta dele tá mais dentro ali do ecossistema do react o pessoal acaba preferindo utilizar ele tá só que assim não mata o legado que a Gente construiu com lidax tá antes disso existir então sim o que eu recomendo se você não sabe nenhum aprende com um teste pii tá E só vai parar para aprender com isso ali caso você tenha necessidade tá porque muitas vezes você vai

ah falei pão não trabalha na área aí você vai lá vai trabalhar você nunca vai ver antes na vida isso estudou 40 horas não que você precisa estudar 40 horas tá inclusive se você gosta desse tema que se aprofundar mais de react a gente pode Trazer uma live com esse tema aqui tá mas eu diria hoje se você tem que optar por uma óptica sempre pela contente do ecossistema ali e caso você precise para dar manutenção em algum projeto mas olha que loucura que eu vou falar mas hoje em dia existe projeto Legado de react

e esse é o momento do mercado tá então o mercado tá olhando ali muito para o contexto e Piar vamos ver lá boa acho que ele já implementa o reset CS assim ele traz isso também aí isso é bem legal eu ainda prefiro fazer o meu reset CSS manual para ter mais controle sobre ele tá isso aí eu gosto eu gosto de ter controle sobre as coisas deixa eu ver se o pessoal tem mais dúvidas aqui antes de eu continuar aqui boa acredito que eu já respondi as principais dúvidas aqui pessoal tá falando o que

está acontecendo no mundo do react tá antigamente o que que tava Acontecendo você estudava react E aí começou a surgir o Next né que é justamente para você conseguir fazer algumas redações sem você tá batendo lá no back Angel toda hora né E aí começou a surgir o conceito de backing de né então o que que tá acontecendo no mundo do frontiend para você ficar atualizado com o mercado tá o front Change ele tá ganhando mais responsabilidade e responsabilidades que antes eram lá do backing E aí com isso você tem mais liberdades ali no Frontier

Porém você tem mais coisas para fazer na franquia de obviamente mais coisas para estudar então hoje quando você começa um projeto react ele vai te indicar ele ainda tinha Te indica ali porém ele vai sempre te indicar a iniciar um projeto react só que não mais um projeto react puro Ele sempre vai te indicar você iniciar o projeto react com um outro Framework Tá Então vamos dizer assim que agora que o ecossistema do react ele tá querendo uma dependência de frameworks o que por um lado deixa o franchinha de sim mais complexo é mais coisa

para estudar porém ele deixa mais prático na hora de utilizar isso não tem como negar então Toda vez que você inicia um projeto novo do react na documentação oficial ele vai te pedir para tomar três caminhos tá o primeiro é o do Next tá JS e não confundir com Mestre com s que é outra Tecnologia tá o remix ou o get tá então Toda vez que você criar um projeto react agora ele pede para você tomar essas três decisões você vai criar um projeto react legal tá então você está utilizando a biblioteca do react utiliza

também um desses três frameworks aqui tá então ele já indica E você já consegue fazer isso com um comando tá então por exemplo o Create remix ou até mesmo ali para o Nate ver ali né Create ele indica o exportar hoje em dia de verdade assim eu não consigo trabalhar com o react Native sem o x eu acho que ele traz muita facilidade e o hexa tá evoluindo numa velocidade absurda Tá mas vamos focar aqui no react para web tá então o Next tá que é justamente para você criar aplicações Olha que loucura então você

consegue criar todo um processo de rotas e de componentes mais inteligentes ali e que são renderizados e até mesmo que eles Têm boa parte da lógica deles do lado do clight o que isso te dá te dá mais velocidade ali na hora de ter fronteantes que são só aqueles Fontes que são Ultra carregados tem um monte de coisa e acaba deixando lento então assim o mestre ele é o projeto que veio para resolver isso então você tem menos chamadas aos servidor você consegue trazer um java script um Jason maior ali que imagina o seguinte imagina

que seu usuário toda hora ele tem que ficar Fazendo uma consulta lá no backing e trazer uma parte de um Jason de lá tá se você consegue trazer um gayzão estático ali para para sua para sua aplicação tá E você tem um componente que ele sempre tá consumindo aquele Jason que você já trouxe estático de uma maneira ali estratégica tá então você não precisa ficar indo lá no backing de toda hora então você você consegue resolver isso mas claro que o Next por si só ele não parou Aí ele começou a criar uma outra Série

de coisas então o modelo de rotas tá então nessa ele para resolver um problema simples foi isso que eu te falei e agora ele é um outro ecossistema por si só tá então você tem algumas estratégias de renderização igual tal te falando né de estática e dinâmica tá E assim de verdade Ele anda muito em conjunto com tudo que você já aprendeu ali em react então eu recomendo se aprender react assim fica tranquilo não utiliza nenhum outro Premier outra parte Aprendi que é um componente aprende ele a criar uma rota e depois você pode partir

para uma dessas sugestões dele tá e o Next tá você consegue basicamente criar aplicações ali que vão trabalhar ali muito em conjunto com o mundo do back end de uma maneira muito mais fácil tá Felipão mas eu tenho mais coisas para estudar Você tem mais coisas para estudar mas você tem muito mais poder de fogo na mão e diferente do que tem muita gente que prega eu não sei quem começou A pregar isso mas eu vejo muita gente falando isso ainda mais no YouTube Eu acho um pouco de informação se eu criar uma aplicação com

o s eu sou obrigado a publicar na versão não tá você não tá preso a versão tá eu não sei porque a galera tá distribuindo isso aí mas não você não ficar preso nenhum ecossistema tá do outro lado você tem o remix queridinho de muita gente tá eu tenho brincado muito mais com remix tá o remix E aí eu indico tá dentre os três que eu Vou te falar sendo sincero eu indicaria se você já sabe o react participo remix o remix ele traz uma um objetivo bem claro que é simplificar tá a sua maneira

como você constrói websites tá então o remix ali ele vai trazer algumas facilidades para o seu projeto react ali que também tem no Ness mas sem carregar tanta coisa igual o net está tá trazendo hoje em dia tá então quando eu vou lá para o remix você pode ver também que ele é bem bem forte então Ele traz uma estratégia de rotas também uma estratégia para você trabalhar componentes mas ele é conteúdo assim bem leve de você levar para o seu projeto eu indicaria tanto para projetos de baixo porte quantos projetos de grande Portes sabe

então ele cria tudo isso aqui de uma maneira muito mais simplificada com pouca coisa você consegue dar mais super poderes ali para o seu projeto react dentre os três é o que indicaria para você tá e do outro lado a gente tem o Get tá inclusive se você quiser algum conteúdo né desses três a gente pode fazer Live né de repente fazer uma Live para caramba qualquer ideia do Gueto imagina que você tem uma Landing page que ela é estática ou até mesmo um blog que você tem que entregar sempre os mesmos conteúdos Eles não

têm variação não tem que ficar passando muito parâmetro nem nada você consegue criar uma página que ela é dinâmica ao mesmo tempo que todo o conteúdo estático no Seu Frontier aquele pão cabeça explodiu o a dinâmico é estático ou você assobia Você chupa bacana não tem os dois tá não existe Então qual que é a ideia dele ele vai renderizar todo o conteúdo do lado do frontchange Então imagina um blog ele vai trazer todas as renderização do blog só que quando você clicar em um artigo por exemplo daqui uma postagem daquele blog Ao invés dele

é bater lá no back-end pedir alguma coisa ele já vai ter todas as Informações do lado do frontchange então eu recomendo isso aonde em aplicações estática tá que você não tem que ficar passando muito parâmetro não tem chamada para pi tá então quando você não tem chamada para p então por exemplo site de case além de Pages de demonstração site de documentação blogs tudo isso eu indicaria você utilizar você entregue uma única vez pelo backend E não vai mais ser acessado então tudo que você vai ter ele vai estar guardado em estruturas de Jason tá

ali dentro do seu da sua árvore de projetos e os seu usuário vai conseguir utilizar isso de uma maneira muito mais prática fora que seu projeto fica mais rápido aonde eu não recomendo você utilizar Quando você tem chamadas para pi E aí de fato é um sistema então eu não recomendo você utilizar o get tá e obviamente comparado né com outras ferramentas assim a Velocidade dele é absurda Lembrando que o get ele não é indicado quando você tem que ficar fazendo chamadas vamos lá pessoal a gente já tá passando aqui no nosso horário aqui então

a gente tá indo aqui para os nossos finalmente Tá eu espero que você tenha aproveitado e entendido aonde está indo o ecossistema do react tá então tem muito mais coisa para a gente falar a gente sim poderia falar do gráfico que é o que traz ainda mais responsabilidade e a Combinação de por exemplo um projeto vai te contei o índio nestigar assim tem muito assunto para falar mas o nosso objetivo hoje aqui é justamente você entender para onde está remando o mundo do sistema do react e trazer essas ferramentas de produtividade [Música]