Creating a new React project?! Watch this video first (new React documentation).
Вставка
- Опубліковано 23 бер 2023
- One thing you can be sure of is that Diego will always bring us the biggest and best updates from the React universe. And this time is no different.
If you haven't been living in an isolated bubble this week, you've probably heard about the new React documentation. It brings some changes when it comes to starting your development.
The other news involves Tailwind CSS, have you heard about it yet?
Well, he covers everything you need to know about these updates in today's video.
Let's check it out 🚀
Eu experimentei o uso do React com o Vite, e até o momento estou gostando muito, até porque não é muito diferente do Create React App. Acho que é o framework mais amigável para os iniciantes.
tbm to achando, mas eu fico na duvida se é viavel ou sou obrigado a ir para o next de cara
@@joao-lucky estou indo no vite, acredito que é muito utilizado ainda e com o tempo e tiver uma base mais solida podemos ir para o next sem pular etapas (não colocar os bois na frente da carroça)
1:42 - concordo. O Ruby e o Rails estão conectados pelo on
Muito top vídeos assim trazendo sobre as novidades do react, valeu diegao !
Top o video. Acho que eh valido vc fazer um video aprofundando mais nessa parte de CSS que vc comentou!!! vai ficar bem legal
Muito bom saber dessas informações, estou iniciando no mundo da programação front-end e me identifiquei com o React, já estava querendo começar a estudar o next msm, apenas mais um incentivo! Obrigado pelo vídeo!
QUe bom que tocou nesse assunto Diegão... Parecia que eu estava sofrendo sozinho com essa história de CSS tool ZERO runtime... Estou exatamente neste momento trocando o Stitches pelo vanilla-extract. Se puder traga mais abordagens sobre o assunto. Valew sucesso!
Diego, se poder traga mais videos abordando conteúdos do vanilla extract
lembro do GoStack, quando estava aprendendo a criar um projeto react na mão kkkkk foi sofrido mas foi um baita aprendizado.
valeu por esclarecer Diegão.
Muita informação boa
Olá. Cai aqui por acaso. Já estudo nextjs. Tema muito importante. Não conhecia essa necessidade de Zero-Runtime CSS. Vou me aprofundar nesse tema. Mais um inscrito.
Muito bom! Obrigado pela contribuição
Muito bom Diego. Sempre trazendo novidades.
Só comentar que a documentação nova em si é incrível
Mais conteúdo de Remix aqui no UA-cam, no Ignite e no Plus seria bem massa
Fogoooo no parquinho!! 🔥🔥🔥
Meu TailwindCSS vai brilhar! E NextJS chegou pra ficar HÁ MTO tempo
Estudo react a um ano por aí, tenho um app publicado e tô trabalhando em outro, curti muito o react native, não quero parar de usar kkk
É preciso diferenciar a arquitetura MPA/SPA de interatividade MPA/SPA. Nextjs é construído para não seguir uma experiência SPA, porém pode sim oferecer esse tipo de experiência.
Seria legal um vídeo para diferenciar tudo isso. Uma diferenciação mais "hands-on" de um CRA para Nextjs do ponto de vista de interatividade. A sensação que dá com todo esse movimento é como se não fossem existir mais interações SPA, como se os webapps não fossem mais "apps", e isso não é verdade. Muitos apps no mercado oferecem esse tipo de interatividade e continuarão assim. Com React ou sem React.
Em algum momento faz full refresh nos seus apps em Next?
Exato
Pelo que vi especificamente do Remix, ele tem a mesma experiência de um SPA(Sem full refresh) e ao mesmo tempo é renderizado no servidor, isso fritou minha cabeça porque não achei que fosse possível um SSR com experiência de "SPA"
Show boas informações.
Finalmente uma orientação mais profissional de uso da ferramenta.
Até pra iniciantes eu vejo vantagem, pois para a enganação de que é só sacudir uns hooks aqui e alí, e vc tem um app pronto pro mercado.
A documentação do React em sim ta sensacional. Com vários exemplos interativos, completamente focada nos hooks e com excelentes explicações.
Sobre o Vite, concordo muito com o que você disse.
Só tenho receio com os hooks novos, pois lançaram uns novos que eu to tendo dificuldade pra entender bem.
Uma pessoa que é MUITO fera e é referência já em React pra aprender conceitos avançados em inglês é o "Jack Herrington:
www.youtube.com/@jherr (sério quem souber inglês confira o canal dessa lenda!)
@@alisonhj O Jack é um mostro, recomendo muito também!
Sobre os hooks, poderia citar quais esta com dificuldades?
Muito bom o video , eu estou usando só VITE ... urgh.... Vamos já pensar em NEXT .. !!! Diego , faz um video de NEXT e de como configura o Tailwind pra ajudar a gente a migrar .. !!!!
Esse vídeo chegou bem na hora pra mim
Fui criar um projeto hoje e não tava entendendo por que tava colocando o next obrigada pelo vídeo
Fala Diegão, por enquanto as unicas grandes diferenças são a modificação pelo tailwind e os server components, estou acompanhando a pasta app está entrando no gosto do pessoal, mas referente ao uso de NextJS, acredito que o mercado já estava migrando para NextJS pela simplicidade, mas a minha pergunta é: vocẽ acredita que vamos voltar a ter uma aplicação com a ideia de monolito? ou frameworks fullstacks como NextJS vão voltar a funcionar com força, mas permitindo acesso a api?
Gosto muito de trabalhar com NextJS e dificilmente utilizo outros serviços como back-end, atualmente só utilizo algumas funcionalidades de apis externas e crio apis de ML em python para servir o front, mas segue o padrão de React com NextJS e ReactNative dominando.
Libs como jQuery e Angular ainda são extremamente utilizadas no mercado. Aos poucos a tecnologia muda. Felizmente e infelizmente é uma questão de tempo ver que as novidades que fizeram o React crescer, serem as mesmas que irão estagná-lo com relação a novos frameworks como o Svelte e o SolidJS e assim sucessivamente. Creio que o Typescript seja um dos poucos que tende a perdurar por mais tempo.
angular lib? kkkkkkk vc é mt leigo.
1:45 Algo parecido acontece na stack Dart/Flutter. Hoje em dia o framework já vem logo de cara para quem quer iniciar o desenvolvimento.
n fala bosta, o dart é uma linguagem de programação utilizada pra codificar no flutter, o flutter sim é um framework.
o que vocÊ tá dizendo é como se o javascript/react fosse a mesma coisa, mas o next sim é um framework.
@@MarcosAlmeida-pn6sp Calma princeso. Já programei em Dart/Flutter (inclusive dei apoio no desenvolvimento de aplicativo que está na Google play store) e com um pouco da stackJS/TS/React também, então sim, eu sei que o Flutter e NextJs são frameworks. Quis dizer que agora com essa recomendação da comunidade React para utilizar um framework para desenvolver aplicações, vai ficar parecido com o que acontece com a stack Dart/Flutter, onde normalmente se inicia estudando os dois juntos, e principalmente agora, que é possível desenvolver para Web e Desktop com flutter. Interprete melhor as coisas, para não querer vir bancar de sabichão na internet
Eu sempre fui fã de usar esses frameworks como o next e nuxt, eles agragam de mais na tecnologia que você esta usando, e isso ser uma recomendação da própria doc, só me encoraja mais usá-las XD
Eu tava aprendendo o react pra me introduzir nos conceitos, ai depois eu ia por nextjs sou novo nessa parada de framework
Server side rendering com Next é muito da hora
Acho que as barreiras estao aumentando na parte de react, no caso essa generalizacao nao foi o ideial, o vue de exemplo, nao tem muito dificuldade.
Interessante, aos poucos o React vai se tornando o Angular. Aonde uma biblioteca está caminhando a ser um Framework, que é "opinionado" e com uma curva de aprendizagem grande, como o Diego mesmo disse. Não quero iniciar um debate sobre quem é melhor, porque ambos são excelentes, mas isso derruba toda a narrativa anterior. Existe lugar para todos debaixo do sol.
Penso mesmo Welton, as novidades que tornou o React grande, serão as mesmas que irão prendê-lo em na concorrência a novos frameworks como Svelte e Solid.
sempre me pergunto pq a curva de aprendizado do Angular é maior sendo que ele ja te da o café com leite para resolver todos os problemas
Opa! Tudo blz?!
Como sempre, vc produz um material de excelente qualidade! Um dos melhores devs do mundo, com certeza.
Cara, vc explicou um lance super interessante, sobre tailwind, e outros, q quando compilado, vira CSS puro...e tals...
E MUI? No meu caso, por eu ser full stack, resolvi usar MUI, pra deixar a interface consistente, 'dark', 'light', sem muita dor de cabeça.
Claro, deve ter na doc.... Mas, gostaria da sua opinião.
Grande abraço.
O Material usa Emotion por baixo dos panos então temos que acompanhar o estado da evolução da lib em relação a essas novas atualizações: github.com/emotion-js/emotion/issues/2928
Para quem está aprendendo React do zero, a dúvida que ficou agora é: Inicia estudando o React para ter a base e depois complementa com Next, ou inicia os estudos já com Next?
Ao meu ver, como o Next é o Framework do React, acredito que é muito importante ter a base do conhecimento para poder estudar o framework e entender o porque da estrutura dele.
Mesmo que não vá utilizar o React no projeto, me parece importante saber como ele funciona.
O que acha?
Acho que a trilha correta é
- JS
- TS
- React
- Frameworks
Next, Typescript e Git até o talo mano... depois você vai completando a base! Mas é NextJs na cabeça
E o Nextjs é o framework full stack, não ? Deveríamos estudar back antes de ir p next ?
Se eu fosse vc faria uma engenharia reversa. Aprende Next e depois vem descascando a cebola. Isso tornará teu aprendizado rápido e concentrado em resultados. Infelizmente tamo sem tempo, depois tu destrava os outros requisitos com mais profundidade.
Programação se trata de paciência pra resolver problemas que em grande parte das vezes você não sabe resolver, ou só tem uma vaga ideia de como resolver.
@@NathanOnCodes cara acho super errado apesar que o nextjs ser muito bom, mas utilizar base sempre é melhor acostumar com framework quando precisar de algo que referencia ao dom, que não tem no framework ou ele permite ai o bicho pega
Curti comentei e compartilhei
Tivemos boas notícias na comunidade do Stitches!
Com react você quer dizer apenas para apps, ou essas atualizações também se encaixam para o react js (web)?
titititi... gostei do fundo musical, bem sutil e marcante
Diego, boa tarde! Me responda por favor. Estou com a seguinte duvida: Sou iniciante, devo seguir aprendendo o react puro ou já começo a aprender o react junto ao framework indicado na documentação?
Next sendo referência até para mobile, expo router veio pra facilitar muito. Na web nem se fala...
Isso que a equipe do react esta fazendo é sensacional. As documentacoes baseadas nesses frameworks especificos ficarao mais ricas.
Já não basta o JR encarar uma alta nas exigências do mercado, agora precisa aprender uma lib + um framework para codar
Da última vez que chequei, ainda era complicado fazer o deploy do NextJS em ambientes que não a própria Vercel -que possui um precinho salgado- enquanto mantendo todas as suas vantagens. Com essa atualização, pelo menos, as soluções em nuvem devem dar uma atenção cada vez maior a isso. Alguém tem informações mais atuais sobre? Estratégias de deploy e otimização de custos, principalmente.
Diego, como fazer um mfe usando o next?
As coisas mudam muito, quando apareceu o sucesso SPA foi maior booom e hj já respirando por aparelhos, novamente SSR tomando conta do cenário cm sempre fez. Até o próprio react dizendo q não é bom usar ele puro. Sei lá, se até a própria comunidade não sabe muito o q diz/decidi só mostra o quanto as comunidades das outras tecnologias estavam certas em dizer que react é modinha. Vue e angular por exemplo são mais consistentes. Logo vi, quando começou o booom de react e muitas Libs e framework por cima d framework ja mostrava ser algo passageiro ou algo q terá uma eterna inconsistência na comunidade. Gosto muito de react, uso pra praticamente tudo atualmente, mas devo repensar sobre isso e ver se volto pra Rails q sempre foi meu favorito. Somos da TI e somos sujeito a mudanças constantes, mas mudanças com finalidades certas e q façam sentido e não coisas q parecem q a própria comunidade nem sabe o q quer. Basta seguir exemplo de Rails, é aquilo e aquilo tá dando certo por anos e anos. React chega a esse nível? Eu não consigo responder essa pergunta l.
acho muito boa sua colocação criado em um proposito e depois interagindo com vários problema que tinha, mas agora ficou meio politico escolhendo um lado , cara na minha opinião o que precisa em cada projeto e não fala que esse certo .
@@evertonf.costasouza3692 acho justo msm. Querem amarrar a gente, fixando somente uma coisa pra usar. Acho isso perigoso
Fala Elton, acho que você está confundindo um pouco. Quando falamos de SSR no contexto do React não estamos falando de SSR do mesmo contexto de Rails, Laravel, etc... Devemos entender que não é porque fazemos o uso de um mecanismo de renderização como SSR que perdemos a interatividade que o React traz pra uma interface front-end. Fora isso, todos esses avanços estão mirando em performance e diminuir a carga de JavaScript pelo lado do cliente, mas sem perder a flexibilidade de usar uma biblioteca de UI. Quando usamos Rails, por exemplo, o front-end construído pelo servidor perde toda sua interatividade no momento que chega ao cliente, ou seja, não há hidratação, não há possibilidade de recarregar parcialmente partes da tela como é a proposta do Streaming SSR, ou seja, o buraco é bem mais em baixo. Comparar SSR do React com SSR do que conhecemos de anos atrás é um erro comum, mas que devemos evitar.
Estou com uma dúvida eu adquiri um curso que tem o nextjs porém não está atualizado eu posso aprender por esse material ou tenho que já começar a estudar o next atualizado ?
É possivel converter o serviço do React JS para arquivos estaticos podendo implantar em hospedagens convencionais? Se sim como?
Gostei do video. Premissa do video: react não é um framework! ahhaha mas deu pra entender
Eu não acho que aumenta a barreira de entrada para iniciantes, talvez até diminua.
Com Next por exemplo, o iniciante não precisa começar aprendendo SSR, SSG e ISR. Pode criar uma SPA normal com CSR.
Sem contar que se for mexer com navegação, o file system routing é bem mais prático e fácil de aprender/utilizar do que algo como o react router dom.
E um bônus é que o iniciante já começa com ótimas práticas.
Gosto de usar o styled components, agora lascou kk vou ter q me acostumar com tailwind.
Estava muito animado com o Vite, mas senti falta justamente da compatibilidade com o Next. Alguém saber explicar porque é mais complicado integrar as duas ferramentas?
O Next possui um compilador próprio que não encaixa com o Vite.
Se pensar que a pessoa deve aprender antes o javascript vanilla para só depois ingressar em uma lib como o React, iniciar já no Nextjs não vai ser tão dificultoso. Porém, como até o JS é custoso para o dev padawan, imagina ser introduzido um FW da lib que gostaria de aprender! Acho que a equipe do React está lutando contra o adversário errado.
Eu acho que vocês estão sendo muito frescos e limitados, da mesma forma que você não precisa aprender HTML pra depois aprender CSS, você também não precisa aprender React pra depois aprender Next, JS é algo a parte, vocês se limitam muito, ai acabam não aprendendo é nada.
Eu aprendi e pratiquei React através do Next.
Facilitou muito minha vida e meu aprendizado, hoje eu consigo fazer tudo no react graças ao Next.
além disso, para usar next deve saber um pouco de Nodejs (backend), não só Javascript
@@lucasduarte7558 Não exatamente, eu não tinha experiência nenhuma com node e back.
Aprendi tudo fuçando e com a base do javascript.
@@thiagodiniz8224 sim, tambem acho que depende da experiência da pessoa. Estava pensando em uma experiência Junior, no NodeJs não tem window, por exemplo… é importante saber as particularidades Nodejs para usar o SSR, que é o render padrão do Nextjs
muitas libs de CSS in JS estão em cheque mate nesse momento rsrsrs, eu gosto do combo Nextjs + TailwindCSS e RadixUI.
eu uso e continuo no styled-components e tb material-ui acho bem melhor não gostei do tailwindCSS achei muito verboso
Eu uso o styled components TBM, se eu não estiver errado usando o plugin Babel ou pondo no nextjs.cofig você transforma o carregamento da styled components em lado do servidor.
Interessante. Neste caso, como utilizar o Next sem a estrutura da Vercel? Por ex. tenho um cliente com uma grande infraestrutura interna onde já existem diversos serviços publicados. Há, inclusive, um SPA feito com Vite. Utilizando o Next para o próximo projeto, quais adequações seriam necessárias mantendo-se este mesmo ambiente?
O Next possui várias formas de deploy. Se você procura um SPA com Next, pode ter, basta usar o comando "export" do Next e ele vai gerar um projeto muito semelhante ao que criamos com Vite ou create-react-app. Caso você procura utilizar as features do Next de geração estática incremental (ISR) e renderização pelo lado do servidor (SSR), por exemplo, você precisa de um ambiente que suporte Node.js e isso é suficiente pra executar o projeto Next.
Não entendo esse apego todo com a Vercel, na empresa que e trabalho são mais de 80 projetos usando Next.js, todos são hospedados na AWS e nenhum deles deixou de perder alguma funcionalidade por isso, tem gente que acha que só da pra usar Next na Vercel, isso ta muito longe de ser verdade. Queria saber de onde as pessoas tiraram essas conclusões.
@@eumanjodisso2060 amigo, acho que você interpretou a minha pergunta de maneira equivocada. Foi apenas um questionamento de alguém que está tentando entender melhor a situação, e não de alguém que está defendendo um ponto de vista, como por exemplo, o ponto de vista de que o Next não funciona sem a Vercel. Portanto, esse apego ao qual você se referiu não existe nesse caso. Como eu disse, um cliente tem estrutura própria de infra, ou seja, não é Amazon, nem Heroku, nem Vercel, é estrutura própria com equipe própria, um Cluster bem grande onde foram investidos algumas centenas de milhares. Até o próprio GitLab está em estrutura própria interna. Nessa infra-estrutura tem aplicações em Python, Java com Spring, Java com JSF, Wordpress, Node com Express, SPA com Vite, servidores de arquivos, servidores de email, serviço de telefonia VoIP, diversos bancos de dados etc etc etc. Esse tipo de infra própria é bem comum em empresas grandes, instituições financeiras, autarquias e empresas públicas.
Voltando a pergunta original, a dúvida foi sobre quais seriam as adequações necessárias para que nenhuma funcionalidade do Next seja perdida mantendo-se o mesmo ambiente. Ou seja, se apenas um servidor Node é suficiente para rodar um projeto feito no Next sem que se perca nenhuma funcionalidade ou se seria necessários usar recursos extras como o terraform, por exemplo.
@@dieegosf Valeu Diego.
Comecei usar Next por necessidade, n sabia q ia virar padrão pra criar apps kkkkkk
Tenho tido problemas com o Vite, consigo rodar o npm vite@latest e o npm install porem quando eu uso o npm run dev da um erro e pede pra mim excluir o packge.lock eu faço a remoção dele e dps rodo o npm install dnv e mesmo assim segue o erro não consigo utilizar ele tenho usado o CRA
Oi pessoal, baseado nisso de começar a desenvolver com um framework e se preocupando com uma estilização com 0 runtime, teriam algum curso pra indicar para iniciantes que já aborde esses temas desde o início? A própria rocketseat tem algum?
No Ignite, a partir do segundo projeto, todos usam Next.js
Boa tarde Diego e demais! Considerando uma aplicação que envolva Data Science, análise de dados, etc. Gostaria de utilizar python no backend, a ideia é usar AWS Lambadas e AWS API Gateway pra construção da API e backend. Nesse novo "modelo" do React, acredita ser válido utilizar o Next.js APENAS para o frontend?
Sim, com certeza
🤯
Hoje estou usando Styled-component com aplicações Next, somente configuro para que o componente seja estilizado no servidor (SSR), será que com as novas atualizações não poderemos mais usa-lo? realmente eu acho mais produtivo, seria uma pena deixar de usar
Tentei usar styled compoents com next e não consegui de jeito nenhum, você instalou normalmente Ricardo?
Na nova turma do Discover já será atualizado o conteúdo?
Eu sou iniciante e não achei nenhuma barreira, muito pelo contrario, com next é mais fácil criar rotas entre outras facilidades
o vite continua sendo uma boa opção para criação do projeto ou já seria melhor usar o next ?
Continua sendo uma boa opção sim, mas temos cada vez mais motivos em utilizar um framework como esses no lugar do Vite ou qualquer opção de criação de um projeto React. Porque a ideia do framework é trazer de forma padronizada coisas comuns que temos que lidar no dia-a-dia de projetos React como roteamento, chamadas HTTP, otimização de imagens, carregamento de fontes, estilização, etc...
mesmo sistemas internas precisa?
Sou novo na area do Next.JS, sendo assim com o next eu não posso ter nada renderizado do lado do cliente? Por exemplo se tenho um botão com tailwindcss que varia o background de acordo com os dados vindos do backend, eu já tenho de trazer isso do server?
Pode sim!
Eu uso o Tailwind com CSS Module e Sass, mas é gosto pessoal.
Sendo o NextJs um framework full stack, é necessário ter conhecimento de back end antes de ir para ele ? Estudar back com node por exemplo, ou não faz diferença na hora do aprendizado ? ps: Agora que estou criando meus primeiros projetos com React
Estudar backend, mesmo que você tenha preferência por front é importante independente do framework e linguagem. E se tratando de react de qualquer forma você já mexe com um pouco de back, assim como no angular vc precisar de um processamento das informações antes de exibir na tela.
não precisa usar o backend se não quiser
Não, acho que back-end é um plus, mas não necessariamente você vai ter que ter conhecimentos back-end pra desenvolver com o Next.js. O back-end pode ser um projeto totalmente separado.
@@dieegosf Obrigado !
@@The96tiago Eu quero, essa seria a questão, estudar back com node antes ou estudar direto no NextJs, da maneira que é usada lá.
A minha maior preocupação com isso tudo é na parte de deploy, lembro que a um tempo atrás para aproveitar todo o potencial do Next era necessário o deploy dentro da Vercel, e para tentar chegar perto da configuração de lá era necessária muitas configurações no AWS por exemplo, alguém sabe me dizer como esta hoje?
Hoje existem muitas opções variadas de deploy, tanto na Vercel, quanto Cloudflare, Open Next, etc... Não existe mais um vendor lock-in nos frameworks, principalmente nos outros além do Next
Cadê o link da newsletter na descrição?
Quando é que vão falat sobre as IAs, ChatGPT, Copilot X e etc? 😭
E ai, conteúdo bom e interessante! Tenho uma dúvida, você comentou sobre o Next ser o "melhor" atualmente, mas ja vi alguns artigos dizendo que o Remix é muito melhor e eficiente do que o Next, qual sua opinião? Não tem nada a ver? Ou é preferência?
Sempre existem vantagens em um e no outro, acho que não existe um melhor e sim preferências e até casos de uso específicos, mas hoje não tem como comparar se teu propósito for achar um emprego com a tecnologia, Next ainda é e vai ser uma opção mais segura por muito tempo.
@@dieegosf obrigado por responder, tmj!
Uso react com js, nem esse tal de typescript usei ainda, isso vai mudar será, uso react por ser simples agora ficando pensativo, será que vão acabar com a lib, querendo transforma um framework,
E em relação a microfrontend single-spa ta sendo uma boa opção?
Infelizmente tenho pouca visibilidade sobre micro front-ends, ainda não vi casos de uso em produção.
Mas para a criação de uma dashboard por exemplo, o react ainda seria o ideal, certo?
Também estou com essa duvida, eu até manjo de next, porêm comecei um dashboard para uma empresa a algumas semanas atrás somente em vite, sistema interno mesmo, agora fico com essa questão, deveria ter feito com next ou não...
Sim, dash não precisa de SEO
A ideia que eu passo no vídeo e não ver o Next ou Remix como frameworks para adicionar SEO ou SSR em um app React porque você pode usar várias outras funcionalidades do Next que vão te ajudar como otimização de imagens, de fontes, redução do bundle JavaScript para melhorar a performance e por aí vai. Ou seja, na minha opinião, hoje vale a pena usar essas ferramentas independente do tipo de projeto.
Eu comecei meu primeiro projeto com React com Vite para rodar de início em um servidor sem Nodejs, então para mim ainda vai demorar para trabalhar com. Next em produção, pois a empresa aqui está engatinhando ainda no desenvolvimento.
Mas acredito que no futuro quando a empresa estiver com uma visão melhor e poder investir eles devem migrar para um Framework e acredito que devem existir muitas nesse mesmo perfil.
Comecei agora e ja tenho que mudar a cabeça kkkk
Fica tranquilo, o maior desafio é não sofrer com a ansiedade e filtrar bem os estudos pra não sair estudando coisa antes da hora.
Eu sempre achei que o module.css fosse o mais básico. Pelo que entendi, caso nao quiser usar, teria que implementar todo estilo num global?
se eu não me engano, se tu não usa module.css tu acaba sempre importando o arquivo css de forma 'global' quando o arquivo JS é chamado (runtime) e quando troca de tela o CSS ainda perpetua. Ou seja, lá no arquivo viewProduct, por exemplo, tu consegue acessar todas as classes da Home. Isso pode dar conflito se tu usa o mesmo nome nas classes em dois arquivos diferentes.
O ruim do Next é não gostar de Styled-components.
Não é o Next, o time do React fez uma nota pra criadores de lib css in js e desencorajou o uso.
Os problemas de performance são os principais argumentos para não utilizar.
Daqui uns dias os frameworks js vão igual ao php de alguns anos atrás.
Quando falamos de SSR no contexto do React não estamos falando de SSR do mesmo contexto de Rails, Laravel, etc... Devemos entender que não é porque fazemos o uso de um mecanismo de renderização como SSR que perdemos a interatividade que o React traz pra uma interface front-end. Fora isso, todos esses avanços estão mirando em performance e diminuir a carga de JavaScript pelo lado do cliente, mas sem perder a flexibilidade de usar uma biblioteca de UI. Quando usamos Rails, por exemplo, o front-end construído pelo servidor perde toda sua interatividade no momento que chega ao cliente, ou seja, não há hidratação, não há possibilidade de recarregar parcialmente partes da tela como é a proposta do Streaming SSR, ou seja, o buraco é bem mais em baixo. Comparar SSR do React com SSR do que conhecemos de anos atrás é um erro comum, mas que devemos evitar.
@@dieegosf perfeito.
O comentário é mais pra provocar (num bom sentido).
Entendo que estamos chegando a um ponto de equilíbrio.
"Tudo no server.
Não, tudo no client.
Devolve para o server.
Calma, não tanto..."
E assim vai.
@@dieegosf Não entendo muito essa lógica. A cada ano que passa, os PCs e celulares e a própria internet estão ficando mais rápidos, mais agora estamos cada vez mais voltando para processar tudo no servidor como era nos anos 2000 quando não existia tanto poder de processamento no cliente. Isso é meio contraintuitivo. Trabalho com SPAs de gestão e não vejo muito sentido em usar SSR para isso já que não preciso de SEO e o SPA me entrega um resultado muito mais próximo ao nativo. Sem contar que os SPAs reduzem a carga de processamento e custo com server.
E agora para eu me desvincular o Styled-Components ... kkk RIP
Styled Components não pode morrer 😭😭😭😭
O next13 agora totalmente focado para TS, para quem ainda não tem o conhecimento suficiente para TS, vale a pena usar o Next com JS ?
Olha, acho que vale sim, mas recomendo fortemente aos poucos ir migrando pra TS :)
Sera que algum dia eles vai intregar next no vite?
Não, o Next usa por baixo dos panos um compilador em Rust, não faria sentido migrar para usar o ESBuild que é o mecanismo do Vite.
A ideia é se tornar um Angular da vida
tá repreendido
Caralho, como vocês fazem software difícil. Puta que pariu. Quanta dificuldade. Estou desde 2005 por aí criando softwares web e garanto: não precisa.
Diegão podia gravar um vídeo explicando como funciona feature por região
Exemplo: uma feature disponivel apenas no Brasil e Argentina
Que som é esse?
Cara eu preciso que alguem me indique onde aprender o tailwind CSS, eu sei CSS puro e consigo aprender pela propria documentação mas eu quero algo mais objetivo alguem com uma boa didática, no memento estou pensando em desistir de tailwind e continuar no puro mas são muitas qualidades cara
Cara, o conceito de desacoplamento é o ideal. Tanto no backend eu primeiro crio o core e no FIM eu pego um framework que se conecta ao meu core sem criar dependencia, quanto no frontend onde eu crio um core em Typescript e conecto um react ou qualquer outro framework. Esse é o ruim de iniciar em um framework. A facilidade de ter algo pronto instantaneo é atraente para quem começa, mas quando se depara com outros desafios como performance não consegue lidar. Quantos projetos ultimamente em angular e react eu vejo com baixa performance pois a galera não se preocupa com isso...
Concordo plenamente, aos poucos os legados vão se arrastando, tomando recursos dispendiosos para migração.
Acredito que a sua abordagem seja a mais sustentável no longo prazo, ter um próprio modelo de trabalho e se adaptar as mudanças sem depender inteiramente delas.
quando você usa o styled-components e realiza a compilação do seu código, todas as classes CSS correspondentes aos seus componentes serão geradas no momento da build. Essas classes serão adicionadas ao arquivo de saída (bundle) da aplicação, juntamente com o restante do código JavaScript.
Dessa forma, quando o usuário acessar sua aplicação no navegador, as classes CSS já estarão disponíveis para serem aplicadas aos elementos da página. Isso significa que não haverá nenhum tipo de atraso ou delay causado pela geração de classes CSS em tempo de execução (client-side rendering).
É importante ressaltar que, caso você esteja utilizando server-side rendering, o styled-components pode ser configurado para gerar as classes CSS no servidor, antes de enviar o HTML da página para o navegador do usuário. Isso pode melhorar ainda mais o desempenho da sua aplicação e garantir uma renderização mais rápida da página.
Bom dia Patrick, as classes fixas sim, mas tem coisa que não é gerada em build time e sim em runtime. É uma longa discussão e não tô aqui pra defender um ou outro, mas vale ficar de olho nas issues do Github deles: github.com/styled-components/styled-components/issues/3856
@@dieegosf estou muito feliz com todo o aprendizado que a Rocketseat proporciona e fico mais feliz ainda por ser respondido por você fera. Lhe admiro muito. Sucesso 🚀💚. Detalhe da minha resposta anterior foi gerada pelo nosso amigo ChatGPT.
Acho que já iniciar em um framework é muito mais vantajoso do que começar em um ambiente totalmente livre. Para quem está começando, trabalhar em um ambiente livre, pode acabar fazendo um monte de coisas erradas.
lá ele viu 00:12 🤔🤨
Vídeo informativo, mas não ficou claro pra mim pq necessariamente seria preciso passar a usar algum desses frameworks. Uma aplicação React SPA usando Vite, desde que bem estruturada, não deveria ser suficiente para coisas relativamente básicas? Por que *toda* aplicação precisaria passar a usar algum desses frameworks?
A ideia do framework é trazer de forma padronizada coisas comuns que temos que lidar no dia-a-dia de projetos React como roteamento, chamadas HTTP, otimização de imagens, carregamento de fontes, estilização, etc...
E o material ui como que fica
Material usa Emotion então vale acompanhar o estado do Emotion com essas novas atualizações: github.com/emotion-js/emotion/issues/2928
RSXP queria muito ir mais e muita sacagem pagar mil reais em um ingresso
Nem do Javascript sai ainda e já tô vendo a ponta da próxima chapeleta chegando para me fude. XD
ah como é bom não usar esse frankenstein chamado React :D
jquery.com/
Como fica a biblioteca Mantine nessa história?
A biblioteca Mantine foi criada em cima do Emotion, uma lib de CSS-in-JS, então vale ficar de olho no Github do Emotion para o suporte ao Next 13: github.com/emotion-js/emotion/issues/2928
Adicionem o link da newsletter pleease
www.rocketseat.com.br/newsletter
eu gosto dessa ideia do vanilla, mas pra quem usa styled components, começar a escrever css do jeito do vanilla extract, e muito ruim
Já tinha passado da hora de aposentar o CRA, a muito tempo já vinha usando o Vite e o Next quando criando novos apps React, mas a solução do react para os server components demorou demais e ainda está muito incompleta
Hoje em dia raramente crio novos apps react, migrei de vez para o Svelte/Sveltekit e meu único arrependimento foi ter demorado tanto
Sinceramente se você não está construindo um app híbrido e não depende de uma biblioteca de UI específica do React eu não consigo ver um único bom motivo para se iniciar um novo App com React
Fala Thiago, temos que tomar cuidado apenas com olhar apenas pro lado técnico da coisa porque se fosse dessa forma talvez várias tecnologias perderiam totalmente sentido e ninguém mais usaria, mas existem vários critérios na hora de escolher uma tecnologia como, por exemplo, o mercado. React continua sendo a melhor opção nesse caso. Dificilmente chegaremos em um momento que apenas o lado técnico da coisa vai ditar qual tecnologia é usada ou não.
@@dieegosf Definitivamente, se você está procurando uma vaga deve buscar ser capaz de solucionar problemas da forma que o contratante desejar afinal no fim das contas o trabalho de um programador é usar ferramentas para entregar valor por meio de um produto, a ferramenta é só um detalhe
Mas também acredito que como programadores devemos impulsionar a área na direção que achamos que irá trazer melhor experiência para os devs e nos permitir entregar mais valor, se ser o mais requisitado pelo mercado fosse o único requisito para uma ferramenta ser adotada o PHP nunca teria perdido seu posto como primeira opção para novos projetos
@@dieegosf E mesmo encarando do ponto de vista de alguém que está contratando eu acho mais simples trabalhar com o Svelte, já que mesmo que você não encontre muitos devs já especializados na área qualquer um que saiba html, css e javascript consegue aprender o suficiente para construir um app em uma tarde e se tornar proeficiente em 1 semana (se já tiver experiência com outro framework javascript é ainda mais rápido)
Enquanto o React é tão cheio de regras e exceções que mesmo trabalhando com ele a anos e me considerando proeficiente ainda me pego constantemente brigando com a ferramenta por tornar algo mais complexo que o necessário e corrigindo colegas com mais tempo que eu por criar problemas de desempenho acidentalmente
@@dieegosf Além de que seja para se candidatar ou para contratar ainda é necessário levar em consideração todo o ecossistema em volta do React, já que quase que impossível criar um app satisfatório sem precisar recorrer a bibliotecas de terceiros criadas para suprir as inúmeras deficiências do react
Enquanto com o Svelte além de ele suprir a maior parte dessas deficiências, sendo até mesmo o único framework que traz soluções para estilo e animações, é também mais simples de se adaptar a ferramentas de terceiros, já que qualquer biblioteca feita para funcionar com javascript puro ou feita para interagir com o DOM é automaticamente compatível (ex: i18n, autoAnimate, motion one, etc...), ao contrário do React que precisa de bibliotecas que adaptam outras para funcionarem dentro do framework
No fim o ecossistema do Svelte acaba sendo maior (exceto no caso que falei de bibliotecas de UI), justamente por não precisar de um ecossistema construído especificamente para ele
E o meu chackraaaaa????