Crud utilizando React Js, Node e MySQL (simples) pt.1

Поделиться
HTML-код
  • Опубликовано: 9 ноя 2024

Комментарии • 116

  • @sergiolc_
    @sergiolc_ 2 года назад +27

    "só um minuto que meu cachorro fugiu, 3 minutos gente" kkkkkkkkkk

  • @sillasemanoel6215
    @sillasemanoel6215 Год назад +8

    mano, muito bom, br tu foi um dos único que trouxe o conteúdo que eu tava precisando, usando js com mysql

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      Obrigado mano, fico feliz que tenha gostado 😁

  • @pedroguimaraesdesena4186
    @pedroguimaraesdesena4186 Год назад +2

    Show de bola, mestre Vitor Cunha. Simples e direto.

  • @fabiomatos55
    @fabiomatos55 3 года назад +44

    Cara você é muito bom, parabéns, só tenho algumas sugestões para fazer:
    1) Você fala muito rápido. Dificulta (e muito) quem está aprendendo te acompanhar;
    2) Detalhe um pouco mais algumas etapas. Parece que você pressupõe que a pessoa que está assistindo o seu vídeo entende tudo que você está falando. Garanto que não é o caso;
    3) Se o vídeo for para usuário avançados ou tem alguma pré condição, informe que o assunto não é para iniciantes no inicio dos seus vídeos;
    4) Classifique os seus vídeo de acordo com a dificuldade: iniciantes ou avançados;
    5) Se tiver alguma pré condição, inicie o vídeo dizendo qual é o conhecimento mínimo que o usuário deve ter para melhor aproveitar o conteúdo.

    • @VitorCunhaCode
      @VitorCunhaCode  3 года назад +17

      Muito obrigado Fábio, irei tentar melhorar nesses pontos para os próximos vídeos 😁

    • @fabiomatos2832
      @fabiomatos2832 3 года назад

      @@VitorCunhaCode 👍😁

    • @hudsonarrudaribeiro
      @hudsonarrudaribeiro 2 года назад +2

      @@VitorCunhaCode Eu acho massa demais que a área da programação praticamente todos tem humildade, de outras áreas que eu venho é todo mundo pistola kkkkkk, acho que é de tanto apanhar com src escrito "scr" e pedir ajuda que a gente aprende.

    • @jeanfserrano
      @jeanfserrano 2 года назад +1

      @@hudsonarrudaribeiro É que se tem uma coisa que aprendemos na programação é ter paciência, o que leva a lidar com tudo de uma forma mais branda kkkkk

    • @Mundodotoruva
      @Mundodotoruva 2 года назад +2

      @@VitorCunhaCode voce nao fala rapido demais ! os outros que falam mt pausados e tenho que ficar acelerando para 1.5x pra ser viavel assistir o video ( por exemplo do guanabara ) e a parada dos iniciantes nao saberem oq é as coisas, o google ta ai pra isso. eu sou iniciante tbm e gosto quando vejo coisa que nao entendo assim me força a aprender oq é aquilo. e avançar tu até que explica bastante

  • @biomelo8501
    @biomelo8501 2 года назад +3

    Você tem o dom , é sensacional!!!

  • @AldecirSantos-nm6pm
    @AldecirSantos-nm6pm Год назад +2

    Explicação perfeita

  • @joaovitor-vw5pq
    @joaovitor-vw5pq 2 года назад +8

    Faz um video explicando o processo back e front com node , express, typescript , até a sua hospedagem no heroku.
    Explica tambem como funciona a combinação de configuração das dependencias. Vai ser um sucesso o vídeo. Ajuda o programador a escolher as linguagens e bibliotecas que quer trabalhar. Será tipo um guia. A propósito este vídeo não existe.

  • @antonioalmeida5572
    @antonioalmeida5572 Месяц назад +2

    Valeu!

    • @VitorCunhaCode
      @VitorCunhaCode  Месяц назад

      caracaaaa, essa foi o primeiro super like do canal. Muito obrigadooo jovem, fico muito feliz em saber que meu conteudo te ajudou

  • @TheChosen0791
    @TheChosen0791 2 года назад +3

    Pra quem estiver com dificuldade de entender ele falar, coloca em 0.75, fica bem natural

    • @ogabrieltoth
      @ogabrieltoth 2 года назад +3

      Eu aqui assistindo em 2x e achando que ta lento ainda kkkkkkkkkkk

  • @soldado25461
    @soldado25461 3 года назад +2

    show de bola os vídeos. continue assim. to aprendendo muito. obg

  • @tomsantos2894
    @tomsantos2894 2 года назад +4

    Incrível. Explicação show, meu brother! Ganhou um inscrito!

  • @viniciusandrade7265
    @viniciusandrade7265 2 года назад +1

    " Só um minuto que meu cachorro fugiu ", que leveza, que calma kkkkj

  • @marceloaugusto531
    @marceloaugusto531 2 года назад +3

    Parabéns, ótimo vídeo, ótima didática

  • @brunorocha9898
    @brunorocha9898 2 года назад +1

    Muuuuuito bom, direto ao assunto... obrigado

  • @marciooliveira5262
    @marciooliveira5262 Год назад +1

    Valew meu parsa!

  • @sabrinatavera6678
    @sabrinatavera6678 2 года назад +2

    Parabéns pelo conteúdo e muiiiiiiiito obrigada! Me salvou aqui.... vlw

  • @valdirsantos7310
    @valdirsantos7310 Год назад +1

    Vaaaaaaaaleu meu parceiro

  • @Mundodotoruva
    @Mundodotoruva 2 года назад +1

    entendi perfeitamente até os 12 min. dps foi tudo pro caralho

    • @vxbeats3940
      @vxbeats3940 2 года назад

      concordo, Thomas Gomes!

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад +1

      poh cara que pena, esse video ele era de quando eu estava começando no youtube, então bastante coisa eu fui aprendendo com o tempo para simplificar o entendimento das video aula, ja está no meu backlog de videos, um para recriar esses tutoriais mais antigos😁

    • @Mundodotoruva
      @Mundodotoruva 2 года назад +1

      @@VitorCunhaCode mas o problema nem foi voce nem o video. é eu que nao fui capaz de entender mesmo. preciso estudar mais hehe

  • @carolinainglethe2354
    @carolinainglethe2354 2 года назад +1

    parabéns ! Seu video me ajudou muito , Obrigada !

  • @yuriviana4113
    @yuriviana4113 21 день назад +1

    Opa mano, tudo bem? Quando vamos fazer um crud com upload de imagem, dá para fazer nesse mesmo estilo que você fez?

    • @VitorCunhaCode
      @VitorCunhaCode  4 дня назад

      dai jovem, tudo certo. Da para fazer sim se eu n me engano voce usa o multer para fazer upload de imagens no node de uma maneira bem facil

  • @gabrieltijon4765
    @gabrieltijon4765 2 года назад +1

    tu e brabo, 10 segundos e ja me escrevi

  • @VulgoBe
    @VulgoBe 2 года назад +2

    Mano, precisa detalhar melhor o teu passo a passo. Tu pula da criação de pastas para o entrar na pasta client e rodar o Git extremamente rápido sem falar desse detalhe. Mas obrigado pelo vídeo, vai me salvar muito.

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад +1

      Esse foi um dos meus primeiros, teve bastante coisa que hoje percebo q poderia ter feito diferente para ficar melhor o entendimento, planejo refazer este video mais tarde

  • @eduardoleite8334
    @eduardoleite8334 Год назад +1

    Mano pqp que video bom mano! Poderia me indicar algum curso focado em bancos de dados e react? Atualmente foco mt em frontend, mas estou precisando realizar um projeto onde existe uma tela de cadastros e log, cada usuário tem acesso a uma tela diferente quando loga e não tenho ideia de como fazer principalmente a questão de cadastro de usuarios.

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      Cara, eu recomendo muito a rocketseat os projetos nlw deles são muito bons teve um ignite lab 4 focado em nest onde ele explica muito sobre estrutura e muito mais, aí você consegue ver comprando o rocketseat plus de 50 reais te dá uma boa noção da ferramenta usando ORM e tudo mais. Já modelagem de banco eu n sei te dizer aprendi no meu técnico e vendo vídeos aleatórios no RUclips então acho q dando uma boa fuçada você encontra uns fóruns e vídeos maneiros

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      Essa tela de cadastro você pode salvar mais uma informação no usuário como idType para saber qual dados ele deve consumir, e de acordo com o teu tipo ter um retorno diferente

  • @Arquivorafa2001
    @Arquivorafa2001 2 года назад +1

    Muito obrigado, ganhou um inscrito

  • @henriquematheus5300
    @henriquematheus5300 3 года назад +1

    muito obrigado, me ajudou muito.

  • @BrunaSilvadosSantos-ut2bf
    @BrunaSilvadosSantos-ut2bf 4 месяца назад +1

    Nao tenho muito conhecimento em programar ainda, gostaria de saber se eu consigo fazer o exemplo sem usar aquela inicialização no Git Bash? Fazer direto pelo VS?

    • @VitorCunhaCode
      @VitorCunhaCode  4 месяца назад +1

      voce pode usar o terminal direto no vsc😁

    • @buusantos
      @buusantos 4 месяца назад +1

      @@VitorCunhaCode dei mais uma pesquisada ontem e tentei fazer pelo terminal, mas esta dando algum erro que nao sei o que é 😢

    • @VitorCunhaCode
      @VitorCunhaCode  4 месяца назад

      ​@@buusantos voce tem o node instalado?

    • @BrunaSilvadosSantos-ut2bf
      @BrunaSilvadosSantos-ut2bf 4 месяца назад +1

      @@VitorCunhaCode sim, tenho

    • @VitorCunhaCode
      @VitorCunhaCode  4 месяца назад

      o que aparece na mensagem de erro?

  • @gabrielcadete6298
    @gabrielcadete6298 3 года назад +1

    Obrigado!!!

  • @galaodepinguin5261
    @galaodepinguin5261 2 года назад +1

    12:35 , server-side

  • @daviservo1
    @daviservo1 Год назад +1

    aeeeeee

  • @nandojau1
    @nandojau1 2 года назад +1

    tu é pica maninho! conteúdo top!

  • @Matheus-mr4tl
    @Matheus-mr4tl 2 года назад +2

    Vendo esse video agora eu entendo pq dev ganha bem. Esse tipo de habilidade aí não é pra qualquer um

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад +2

      É um pouco complicado no início mas com o tempo tudo fica bem mais fácil, só precisa de foco e persistência q qualquer um consegue😁.

  • @juarezsouza7806
    @juarezsouza7806 3 года назад +1

    Ótimo vídeo

  • @cordtuvicdev
    @cordtuvicdev Год назад +1

    O que seria exatamente esse prevValue? Ele pega o valor antigo e em sequência passamos a referência de um novo valor?

    • @cordtuvicdev
      @cordtuvicdev Год назад +1

      Inclusive, ótimo vídeo, me ajudou bastante em um projeto que estava fazendo.

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      Vou tentar explciar com um exemplo, vamos imaginar q eu tenha um state chamado count q inicia com o valor 0 e eu quero que quando eu clicar em um botão ele incremente mais 1 como no código abaixo
      function click(){
      setCount(count + 1)
      }
      se o meu count for = 0 depois de executar essa função ele seria 1 mas agora se tivermos esse código
      function click(){
      setCount(count + 1)
      setCount(count + 1)
      }
      o seu resultado ainda continuaria sendo o mesmo, porque como o setState ele altera o valor apenas quando há outra renderização do app o count vai ficar com o valor 0 nas 2 linhas mas se fizermos assim
      function click(){
      setCount(count + 1)
      setCount(prevValue=>prevValue+1)
      }
      ai sim o resultado seria 2 pois eu estou pegando o ultimo valor deste setState mesmo antes de ele renderizar e o nome "prevValue" ele é apenas o nome que eu dou para este parametro q eu recebo se um

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      ​@@cordtuvicdev que bom cara fico feliz em ajudar 😁

  • @motivationalclass8291
    @motivationalclass8291 2 года назад +1

    Vídeo muito bom tentar falar menos rápido no proximo por favor fica difícil para nos iniciantes acompanhar.

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      Eu tô tentando melhorar nessa parte sempre tive o costume de falar rápido 😅kkk, obrigado vou tentar melhorar meu querido

  • @BrandevTech
    @BrandevTech 2 года назад +1

    É possível usar React ou Vue ou Angular sem Node? Só tenho hospedagem compartilhada.

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад +1

      Eu nunca mexi com hospedagem compartilhada, então n sei se posso te ajudar, tente ver algum serviço q faça esas conexão e você apenas consuma a api pelo front

    • @BrandevTech
      @BrandevTech 2 года назад

      @@VitorCunhaCode Você tem razão. Consegui achar um tutorial com o back end em PHP. Vai dar certo.

  • @ellensauma2831
    @ellensauma2831 3 года назад +2

    Oi, bom dia, eu procurei muito a questão de fazer a integração do node js com react, como eu faço isso? ou as novas versões já fazem essa integração automatica, conheço pouco de react.

    • @VitorCunhaCode
      @VitorCunhaCode  3 года назад +1

      N sei se entendi direito sua pergunta, mas com as rotas criadas basta consumir elas seja com um fetch ou axios

  • @jokes1732
    @jokes1732 2 года назад +1

    qual extensao vc usou pra identar os parametros dentro das tags, tipo className, type...?

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      Eu utilizo a extensão Prettier e coloco no vscode para ele formatar sempre q eu salvar

  • @carolfreitas_devjr
    @carolfreitas_devjr Год назад +1

    Qual é a versão do node que vc está usando?

  • @racingpro_br1252
    @racingpro_br1252 2 года назад +1

    Porque você usa dois traços no nome da classe ? É alguma convenção ?

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      É o nome do arquivo 2 traços e o nome da classe, isso é para evitar vazar algum css de outro lugar com o mesmo nome. Tem várias maneira de você prevenir isso , seja usando uma biblioteca como sass, ou styled components mas no vídeo só usei assim para ficar mais simples mesmo.

  • @igorrafaeldemelo5392
    @igorrafaeldemelo5392 Год назад +1

    Blz velho, eu deployei um projeto meu na vercel, mas não está chamando os dados do servidor, qual seria o proximo passo? jogo a pasta servidor no ar ? e trocar o link de conexão ?

    • @igorrafaeldemelo5392
      @igorrafaeldemelo5392 Год назад +1

      Vou ter que usar meu Pc como servidor ?

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      Ola, peço perdão pela demora estava olhando e parece que alguns comentários o youtube nãome enviou notificação 😔. É um pouco tarde mas respondendo sua pergunta, você deu deploy na vercel ou seja o seu projeto está sendo rosteado na máquina deles o endereço ip do localhost deles é diferente do seu por isso não tem como eles acessarem o seu banco, você pode usar seu pc como servidor se quiser mas eu n recomendo nem um pouco kkkk, ao inves disso suba seu mysql em algum servidor online e o seu server tb, existe o render que é bem tranquilo pra esse tipo de operação mas ele só tem postgres.

  • @JeferssonJeiel
    @JeferssonJeiel 2 года назад +1

    Vídeo muito bom! a questão que eu sempre me pergunto é..., Porque é necessário usar essas bibliotecas externas no node como o "express" e o "nodemon"? Eu não posso usar somente o "mysql"? Forte abraço!

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад +1

      Sus pergunta me intrigou, fui atras para ver com alguns amigos da área, ele falaram q para separar o back do front, mas não consegui tirar a duvida do porque não fazer direto no react, se você achar algo técnico sobre, adoraria saber.

    • @JeferssonJeiel
      @JeferssonJeiel 2 года назад

      @@VitorCunhaCode Não é criticando seu vídeo, é um ótimo vídeo. A questão é porque, se você faz um aplicação que depende de várias bibliotecas, ao meu ver você aumenta seu trabalho quando for encontrar um erro, principalmente quando vai passar por atualizações, pois assim as bibliotecas que você utiliza para essas integrações também precisam estar atualizadas. Eu encontrei este vídeo aqui e achei bem prático. Da uma olhada se quiser: ( ruclips.net/video/_OReRNRR3eI/видео.html )

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад +1

      @@JeferssonJeiel Eu entendi oque você quis dizer, mas em aplicações maiores é melhor separar o fronte do back por questão de ter devs especificos para isso, como deve front nos não devemos mexer nos dados, claro a não ser q seja um fullstack mas acredito q seja mais para separar e ficar mais organizado.

    • @JeferssonJeiel
      @JeferssonJeiel 2 года назад +1

      @@VitorCunhaCode Eu concordo com você. O meu questionamento de não ser possível fazer tudo em um local só é porque atualmente há linguagens que te permitem isso, o PHP é um exemplo claro, onde é possível criar um ambiente FRONT e realizar consultas no banco, tudo isso em um único arquivo ".php". Atualmente com uma infinidade de bibliotecas CSS, o usuário vai pensar que está em um aplicativo, mas na verdade ele está em um navegador. Obrigado ai pela resposta e sucesso pra ti.

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      @@JeferssonJeiel Ele permite fazer o back no front se preferir com outros bancos como supabase, firebase entre outros e tambem tem o nextJs que você pode dar uma olhada.

  • @juniorkenmmasters
    @juniorkenmmasters 2 года назад +1

    Olá Vitor tudo joia, por aqui aparece esse erro, quando digita: node index.js. sabe o que pode ser?
    node:internal/modules/cjs/loader:959
    throw err;
    ^
    Error: Cannot find module 'C:\Cursos\Cursos do RUclips\Crud - Vitor Cunha Code\client\inde
    x.js'
    ←[90m at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)←[39
    m
    ←[90m at Function.Module._load (node:internal/modules/cjs/loader:804:27)←[39m
    ←[90m at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81
    :12)←[39m
    ←[90m at node:internal/main/run_main_module:17:47←[39m {
    code: ←[32m'MODULE_NOT_FOUND'←[39m,
    requireStack: []
    }

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      Tente mudar o nome do diretório para ficar sem espaços

    • @juniorkenmmasters
      @juniorkenmmasters 2 года назад +1

      @@VitorCunhaCode Fala Vitor blz. obrigado aí pelo o seu cometário. resolvi aqui colocando o arquivo = index.js dentro da pasta server hihihi acontece rs. o arquivos estava fora da pasta serve. aí ao entrar na pasta serve e rodar node index.js apresentava o erro. hihihi brigadão aí

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      @@juniorkenmmasters kskfksd acontece que bom q deu certo aí meu querido

  • @viniciussouza6269
    @viniciussouza6269 2 года назад +1

    Mano não consigo abrir a página inicial no navegador, localhost 3000 8080 nada :( já vi tudo que é dica no stack e nada uso visual code

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      Você n consegue abrir o localhost do front é isso?

    • @viniciussouza6269
      @viniciussouza6269 2 года назад +1

      @@VitorCunhaCode tipo fazer um site padrão em html vc vai lá na pasta, index.html e abre no navegador, certo? Mas aí uma aplicação com react (npx create-rea...) Vc num tem que ir no localhost:3000 ? Então, no meu comportador não abre, aí entrei lá e mostrava outro localhost (8080) e mesmo assim aparece q tela de erro

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      @@viniciussouza6269 é pq o react ele é uma biblioteca é outro jeito de abrir ele, não é como html normal

  • @GilbertoAlvesSilva-b5p
    @GilbertoAlvesSilva-b5p Год назад +1

    o que fazer quando aparecer esse erro depois de npx create-react-app crud?
    removed 1 package, and audited 1483 packages in 3s
    234 packages are looking for funding
    run `npm fund` for details
    6 high severity vulnerabilities
    To address all issues (including breaking changes), run:
    npm audit fix --force
    Run `npm audit` for details.
    Success! Created crud at C:\Users\gilbe\OneDrive\Área de Trabalho\Crud\client\crud
    Inside that directory, you can run several commands:

    • @VitorCunhaCode
      @VitorCunhaCode  Год назад

      Ola, eu nunca tive esse erro mas você pode rodar o comando que ele sugere para ver oq acontece: npm audit fix --force

  • @Greg-zz9qu
    @Greg-zz9qu 2 года назад +1

    8:03

  • @MJRkarate
    @MJRkarate 2 года назад

    kkk.
    1 min pq meu cachorro fugiu!

  • @rarukogames8154
    @rarukogames8154 3 года назад +1

    estou tentando seguir oque vc fez mas está aparecendo esse erro alguém sabe como eu posso resolver?
    npm ERR! Missing script: "start"
    npm ERR!
    npm ERR! Did you mean one of these?
    npm ERR! npm star # Mark your favorite packages
    npm ERR! npm stars # View packages marked as favorites
    npm ERR!
    npm ERR! To see a list of scripts, run:
    npm ERR! npm run
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Rafael\AppData\Local
    pm-cache\_logs\2021-11-15T10_54_11_868Z-debug.log

    • @VitorCunhaCode
      @VitorCunhaCode  3 года назад

      Eu já tive esse erro algumas vezes não me lembro agora oq fiz para arrumar mas tente essas soluções: stackoverflow.com/questions/31976722/start-script-missing-error-when-running-npm-start

    • @thailsonbezerra9480
      @thailsonbezerra9480 2 года назад +2

      Provavelmente você está executando o comando "npm run dev" no terminal e está aparecendo esse erro. Se esse for o caso tente dar o comando "cd server" e depois você executa o "npm run dev", visto que a estrutura de pasta montada no vídeo faz com que o arquivo package.json esteja dentro da pasta server e não na raiz do seu pacote.

  • @sh-plhit4690
    @sh-plhit4690 2 года назад +1

    Não entendi nada kkk.
    Estou em python ainda 😣

    • @VitorCunhaCode
      @VitorCunhaCode  2 года назад

      Kkkkk estuda um pouco de js que você já entende