Aprendendo React do Zero, Conectando Back e Front End, e Consumindo API

Поділитися
Вставка
  • Опубліковано 20 жов 2024

КОМЕНТАРІ • 166

  • @canaldevclub
    @canaldevclub  4 місяці тому +3

    Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo

    • @gabriel5591
      @gabriel5591 4 місяці тому

      Com relação ao curso são quantas horas ao total?

  • @andersonsouza6885
    @andersonsouza6885 4 місяці тому +23

    Eu vendo essa aula às 01:40 da manhã, esse ano eu entro na área de desenvolvimento 🙏

  • @PatrickJames-ys6ki
    @PatrickJames-ys6ki 4 місяці тому +3

    Muito bom, a cada dia o canal trazendo projetos novos.

  • @peter8796
    @peter8796 4 місяці тому +2

    coisa linda, era tudo que eu precisava, obrigado mestre!!

  • @andrericardo6992
    @andrericardo6992 4 місяці тому +11

    Fantástico, Fantástico, Fantástico 👏👏👏👏👏 Poderia continuar com a tela de edição de usuários, sem querer abusar é claro mas já abusando ...

  • @VeZeVZ
    @VeZeVZ Місяць тому +1

    Cara, sendo bem sincero!
    Eu estou assistindo pela primeira vez uma aula sobre integraçao de front com back, achei que seria impossivel de aprender, mas esse cara ensina de uma forma tão boa que eu consegui não só replicar o código, mas entender oq repliquei, algo que em muitas aulas nao acontece, replica codigo e nao entende o conceito! Parabens demais

  • @JLeandro84
    @JLeandro84 3 місяці тому +1

    Parabéns pelo conteúdo! Sua forma de explicar é muito didática e facilita bastante o aprendizado. Excelente 👏👏👏👊

  • @AntonioCarlos-fj1fu
    @AntonioCarlos-fj1fu Місяць тому +1

    Meu caro, vendo você cuidar com tanto conhecimento e experiência, mas sempre na humildade dizendo tipo "não se assuste é assim mesmo no começo depois treina exercite depois vai ver que não é bicho de sete cabeças, e eu já passei por isso no começo agora já domino", então isto nos ajuda a ver que é possível aprender e dominar o desenvolvimento estudando e treinando. Obrigado.

  • @joserobertosantos83
    @joserobertosantos83 4 місяці тому +1

    Melhor aula e explicação sobre React que já vi! Parabéns professor Rodolfo.

  • @13mvincius
    @13mvincius 4 місяці тому +2

    A melhor explicação sobre states que já vi, de um modo simples e prático, parabéns professor!!!

  • @alanfaraj4983
    @alanfaraj4983 2 місяці тому +1

    Sensacional adorei vou assistir novamente para pegar bem os conceitos para utilizar em outras Api completa.

  • @MateusWess
    @MateusWess 2 місяці тому +2

    Mano, na boa, fiquei muito tempo na net procurando conteúdo assim. Não desmereço os outros criadores de conteúdo, pq cada um aprende de um jeito, mas esse vídeo foi o perfeito pra eu entender e aprender o React. Simplesmente amei essa aula.

    • @canaldevclub
      @canaldevclub  2 місяці тому

      Fico feliz em saber mano, tmjj

  • @Ricocanuto
    @Ricocanuto 4 місяці тому +2

    Aula dinâmica , muito instrutiva, que me ajudou a revisar o código que recém estudei.

  • @LeviSoares-m1i
    @LeviSoares-m1i 4 місяці тому +2

    Melhor canal do UA-cam de programação

  • @lellisjunior
    @lellisjunior 4 місяці тому

    Manja muito. Vi a aula de API antes de ver essa e pela primeira vez, não fiquei com medo de Backend.

  • @JulioCesarVerne-xr8nt
    @JulioCesarVerne-xr8nt 4 місяці тому +1

    Muito top, deu tudo certo, parabéns, AGORA VAMOS COLOCAR ON-LINE.....

  • @danielbatista502
    @danielbatista502 4 місяці тому +2

    Muito obrigado por tamanhos conteúdos. Vou aprender bastante aqui. 👍🏿👍🏿

  • @jorgeluizcamposmelo3844
    @jorgeluizcamposmelo3844 4 місяці тому

    Cara, por causa desse canal descobri que amo desenvolvimento web! Parabéns!!!!!! Por mais conteúdos como esses para gerar inspiração!

    • @canaldevclub
      @canaldevclub  4 місяці тому

      Ahhhh ganhei meu dia com esse comentário...TMJ

  • @FatosExpress
    @FatosExpress 7 днів тому

    caraco salvou meu projeto da facul, vlw

  • @mayaracaroline2888
    @mayaracaroline2888 Місяць тому +1

    Valeu pelo conteúdo, me ajudou muito! ótima didática 🙌

  • @dwluciomartins
    @dwluciomartins 4 місяці тому +1

    Parabens pelos seu conteudos! Sao muito bons, obrigado

  • @nelsonsoares2281
    @nelsonsoares2281 4 місяці тому +1

    Mano sensacional Rodolfo parabéns, sua didática é muito boa. Me ajudou demais as duas aulas, você fez ai com Javascript e repliquei aqui com Typescript inclusive fiz binding de um componente para outro foi muito bom, e no back end você usou express eu usei aqui o fastify rs Meu entendiemento cresceu e muito, obrigado mano!!!

    • @canaldevclub
      @canaldevclub  4 місяці тому +2

      Fico feliz em saber man, tmjj

  • @andrevictor1125
    @andrevictor1125 4 місяці тому +2

    Conteúdo excelente! Gostaria de ver mais vídeos do tipo, e se possível, com mais telas, como um cadastrado de login, e quando o usuário acessar, disponibilizar uma outra aba para ele

  • @tiltdoisgamer
    @tiltdoisgamer 4 місяці тому +2

    Vídeo muito top, aprendi muito com sua didática, parabéns!

  • @adrianooliveira-z7e
    @adrianooliveira-z7e 4 місяці тому +1

    aula top ,ajudou muito ,obrigado deu tudo certo

  • @tiagocarvalho5571
    @tiagocarvalho5571 4 місяці тому +2

    Sensacional, Rodolfo. Valeu.

  • @edilanogonzaga470
    @edilanogonzaga470 4 місяці тому +2

    Fala mestre @Rodolfo, estou aqui pleno feriado estudando, não existe almoço grátis. pra cima meu irmão.

  • @LucelmoMartins
    @LucelmoMartins Місяць тому

    Cara, que canal sensacional. ótimas aulas, boas explicações, da pra aprender tudo só com seus vídeos, espero um dia ver um aulão de Electron JS. parabéns mano.

  • @diegosantosmoto
    @diegosantosmoto 4 місяці тому +3

    Excelente aula, ótima didática

  • @bob_le
    @bob_le 4 місяці тому +1

    Mano, que aula top !!! Cê é brabo, o kara me fez entender o react de maneira bem fácil! Agora faz uma de Angular 😁 Vlw Mano, tu é o kara!

  • @AlexBatistaMonteiro
    @AlexBatistaMonteiro Місяць тому +3

    Show!! Faltou só o update caso queira alterar dados de um usuário

  • @luizhqdo
    @luizhqdo 2 місяці тому

    Sensacional, parabéns pela didatica e dinamismo!

  • @adriel8462
    @adriel8462 26 днів тому +1

    Ótimo vídeo mano, excelente didática, teria como falar sobre questões de seguranças e praticas legais tanto na api quanto no próprio app?

  • @tubechanneltubechannel4176
    @tubechanneltubechannel4176 3 місяці тому +1

    Aula show de bola

  • @saorynayara4791
    @saorynayara4791 4 місяці тому +1

    Arrasou! Ensina a fazer o deploy do banco, front etc, por favor

    • @canaldevclub
      @canaldevclub  4 місяці тому

      Opa, anotado! Semana que vem vai sair!

    • @morpheuzchannel
      @morpheuzchannel 2 місяці тому

      @@canaldevclub Já saiu? Seria show!

  • @ValmirVirginiodaSilva-LISAIT
    @ValmirVirginiodaSilva-LISAIT Місяць тому +1

    Professor Rodolfo, meu caro, parabéns pela didática, ensina muito bem,,,só faltou a parte de atualizar o cadastro do usuário,,, mas ficou TOP de +

  • @juscelinomodestodosreis2803
    @juscelinomodestodosreis2803 4 місяці тому +2

    Parceiro Tmj bom diaaa menino obrigado estou doente gripe forte vou salvar aqui e ver depois fmz irmão Tmj felicidades sempre

  • @portugalsemfiltro
    @portugalsemfiltro 4 місяці тому +7

    O & dentro da class ou id posso pegar o que tá lá dentro sem necessariamente abrir outra coluna no css? Exemplo você tinha a class CARD e meteu um & e já foi buscar o parágrafo sem fechar e abrir novamente. Se for isso top, adorei.

    • @dimiouvespa
      @dimiouvespa 4 місяці тому +2

      Sim, utilizar o id e o & no css. Porém pesquise sobre scss, você vai ficar mais impressionado :D

  • @PatrickJames-ys6ki
    @PatrickJames-ys6ki 4 місяці тому +1

    38:25 tem o Ctrl + shift + p depois aperta enter e escreve a tag

  • @LucasAlves-tc4sg
    @LucasAlves-tc4sg 4 місяці тому +1

    cara vc é maravilhoso

  • @IngridFerreiradoAmparoLIra
    @IngridFerreiradoAmparoLIra 4 місяці тому +1

    Aula top professor!

  • @Fractal_reComm
    @Fractal_reComm 2 місяці тому +2

    cara eu fiz exatamente o mesmo código no front e quebra muito mesmo, sabe o que pode ser ? por que no log não tem nenhum erro, indentifiquei que o erro esta diretamente na estilização no css com react + vite obg pelo conteudo API ta massa bem estruturada obg

  • @davidj.eduardo6709
    @davidj.eduardo6709 29 днів тому +1

    Eu te amo 😭

  • @devhunterbr4721
    @devhunterbr4721 4 місяці тому +2

    Ótima didática! Parabéns pelo vídeo

  • @humbertocortezia
    @humbertocortezia 4 місяці тому +1

    muito bom vídeo, salvei para assistir a tarde.

  • @delgadosly
    @delgadosly 18 днів тому +2

    Thanks!!!

  • @Alvaro__Jose10
    @Alvaro__Jose10 3 місяці тому +1

    muito bom os seus videos.

  • @gabrielrendelli
    @gabrielrendelli 2 місяці тому

    Obrigado por esse conteudo TOP!

  • @rodolfocastros3t
    @rodolfocastros3t 4 місяці тому +2

    Top demais viu!

  • @marciodavid81
    @marciodavid81 2 місяці тому +2

    Faz um vídeo criando um menu mobile com react

  • @frankguitarr
    @frankguitarr 4 місяці тому +2

    Rodolfo vai uma sugestão para fazer uma tabela tipo de Excel mas com Node ? Saca um abrçs rsrs

  • @kmzzin7621
    @kmzzin7621 19 днів тому +1

    Opa, pode colocar o repositório do backend aqui por favor?

  • @guilhermerezende9517
    @guilhermerezende9517 4 місяці тому +2

    Muito bom !!!!

  • @EVERTONLUIZDAROSA-uo2he
    @EVERTONLUIZDAROSA-uo2he 2 місяці тому +1

    TOP>>>>

  • @rodrigoft91
    @rodrigoft91 20 днів тому

    Poxa não encontrei a aula de criar o Back End, alguém consegue deixar o link da aula aqui? Valeu, Esse cara ensinando é foda demais.

    • @canaldevclub
      @canaldevclub  18 днів тому

      ua-cam.com/video/PyrMT0GA3sE/v-deo.html&ab_channel=DevClub%7CPrograma%C3%A7%C3%A3o

  • @luisandre3532
    @luisandre3532 4 місяці тому +1

    Opa mano, libera o repositório da aula passada pf. Só para eu consumir a API sem precisar criar uma do zero. Valeu, tmj!

    • @canaldevclub
      @canaldevclub  4 місяці тому

      VOu colocar aqui na descrição dps

  • @FatosExpress
    @FatosExpress 13 днів тому +1

    poderia ensinar fazer o deploy disso na vercel né

  • @parzivalcasto6416
    @parzivalcasto6416 Місяць тому +1

    Tenho uma dúvida, o React usa algum pré-processador para conseguirmos usar o '&' ? Eu sei usar Tailwind, Bootstrap e SASS, mas nunca tinha visto alguém usar isso dentro de CSS puro.
    E a aula está incrível, me aprofundei em JS com os seus vídeos, e finalmente estou conseguindo aprender React. Já tinha tentado aprender os fundamentos em outros lugares, mas nunca consegui entender nada. Somente contigo que consegui progredir. Parabéns pela didática, professor.

    • @canaldevclub
      @canaldevclub  Місяць тому

      O CSS moderno já aceita isso..Até CSS puro já da pra usar essa nomenclatura!

    • @canaldevclub
      @canaldevclub  Місяць тому

      Vaaaleu demais! Fico feliz em ajudar!

  • @marianepaschoini3569
    @marianepaschoini3569 3 місяці тому +1

    cara, você é foda

  • @gabrielleoliveira9458
    @gabrielleoliveira9458 4 місяці тому +1

    🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻 ameiiii teria como fazer o login tbm?

    • @canaldevclub
      @canaldevclub  4 місяці тому

      Opa, vou criar uma aula pra isso!

  • @miguelCienciadaComputacao
    @miguelCienciadaComputacao 4 місяці тому

    Projeto muito massa! Estou fazendo um sistema de CRUD baseado neste das duas aulas, me ajudou demais, obrigado mano Rodolfo!
    Agora faço uma pergunta, como poderia acessar o projeto que fiz em outra máquina? por localhost mesmo, gostaria de acessar o site pelo celular, notebook

    • @canaldevclub
      @canaldevclub  3 місяці тому

      Boaaa
      Pega essa aula aqui: ua-cam.com/video/ZwWAcK8e99w/v-deo.html

  • @guilhermeantoniojesus9190
    @guilhermeantoniojesus9190 4 місяці тому

    Ótima aula Rodolfo. Porem me tire uma dúvida, como eu poderia fazer para editar cada usuário? Pq na aula vc ensinou a criar, postar e deletar, e eu gostaria de poder editar deixando o projeto completinho.

  • @andreforttuna
    @andreforttuna 4 місяці тому

    Fala meu querido, a aula foi muito topzeira.
    Queria saber se poderia me tirar uma dúvida:
    Estou aprendendo a programar para fazer uma plataforma de análise de dados com dashboards e afins.
    Qual tecnologia vc me recomenda estudar.
    Comecei com html, css e js.

    • @canaldevclub
      @canaldevclub  3 місяці тому +1

      Isso ai, e dps ir pro react...

  • @Olamundoio
    @Olamundoio 3 місяці тому +1

    Se não for pedir demais poderia mostrar como subir para o git hub Pages ?

  • @kazbonfim5061
    @kazbonfim5061 Місяць тому +1

    Qual extensão vc usa pra inputar script HTML dentro do .JSX?

  • @MarcosGuilhermeAlvesdaSilva
    @MarcosGuilhermeAlvesdaSilva 4 місяці тому +1

    opa amigo, digamos que eu tenha 50 inputs, tem que declarar cada um ou tem alguma dica/segredo pra pegar todos, tipo o formData do js

    • @canaldevclub
      @canaldevclub  3 місяці тому

      Usa essa ferramenta
      ua-cam.com/video/selI69g6oc4/v-deo.html&ab_channel=DevClub%7CPrograma%C3%A7%C3%A3o

  • @geraldopereira9536
    @geraldopereira9536 Місяць тому

    Muito bom. Me tira uma dúvida, um micro-saas de delivery cada loja terá seu próprio banco de dados, como eu faço? eu tenho que subir uma api para cada banco de dados ou manipulo o .env da api com base no endpoint que esta sendo acessado?

    • @canaldevclub
      @canaldevclub  Місяць тому

      Cara, eu não faria um banco para cada loja. Eu faria com uma tabela relacional, relacionando tabelas com a tabela de lojas.
      Ou seja, cada loja tem um id, e cada venda carrega o id da loja.

  • @karen2716
    @karen2716 2 місяці тому +1

    Rodolfo, no meu caso, preciso fazer um login e conectar com o banco msql, como eu faria?

    • @canaldevclub
      @canaldevclub  2 місяці тому

      Vai sair vídeo no canal semana que vem sobre isso!

  • @ConexoesInovadoras
    @ConexoesInovadoras 21 день тому

    Olá minha dúvida é eu posso colocar as funções creat, delete e atualizar em outro arquivo separado ou é comum deixar tudo no index ?

  • @decaastro96
    @decaastro96 4 місяці тому

    Rodolfo ainda não estou familiarizado com react, acha melhor eu tentar replicar com js puro e futuramente tentar novamente com react ou já fazer com react logo de cara?

    • @canaldevclub
      @canaldevclub  4 місяці тому +1

      Tenta com react umas 2 vezes, pra vc já ir pegando o jeito!

  • @ricxfn
    @ricxfn 24 дні тому +2

    Qual foi a linguagem usada no backend?

  • @Gelozo
    @Gelozo 4 місяці тому

    Sou novato em react. Qual seria a real diferença criar o projeto com typescript ou javascript?

    • @canaldevclub
      @canaldevclub  3 місяці тому

      Tipagem, ou seja. Com javascript você cria uma variável e não diz o tipo dela. Se ela é um numero, um texto ou o array. Com TypeScript você cria a variável e diz o tipo dela. Se ela é um numero, um array, um objeto e etc.

  • @rizandrocarvalho6482
    @rizandrocarvalho6482 2 місяці тому +2

    pessoal cso o npm install nao funcionar roda o npm i vite no terminal🔥

  • @lucasfregonezi
    @lucasfregonezi 4 місяці тому

    fala rodolfo conteudo muito top vlwww
    me tira uma duvida. porque que toda vez que faço um teste por exemplo de criar um usuario ele cria normalmente mas logo depois ele da um erro la no server.js e eu tenho que parar e reiniciar ele ai volta ao normal . sempre consigo fazer apenas uma requisição e ai ele para.
    mesmo quando eu testo criando pelo vs code no thunder client
    eu to dando o comando node --watch server.js para iniciar o servidor

  • @antonioneves5053
    @antonioneves5053 2 місяці тому +1

    alguém sabe me dizer como limpar os campos do formulario após invocar o botão confirmar sem ser feito o refresh da página?

    • @canaldevclub
      @canaldevclub  Місяць тому

      só voce colocar o valor '' " vazio dentro do formulário

  • @wesleyrodrigues7635
    @wesleyrodrigues7635 Місяць тому

    Gostaria de saber se consigo consumir essa api usando react native e expo ? no react (web) consegui fazer todo o crud mais quando tento fazer no react native com expo nao consigo acessar a api, da esse erro :" react native Possible unhadled promisse rejection (id:0) [AxiosError:Network Error]"

    • @canaldevclub
      @canaldevclub  Місяць тому +1

      era pra ser igual. Vou fazer um vídeo de react native!

  • @devhunterbr4721
    @devhunterbr4721 4 місяці тому

    Você não usa Styled components?

  • @GustavoAgostini-vj5zb
    @GustavoAgostini-vj5zb 4 місяці тому +1

    @Rodolfo não consigo baixar o node_module, fica dando erro. O que eu faço?
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path
    npm ERR! errno -4058
    npm ERR! enoent ENOENT: no such file or directory, open
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent
    npm ERR! A complete log of this run can be found
    só aparece o package-lock.json

    • @canaldevclub
      @canaldevclub  4 місяці тому

      Da um comando no terminal. npm install

  • @Piadojetta
    @Piadojetta 2 місяці тому

    prof por um acaso tem algum video igual a esse so que em next.js estou travado no back end do meu projeto e é em next.js

    • @canaldevclub
      @canaldevclub  2 місяці тому +1

      No nosso canal de programação avançada vai sair
      ua-cam.com/channels/d5TrIZ0WxlVmya7Y2PsWXw.html

    • @Piadojetta
      @Piadojetta 2 місяці тому

      @@canaldevclub obrigada prof🙏🏼

  • @Tecinovacao
    @Tecinovacao Місяць тому +1

    o local host não esta sendo aceito pelo navegador

  • @DANILOIBIA
    @DANILOIBIA 4 місяці тому +1

    tem o repositorio dessa aula nao, meu backend nao funciona mais depois que finalizei nao sei que pode ser
    (node:4008) ExperimentalWarning: Watch mode is an experimental feature and might change at any time
    (Use `node --trace-warnings ...` to show where the warning was created)
    node:internal/modules/cjs/loader:1147
    throw err;
    ^
    Error: Cannot find module 'C:\Users\User\Documents\projetos\backend\api-nodejs\server.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49 {
    code: 'MODULE_NOT_FOUND',
    requireStack: []
    }
    Node.js v20.11.1
    Failed running 'server.js'

    • @canaldevclub
      @canaldevclub  3 місяці тому

      github.com/rodolfomori/api-node-mongo

  • @marioroberto4538
    @marioroberto4538 3 місяці тому

    rodolfo meu cadastro-usuarios não está rodando quando executo o npm run dev poderia me ajudar?

    • @canaldevclub
      @canaldevclub  3 місяці тому

      Você instalou as dependencias ?

  • @despertamentemais
    @despertamentemais 4 місяці тому

    A img da lixeira expirou o link, Rodolfo.

  • @developing01
    @developing01 4 місяці тому

    A imagem da lixeira o link expirou, Rodolfo.

  • @ipfa61
    @ipfa61 4 місяці тому +1

    🎉

  • @joaomachavane9456
    @joaomachavane9456 3 місяці тому +1

    😮

  • @felipedib6521
    @felipedib6521 2 місяці тому +1

    Bom dia pessoal, por que na aula temos 2 arquivos css? o index.css e o style.css?

    • @stanleyc4
      @stanleyc4 2 місяці тому +1

      Um para estilizar o main.jsx e o outro para estilizar o index.jsx
      Para ficar mais organizado cria um arquivo css para cada arquivo jsx pois cada um pode ou não conter muitos elementos.

  • @maximillersantos
    @maximillersantos 3 місяці тому

    Meu primeiro contato com React, mas deu pra pegar bastante coisa, valeu =)
    Me tira uma dúvida por favor, se eu tenho um array de usuários vazio ou populado já e tento adicionar um usuário acontece um erro no map, como resolver e porque acontece?
    A função ficaria desta forma ou tem outra forma de trabalhar no React?
    const [users, setUsers] = useState([]);
    function addUser() {
    setUsers(
    ...users,
    {
    id: users.length + 1,
    name: inputName.current.value,
    age: inputAge.current.value,
    email: inputEmail.current.value,
    });
    }

    • @canaldevclub
      @canaldevclub  3 місяці тому +1

      Faz assim
      {users.length > 0 && users.map () }

  • @nelsonleandro6263
    @nelsonleandro6263 2 місяці тому

    PS C:\Users\PC\Documents\React\cadastro-de-usuario> npm install
    npm error code ENOENT
    npm error syscall open
    npm error path C:\Users\PC\Documents\React\cadastro-de-usuario\package.json
    npm error errno -4058
    npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\PC\Documents\React\cadastro-de-usuario\package.json'
    npm error enoent This is related to npm not being able to find a file.
    npm error enoent
    npm error A complete log of this run can be found in: C:\Users\PC\AppData\Local
    pm-cache\_logs\2024-08-02T13_59_58_879Z-debug-0.log
    Não consigo prosseguir com, alguém consegue ajudar?

    • @canaldevclub
      @canaldevclub  2 місяці тому

      Node está instalado no seu computador ?

  • @lucascoutinhocavalcanti7568
    @lucascoutinhocavalcanti7568 3 місяці тому +1

    background: linear-gradient(180deg, #363467 0%, rgba(30, 29, 79, 0.8) 100%);