Aprenda a Desenvolver um Blog em Menos de 20 Minutos usando React e Next.js // AluraJS #1
Вставка
- Опубліковано 11 вер 2024
- Vamos colocar a Mão no Código nesse 1o. AluraJS programando um Blog usando React, Next.js e Styled Components. Nosso amigo @DevSoutinho vai te guiar nesse vídeo e mostrar como com pouco esforço é possível criar soluções bem interessantes.
AluraJS é uma minissérie do Código Fonte TV em parceria com a @alura , que tem como objetivo de mostrar na prática como o ecossistema JavaScript tem soluções para todo tipo de aplicações.
Links citados:
→ Estilos: github.com/oma...
→ Blog @DevSoutinho: github.com/oma...
→ Exemplo NextJS: github.com/ver...
Acompanhe a playlist da AluraJS:
→ codft.me/alurajs
🧠 𝗘𝗦𝗧𝗨𝗗𝗔 𝗡𝗔 𝗔𝗟𝗨𝗥𝗔 𝗖𝗢𝗠 𝗗𝗘𝗦𝗖𝗢𝗡𝗧𝗢 → codft.me/alura
#AluraJS #NextJS #React #StyledComponents
![Faça seu portfólio do ZERO [React + TS + deploy] 🔥Tutorial🔥](/img/n.gif)
Uhuh,estava ansioso por essa série e o primeiro episodio já é fera
Eu adorei esse vídeo, o tema em si, a demonstração do vídeo em nextjs que já ouvi falar mas nunca tinha visto algo na prática. PARABÉNS pelo conteúdo.
Apesar da didática de Mario ser boa, o vídeo está muito rápido, porém a iniciativa é ótima!
Verdade, mas tenta reproduzir em 0.75x. Já fica melhor.
assisti em 2x
@@evandrosilvapinto o malugo já fala parecendo um radialista de futebol e vc ainda coloca assim, viche, isso nem é leitura dinâmica é escuta dinâmica kkkkk
@@jorgedalves1781 tudo é questão de treino, vc consegue prestar mais atenção em 2x. Seu cérebro começa a separar informações relevantes das que vc já sabe o que é.
Lembro de uma namorada que tive que me viu assistindo em 2x e falou: "Meu Deus, como vc consegue?",
Eu respondi: "tenta"
Ela nunca mais assistiu nada em 1x kkkkk
@@evandrosilvapinto hehehe no começo é difícil, mas depois que conhece alguns conceitos realmente separa. Assisto tudo em 2x.
Pessoal. Sou fã a um tempo e posso dizer que sou um seguidor ferrenho. Essa iniciativa é demais. Por mais pessoas como vocês!
Literalmente um comprimido de conhecimento, mas amei!
Muito legal. Comecei a estudar React está semana e está série vai me ajudar bastante \o/. Obrigado!!
Então sanou minha dúvida de porque eu entro num determinado site e ele não tem nenhuma informação no código fonte.
O Mário é de mais, junto com CDFTV, aí ficou apelativo!
Muito bom!
Isso é exatamente oq eu preciso!
Styled-components é vida, desde que aprendi só uso ele pro meus projetos React Native...S2..... hahahahah
Os arquivos nos repositórios estão diferentes dos da aula e não deu pra acompanhar muito bem, fora que ele quis mostrar em 20 minutos o que levaria mais tempo, reduzi a velocidade do vídeo em 50% e mesmo assim fiquei perdido, e olha que ja entendo um pouco de React, acredito que foi mais para promoção mesmo mas valeu a iniciativa
Excelente conteúdo. Parabéns!
Incrível, melhor canal de programação do UA-cam
Sera?
Eu acho q nao , minha opniao, tem muitos canis top
@@hugobreno1816 incoveniente cara, quando você percebe que seu comentário nao vai acrescentar, nao comente!!!
@@vamosfalarsobre6276 É uma opinião, também não acho que a sua acrescente muito, mas tamo aí respeitando né...
@@TheCEMF aiai
Tinha que citar no título do vídeo:
"Como fazer um blog em 20 minutos, caso você entenda de programação" !!
Bom video! Adorei!😉
Grande Mário 👏🏽👏🏽👏🏽
Mário? Que Mário? Hmmmm.
voces estao de parabens
Top
Gente, alguém aqui ainda aprendendo a programar? Vocês tem dificuldade? Como fazem para lidar com as dificuldades?
Eu estou apanhando muito, socorro, mas n quero desistir da área...
Olá, Verônica! Eu estou aprendendo a programar ainda, já consigo desenvolver algumas coisas simples, mas tenho muita dificuldade com certas coisas. O que eu faço é: ler a documentação. Tutoriais do UA-cam são muito diretos, mas as vezes deixam pequenos importantes detalhes passarem batidos. Então eu leio as documentações das tecnologias. Exemplo: a documentação do React Native. Tenho a lido de cabo a rabo pra tirar dúvidas!
Eu já faço isso 5 anos e ainda acho algumas coisas difíceis, e por incrível que pareça ser, ainda bem que acontece isso. Imagina chegar no ponto em que você pode dizer "sei tudo", não teria mais graça.
Relaxa, dividi o problema grande em vários probleminhas pequenos em tudo que for fazer, tenho certeza que as coisas dia a dia vão começar a se encaixar na sua cabeça.
Eu consigo aprender bastante com videos, mas as vezes pego códigos do github e ja consigo entender. O que acho bastante interessante é conhecer bastante a linguagem e depois vc vai "destrinchando". Na Udemy tem uns cursos muitos bons que no YT talvez nao se aprofundam muito. Se ler bastante a documentação ou ler uns livros com projetos reais ou didáticos, dá um norte para ter ideias do que da para fazer. Por isso estou vendo uns cursos em video na Udemy e complemento com o YT, e assim conseguindo ler as documentações.
Uma rede social legal que sempre estão ensinando e aprendendo juntos é a Twitch.tv. Tem canais que doam cursos da udemy e ebooks da casa do código. Bons estudos!
Obrigada a todos, foram dicas maravilhosas que irei seguir 💜
@@cesar7augustocosta Poderia me recomendar alguns canais? Obrigado.
Caramba a Vanessa tem 'web' até no nome, outro nível.
Show demais!
po esse video vai me ajudar muito
Gabriel gostaria de saber se vc poderia participar de um open talk para falar sobre o modelo de trabalho em squads?
Aee o vídeo voltou a ser público kkk
Mtoo top! Estava ansioso pra entender o funcionamento do nextjs
github.com/caiolk/react-nextjs-blog
Faço uma pagina igualzinha a essa no word.😂
Antecipando o que o Mário provavelmente vai fazer no próximo ep
Caso você já queira linkar os seus repositórios pinados, é só trocar deixar a tag como:
{project.repo}
Ola devs. Eu sou completamente novato nesse assunto. Tenho uma tremenda dúvida - : como eu faço para imprimir a imagem no index se eu executei esses comando com o um layout. TNX
ensinar com "estalar de dedos" é meio estranho... pra quem ta começando, fica difícil de entender. Ele faz em 20 min pq já tem muita coisa pronta, só copia e cola
Como que um vídeo desse tem 2k de visualizações e só 200 curtidas, será que todos que assistiram o vídeo já sabiam do assunto falado ?
Poderiam fazer algo similar com Jakyll?
Era para ter entendido alguma coisa nessa velocidade e confusão de frases e conceitos ditas a toda a velocidade? Se os cursos da Alura são assim, não são para mim com certeza.
Oi João, a ideia foi deixar o vídeo mais dinâmico possível, se ele acabou gerando o efeito contrário desculpe-nos. Vamos rever o formato de edição nos próximos episódios. Em relação a Alura, se você degustar de uns vídeos deles por lá verá que são de muita qualidade.
Grande abraço!
@@codigofontetv oi, obrigado por responder. Eu sou iniciante, tenho 65 anos e comecei a remodelar a minha vida profissional, ou espero remodelar. Estudei (curso da Orgamid) html, css e java script. Agora estou buscando conhecimento em react e vuejs (gostei mais dessa) e estou vendo vídeos sobre node (não pretendo, ainda não, me dedicar ao backend). Andei olhando sobre o Next e fiquei animado com as ferramentas que ele possui, mesmo que ainda não entenda a maioria delas. Disse tudo isso para mostrar que tenho algum conhecimento, mas não tanto para acompanhar algo super veloz, que nem me permite pensar, ou melhor, absorver a frase dita sem ser atropelado pela seguinte. Em suma, não sei se eu seria o público alvo de vcs, dai pensem bem se de fato querem remodelar o que estão fazendo, sigam o conselho que vcs mesmos deram sobre projeto, identifique bem o público alvo. Boa sorte.
Eu tbm não entendi o vídeo ksks sou estudante de python para a web e estou vendo um pouco de js, mas realmente o vídeo ficou muito rápido e meio confuso para entender. Sobre idade, acho que não tem diferença, tenho 18 anos e mesmo todo mundo falando: "Jovem absorve mais rápido", eu não consegui...
Realmente não é nenhum curso completo dês do inicio (até porque eles querem vender o peixe), mas deveriam dar uma pincelada por cima de conceitos básicos para quem não entende sobre. E foi exatamente o que vc pensou, eu tbm refleti sobre... Será que vale a pena comprar o curso da Alura?
Provavelmente foi o editor do CDFTV que editou e não alguém da equipe da Alura, pode ser que na plataforma seja algo diferente, mas fico com um pé atrás, pra mim tem que ser com exemplos práticos, mesmo aqueles conceitos mais básicos. A frase: "Ignora isso, só copia que vai dar certo", não é pra mim... Se eu não entender uma linha, todo o resto não faz sentido.
@@opaulojacob se quiser entender melhor nosso funcionamento e ver se vale a pena, manda um e-mail pra gente no contato@alura.com.br que podemos te explicar e verificar uma forma de você experimentar os nossos cursos, para que você consiga tirar suas próprias conclusões a respeito do nosso trabalho. Combinado? 😉
@@JOAGOSTINI se quiser entender melhor a nossa didática e como tudo funciona, pode mandar um e-mail pra gente no contato@alura.com.br que ficaremos felizes em te explicar e conversar com você. 😉
Quero compra o curso de vcs pra desenvolver cheeter vale a apena?
React é um framework?
Ele poderia mostrar mais o código e não ficar tanto alternando para a câmera do rosto dele. Eu começo a ler o código que ele tá falando sobre, aí ele muda a câmera pra cara dele..
Eu não consigo entender nunca, estou começando mas parece muito complicado pra mim, tudo é feito de forma complexa ou talvez a explicação seja rápida demais para quem não entende nada
Claro, o maluco fala parecendo um radialista de futebol, já tava vendo a hora de ele gritar "GOOOOOOOOOLLLLLLLLL"
Não sei qual é o seu nível, mas de fato,esse conteúdo não é bem para iniciantes. É recomendado aprender uma linguagem antes de partir para um framework
não teve nada de styled components
Ficou confuso, por isso a Imersão React eu sempre pulo.
Essas ferramentas só me faz me confundir. E sou mais de escrever os meu próprio códigos. É mais demorado, mas o resultado final é o mesmo. Eu já desisti de tentar usar essas ferramentas.
eu também kk, wordpress até me dou bem(antes de chegar nos plugins pagos heheeh), agora não fui com a cara do React...
A questão é você vai escrever vai demorar muito mais e você não vai alcançar a perfomance do framework, visto que é mantido por uma equipe de programadores e toda semana tem novas releases
@@pedrohenrique-pl4ts A minha problemática com o Framework não é a performance e sim a complexidade na hora de usar. Eu me saio muito melhor desenvolvendo no dedo do que usando framework.
@@luizrodrigo3929 o problema é que nem sempre a verá tempo para você criar tudo do zero, principalmente com clientes apressados ou em empresas.
bigodinhos hsuahsuahsuahs
Ainda não me conveceu, qual a diferença de eu usar React + Next para fazer isso ou fazer só com HTML CSS e JS puro?
não gosto do react por causa disso... para mim não tem muita diferença entre HTML CSS e JS puro...
Se você nâo sentiu nenhuma diferença é porque não estudou o react a fundo, não sei quanto tempo demoraria so para tentar recriar os hooks do react e mesmo assim não atingiria a perfomance desejada, o react ajuda muita a fazer paginas dinâmicas de maneira muito mais facil e performatica, e combinado ao getStaticsProps do next vira uma verdadeira delicia usar o react no lugar de html, css e js puro!
@@pedrohenrique-pl4ts quantos projetos vc fez de maneira comercial utilizando essas tecnologias? por favor, seja sincero.
@@pedroassumpcao8135Bom eu acabei de fazer 16 anos e sou programador junior e programo desde os 14 anos, mas ja fiz 8 projetos dentro de meu proprio bairro e redondezas com next e com deploy na cdn da vercel que é muito rápida inclusive, também ja tenho vários projetos no meu github e desenvolvendo cada vez mais, se for por esse lado o mercado so tende a aumentar cada vez mais para essas tecnologias, faz o seguinte entra em alguns sites famosos e da um f12 para inspecionar se tiver uma div com id next ou scripts do next essa pagina foi feita com next, dps visita a pagina do next e ve la quanta multinacionais ja adotaram o next, incluindo nubank, Starbucks e muitas outras!
@@pedrohenrique-pl4ts show man... continue assim
O React não é feito para projetos simples como este, vc só vai perceber o quanto ele é produtivo quando começar a realizar projetos medios a grandes mas o aprendizado do React precisa ser simples, por isso muitos ficam pensando assim pois o exemplos precisam ser simples mas o uso em produção é usado para agilizar o complexo
Um vídeo acelerado e bem cortado é claro que você sair em menos de 20min
Essa global style é um JSS?
Victor o styled-components foi criado para você não utilizar mas css gênerico, quando você cria uma const com um styled de alguma tag ele transforma isso em um componente ja com css, mas ai veio o problema de definir os estilos globais da aplicação o que costuma se fazer com css através do seletor * então para resolver isso a biblioreca do styled-components criou essa função createGlobalStyles dentro dela é possivel definir os estilos de maneira global, e depois de compilado o código escrito vira css puro!
@@pedrohenrique-pl4ts eita! Que dahora, acho que agora entendi. Eu sou iniciante é estou vendo cada detalhe passo a passo.😅
Valeu, muito obrigado viu?
@@victorpinasarnault9135 Denada! Também ja tive essa duvida, mas se quiser saber mais sobre ele vai na documentação dele é bem simples, mas ele é muito util para fazer herança em css como se fossem classes, com ele você conseque montar os estilos da sua página dinamicamente, e se você utiliza o visual studio code e quiser usar essa biblioteca, é necessário utilizar a extensão dele no editor porque senão ele vai reconhecer como uma simples string e não como css e vc acaba ficando sem o auto complete
Eu prefiro chamar o Javascript de "todo inevitável" do que "todo poderoso" 🤣
CLICKBAIT!
Sou grande fã do cdftv, mas vou falar sobre a pessoa que foi destaque do vídeo.
A pessoa tentou “vomitar”conhecimento, não conhecia o dev soutinho, e por esse vídeo, não vou nem abrir o canal dele, ele mais pareceu tentar fazer uma uma auto promoção, onde ele quer mostrar que sabe fazer algo, do que ele tentando de fato explicar algo, passar algum conteúdo.
Sou dev react - node jr, eu consegui entender os conceitos dele porque JÁ CONHEÇO, e também um pouco da ideia, mas achei esse conteúdo fraco e vago, como disse, mais uma auto promoção do que o título do vídeo se predispõem a fazer. Eu vim esperando algo e acabei perdendo tempo, não tinha novidade alguma, e como já dito, novamente, o título não condiz com o conteúdo. Vocês tiveram meu primeiro 👎🏻 desde que acompanho vocês, e faz tempo. Mantenham o canal de vocês focado, isso foi clickbait.
Um grande código é um código simples. Não vi qualquer motivo pra usar um framework ou uma livraria pra fazer uma coisa simples.
O objetivo é fazer algo simples se for complexo, a maioria das pessoas não vão consequir aprender
@@pedrohenrique-pl4ts bom dia. Leia o que eu escrevi e interprete! Você está escrevendo a mesma coisa que eu escrevi. O que falei foi exatamente isso: um código simples e eficaz é o objetivo de qualquer programador no mundo. Então pra que usar um framework ou livraria se isso pode ser feito de maneira simples com HTML e um pouco de JS nativo? Só isso amigo. Continue com seus cursos que vai ajudar muita gente!
o irritante do DevSoutinho é ele ficar chamando as chaves " { } " de bigodes, bigodinho e quando tem aulas deles, ele nunca envia o link correto pro repositório correto dos projetos da aula no github dele, ele é muito bagunçado!
Mas não precisa dessa complexidade para gerar html no lado do servidor. Não php e Java faziam isto, e principalmente java com prime faces, como se pode fazer isso com qualquer linguagem Server side e de maneira muito mais simples e organizada, principalmente com jsf. Acho que estão inventando muito pra pouco.
sim, mas qual a vantagem de gerar html pelo lado do servidor?
@@codigodesenior3995 A vantagem é que você pode gerar uma página diferente para cada requisição que for feita ao seu servidor o ruim disso é que você pode criar um gargalo de performance, para resolver isso o next criou duas funções que não lembro o nome de cabeça mas com elas você pode gerar um html pronto e definir quanto tempo ele vai ser valido como por exemplo 1 dia, assim a cada dia o next deleta a página antiga e gera uma nova página estatica, o que é uma ótima solução para e-commerces por exemplo se quiser saber mais tem um video da rocketseat que explica essas funções com detalhes não me recordo o nome!
@@codigodesenior3995 Exatamente! Numa estrutura monolítica isso é uma vantagem na produtividade e manutenção mas em arquiteturas restful com micriservicos no back end a idéia é trafegar json e não html.
@@buscandoAverdade2014 entãoco next permite isso também com ele você pode trabalhar com, renderização no lado do cliente igual o react sempre fez, muitas vezes usando api, você pode gerar páginas dinamicas a cada requisição igualmente ao php ou pode usar a estratégia acima que também pode usar com essa estratégia, inclusive você pode renderizar apenas umas páginas e conforme o cliente trafega em seu site você vai renderizando o resto!
Acresecentando: Você pode usar todos esses modelos de negócios na mesma aplicação se quiser sem nenhuma limitação!
Não assistam se vocês são iniciantes! clickbait forçado, perdi meu tempo tentando entender..