Next.JS e React: Curso Intensivo: Aplicação Completa - Masterclass #02 [2021]

Подписаться 95 тыс.

Просмотров 24 тыс.

50% 1

◆ formacao.dev ◆
◆ www.cod3r.com.br/ ◆
_
◆ Curso Next.js e React: www.cod3r.com.br/courses/nextjs ◆
_
PRIMEIRO AULÃO Next.JS e React: Curso Intensivo - Masterclass #01 [2021]: • Next.JS e React: Curso...
_
Repositório do GitHub: github.com/cod3rcursos/next-crud
_
Fala, pessoal. Sejam bem-vindos à segunda parte do nosso aulão de Next.JS. Se você ainda não viu a primeira parte, clica no card que colocamos o link lá!
No vídeo de hoje, nós vamos colocar em prática algumas das definições, fundamentos, e componentes que aprendemos no vídeo anterior ao desenvolver uma aplicação. Além de Next.JS e React, também vamos utilizar Hooks, Typescript, Tailwind CSS e integrar com o Firebase, sem esquecer dos conceitos de CRUD que vamos aplicar.
Curtiu o vídeo? Então não esquece que você pode aprender com ele e com vários outros projetos que desenvolvemos no nosso curso de Next.JS. No nosso curso não é preciso que você conheça Next.JS ou React. Nós vamos entregar revisões do React, funcionalidades específicas do Next.JS como SSR, criação de conteúdo estático, integração com TypeScript e muito mais! Para garantir a sua vaga é só clicar no primeiro link da descrição. Vem aprender com a gente!
_
00:00:00 - Fala, pessoal
00:02:22 - Apresentando o Resultado
00:04:23 - Configuração: NextJS, TailwindCSS e Firebase
00:18:04 - Componentes Layout e Título
00:30:44 - Classe Cliente
00:35:51 - Componente Tabela #01
00:43:49 - Componente Tabela #02
00:48:44 - Componente Tabela #03
01:03:37 - Componente Botão
01:15:00 - Componente Formulário
01:34:36 - Alternando entre Tabela e Formulário
01:43:01 - Integrando Tabela e Formulário
01:48:42 - Configurando Firebase no Projeto
01:55:23 - Repositório Clientes
02:09:36 - Integrando Cadastro com Firebase
02:16:17 - Organizando Código com Hooks
02:29:16 - Excluindo Projeto Firebase
02:30:05 - Até o próximo vídeo
_
Com mais de 400 mil alunos, a Cod3r é uma das principais escolas de tecnologia do País. Um dos seus produtos mais importantes é a Formação DEV, uma formação completa que tem o objetivo de preparar os profissionais para o mercado, desde iniciantes no mundo da programação ou profissionais que estão migrando de carreira, a arquitetos de software. A Formação DEV conta com uma solução completa para te ajudar a construir soluções inovadoras e enfrentar os desafios da era digital.
◆ Vem fazer parte da nossa comunidade:
Discord: / discord
Siga a Cod3r nas redes sociais:
RU-vid: bit.ly/2LJdjpX
Instagram: bit.ly/3bAStnX
Facebook: bit.ly/2MWAn5p
LinkedIn: bit.ly/3i3pfPC

Наука

Опубликовано:

28 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@newton892 2 года назад

O tailwindcss v3 mudou a forma que funciona a safe list module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}", ], safeList: [ { pattern: /from-(green|blue|gray)-400/, }, { pattern: /to-(green|blue|gray)-700/, }, ], theme: { extend: {}, }, plugins: [], }

@israelsousa 3 года назад

Eu já comprei o curso, sou maior divulgador da Cod3r entre meus amigos, compartilhando já 😂

@Franklin-hk7wl 2 года назад

Somos dois kkkkk

@ivanrabelo1558 2 года назад

somos 3

@Franklin-hk7wl 2 года назад

Leo, porque você não cria uma formação EAD, extensivo com valor mensal, construindo uma aplicação profissional? Estou dentro. A interação online é mais interativa.

@yurimarcon 3 года назад

Cara, suas explicações são as melhores! Vlw!!!

@HerbertonCandidoSouza 3 года назад

Muito bom cara, obrigado pela força e pela dedicação em simplificar as coisas para nós... Sou seu fã cara, vlw

@farleyleite8046 3 года назад

Adorei a aula, estou amando o curso !

@rbltv 2 года назад

Todos seus vídeos são sensacionais!

@luciananascimento5487 3 года назад

Professor top demais 👏👏👏

@cleberalvessantos2254 2 года назад

Melhor professor cara, que Deus abençoe esse homem.

@sandroramos1703 2 года назад

Filé de mais esse conteúdo, com certeza vou comprar o curso!

@disneyandrade 2 года назад

Leo, fiz as duas aulas e aprendi muito. Muito obrigado!

@vitormateus8242 3 года назад

Melhor professor!!

@mateusfelippe1806 3 года назад

essa iluminação nova ficou show

@rlsniper0 2 года назад

Tenho o curso de Next.JS do Leonardo, ainda não terminei mas estou adorando. Assistindo esse vídeo pra dar uma comlementa, mesmo sem ainda intender algumas coisas.

@juniorx952 3 года назад

não via a hora desse video sair, o primeiro ja foi muito bom como sempre. Muito obrigado por mais um video Leo e todos da cod3r.

@cod3r 3 года назад

Obrigado pelo carinho, Junior!

@ThiagoPereira-yc8xw 2 года назад

primeira aula foi top.

@israelsousa 3 года назад

Eitaaa primeiro a comentar, esse curso é muito show

@daltonmauri9313 2 года назад

aula 1 topppp

@SilfarGoulart 2 года назад

Gosto muito do conteúdo da Cod3r, e já comprei alguns cursos, e gostaria de de perguntar na sua opinião vc optou pelo Next.JS e React ? E o Nuxt.Js e Vue ? Pretende fazer algo parecido com eles ?

@antoin3933 Год назад

brabo

@carlosroberto-gv2wv 2 года назад

Leo dá um foco em IT como: serverless, GraphQL, nestJS todos junto com o NextJS.

@ventilando254 Год назад

as cores do botão não estão funcionando bem, estão pegando a cor do background

@paulolins7347 2 года назад

Bom dia a todos! Antes de mais nada, excelente material e uma didática impecável. Parabéns! Estou com uma questão: Quando faço um "console.log()" o console não exibe o resultado, não dá erro, mas retorna um ussue: "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform" Se alguém passou por isto, fico grato se compartilharem a solução.

@luizzeduardo341 2 года назад

Sou muito fã da Cod3r, os conteúdos dele são muito bons! a única coisa que não gostei desse vídeo, foi ele ter dividido a tabela em funções, pois uma tabla bem pequena acabou ficando complexa, e uma pessoa que esteja começando acaba ficando mais perdida. Se ele fizesse o fluxo direto na tabela sem ficar dividindo ela seria menos complexo, pelo menos um pouco. Talvez em uma aplicação muito grande essa abordagem faça mais sentido, mas em um projeto tão simples como esse e para iniciantes, acabou complicando um pouco mais.

@esdrasoliveira1274 Год назад

OCORRE UM ERRO DO FIREBASE COM O TYPESCRIPT. Na parte que faz a integração com o firebase, o typescript (aparentemente nessa versão do dia que comento isso, 19/03/2023), não reconhece o firebase, então tive que desintalar o firebase com o comando npm uninstall firebase e instalar novamente, só que tive que instalar na versão 8.8.0 e você faz isso com o comando npm i firebase@8.8.0. Espero ajudar quem passar pelo o mesmo problema que eu.

@joserubenildodasilva1899 2 года назад

Olá! Tudo bem? Como faço para retornar dados de uma API Rest ao inves do firestore?

@guilherme6974 3 года назад

Nem assisti mas ja toma o like

@cod3r 3 года назад

Hahaha valeu pela confiança, Guilherme!

@humbertomarcone6474 2 года назад

Não consegui fazer a conexão com o banco firebase

@devgui_ 3 года назад

Prof. Leo, eu acho que sei pq no minuto 20:45 vc disse que não conseguiu fechar as chaves, isso aconteceu comigo quando instalei o Github Copilot, não sei se pode ser isso.

@wandersonsousa1891 3 года назад

Hmmmmm que beleza

@adrianolarocca1622 2 года назад

Estou com problema para chamar o 'firebase', diz que não existe, somente o firebase/app, entretando não funciona nada direito ao chamar os métodos no ColecaoCliente quando utilizo o 'firebase/app', alguem ajuda?

@fabriciobrazil8625 2 года назад

Conseguiu? Caso saibas inglês sugiro seguir esse vídeo e o próximo(é uma sequência), não é usando next mas te ajuda na hora de implementar os métodos: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-s1frrNxq4js.html Caso não saibas, ou não conseguiu seguir o vídeo que indiquei, pois é usando só js, sugiro instalar a versão 8 do firebase: npm uninstall firebase npm i firebase@8.10.0 Depois tenta seguir igual o vídeo(Eu não testei, porque não gosto de downgrade, mas acredito que vá funcionar). Independente de qual seguir eu sugiro caçar pela net material que ensine sobre o firebase 9 pois foi uma completa mudança. Infelizmente não achei nenhum em pt(a versão é bem recente), e a doc é um pouco confusa :/

@JOEKD637 2 года назад

@@fabriciobrazil8625 opa mano estava procurando uma solução, procurei em tudo que é forum na net, e só sua solução deu certo, valeu mano eu já estava super frustado, brigadão!!!!

@augustoxaviernovela7975 2 года назад

Leo, eu tenho todas aulas onde estas aulas pertecem, parei no quinto modulo (5. Modos de Pré Renderização do Next JS), nao consigo fazer o build e o run dev em simultaneo no mesmo projecto

@cod3r 2 года назад

Fala, Augusto. Tudo bom? Fala com a gente através do nosso suporte, lá poderemos te ajudar de uma forma muito mais completa. Até lá! 👾

@maclaurinrocha2881 2 года назад

Uma pergunta talvez não tão simples, eu comprei o curso pois já sou aluno da Cod3r e sabia da sua didática e formato de ensino com os desenhos num quadro e os detalhes fora os sites recomendados durantes o curso por isso comprei logo, mas a pergunta é o seguinte, você tem uma pagina principal e nela tem um botão que gera um card e nesse card tem uma função matemática e o cliente interage com esse card no caso respondendo a pergunta por um input e um botão enviar, que está dentro do card ,toda vez que o cliente clica no botão e gera um novo card e uma nova conta matemaica como fazer para salvar os dados de cada carde em especifico sem gerar duplicidade e quando eu quiser buscar no servidor o que eu fiz em um moento anterior ? Precisa de redux?

@ventilando254 Год назад

CEBOLA!

@maclaurinrocha2881 Год назад

@@ventilando254 ?

@leandroportugal9866 3 года назад

Dá pra usar bancos como MariaDB com a dupla react e next?

@cod3r 3 года назад

Dá sim, Leandro! Você consegue usar com qualquer banco de dados.

@leandroportugal9866 3 года назад

@@cod3r Obrigado pela resposta, comprei o curso completo e pretendo usar essa dupla em um trabalho acadêmico.

@marciusbezerra 2 года назад

Me pareceu que esse código não está usando o recurso mais importante do Firebase, que é a reatividade. Isso porque ele está sempre chamando o método obterTodos

@gianlucabianchi2650 2 года назад

No meu computador não foi possível reconhecer o módulo "firebase", nem tentando pelo método "import * as firebase from 'firebase/app';" Alguém conseguiu resolver esse problema?

@haileicristina4654 2 года назад

No meu caso funcionou fazendo downgrade da versão do firebase para a 8 com o comando: npm i firebase@8.8.0 até a 9.3 dá certo

@eduzenmetal 3 года назад

Opa, falae Leo! Cara, pintou uma dúvida, eu comrprei o curso de NextJS pela Udemy, com 222 aulas / 28h. Pela Cod3r, tem 229 aulas / 31h de curso. Gostaria de saber quais as diferenças, esse tempo/aulas a menos pela udemy, é uma perda muito significativa? Agradeço se puder esclarecer, grande abraço!

@cod3r 3 года назад

Fala, Eduardo, tudo bom? Alguns exemplos práticos foram desenvolvidos especificamente para a nossa plataforma, por isso essa diferença nas horas. Abraço!

@eduzenmetal 3 года назад

@@cod3r Ah ok, obrigado pela resposta, e vamo que vamo, ótimos cursos!

@DEVLucasCS Год назад

Next ai não adianto de nada? Era mais simples ter usado um react puro mesmo?

@carlosroberto-gv2wv 2 года назад

Porque firebase é não MongoDB e aproveitava e usava o GraphQL.

@canaldomonstro1112 2 года назад

O cara sabe que Angular é melhor, mas vai ensinar react pq da mais view pq tem muito sobrinho

@douglast.9790 Год назад

Vue é o melhor, amigo.

@canaldomonstro1112 Год назад

@@douglast.9790 boa sorte

@canaldomonstro1112 Год назад

@@douglast.9790 angular é mais complexo, só que se vc souber alterar o motor dele vc consegue ter mais performance que o react( me refiro a aplicação de um listner pra toda aplicação igual ao do react, e não vários igual ao angular por padrão), produtividade eu nem vou discutir já que não tem pra ninguém, especialmente para templates mais genéricos(ferramentas agregadas), vc pode importar um componente angular para o react e para o vue já o contrário vc não conseguem, já que react e vue não podem fazer isso :'(, você pode usar universal para aplicar estratégias de SSR o contrário vc não pode fazer, vc usando react vc passa a depender de um framework back-end para um bom seo e em vue eu nem sei como, já o angular da pra fazer até em Cobol, ainda tem várias outras vantagens ainda não citadas, como por exemplo obfuscação de codigo, e a segurança é bem melhor que a dos coleguinhas (é melhor já que o desenvolvedor não precisa instalar nada extra pra proteger o software diferente das outras ferramentas). No react vc vai perceber erros de desenvolvimento que até iniciantes não deveriam cometer por exemplo: O Hook useEffect desrespeita o princípio solid da responsabilidade única, e também não tem uma nomenclatura adequada. useEffect(()=>{ Executa ao iniciar },[ Elementos que serão observados]) Como esse Hook deveria ser: deveria ser quebrado em 2 hooks um para executar ao iníciar o componente e outro separado para observar uma lista de elementos que sofrerão mudanças. O hook onStartComponent(()=>{}) // nome explicativo e só uma responsabilidade E o hook subscriptionList([]) Vale lembrar que isso é só uma demonstração de onde está podre, fora alguns possíveis gargalos de segurança e problemas no código como um todo.