No video
Aprendendo React do Zero, Conectando Back e Front End, e Consumindo API
Рет қаралды 23,464
Күн бұрынVou te ajudar com Programação: go.rodolfomori...
AULA 1 - Back End: • Criando uma API do ZER...
Neste vídeo, você aprenderá a construir uma aplicação web do zero usando React.
Começaremos com os conceitos básicos, passando pela criação de componentes e gerenciamento de estado, até chegar à integração com um back-end e o consumo de APIs.
Este vídeo é perfeito tanto para iniciantes quanto para aqueles que desejam reforçar seus conhecimentos em React.
Vou guiá-lo passo a passo na criação de uma aplicação completa, conectando o front-end ao back-end, para que você possa entender e aplicar essas habilidades em seus próprios projetos.
________
Loja do canal: Https://loja.devclub.c...
________
CURSO DE HTML: • Curso de HTML | Tornan...
CURSO DE CSS: • Curso de CSS | Tornand...
CURSO DE JAVASCRIPT: • Curso de JavaScript pa...
Imagem do Projeto: svgshare.com/s...
Inscreva-se no Canal: bit.ly/3h1xtJ5
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Meus Links 👇👇
🔥 LIVE toda Segunda: go.rodolfomori...
📸 Insta: @rodolfomorii / rodolfomorii
👥 Fale com nossa equipe: go.rodolfomori...
Criei este canal para ajudar você que quer sair do ZERO, iniciar sua jornada e se tornar um programador!
Se já é um programador e quer evoluir na carreira de programação, também está no lugar certo, aqui você vai encontrar conteúdos relevantes que vão te ajudar!
Capítulos
00:00 Introdução
00:46 O que vamos aprender hoje
01:51 Ferramentas para React
03:43 Estrutura do nosso React
07:05 Criação do nosso React (Esqueleto)
12:15 Dividindo as paginas
14:47 Ponto Importante para te ajudar
16:52 Criando o Cadastro (primeiro HTML)
41:47 Conectando o Front End com o Back End
50:57 Erro "Cors"
53:03 Trocando dados
55:59 React Hooks (useState)
59:57 React Hooks (useRef)
1:08:28 Deletar Usuários
1:12:38 Detalhes Importantes
@canaldevclub 2 ай бұрын
Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo
@gabriel5591 Ай бұрын
Com relação ao curso são quantas horas ao total?
@andersonsouza6885 2 ай бұрын
Eu vendo essa aula às 01:40 da manhã, esse ano eu entro na área de desenvolvimento 🙏
@canaldevclub 2 ай бұрын
Booa, bora pra cima
@thiagodias15 18 күн бұрын
E eu aqui às 03:05
@andrericardo6992 2 ай бұрын
Fantástico, Fantástico, Fantástico 👏👏👏👏👏 Poderia continuar com a tela de edição de usuários, sem querer abusar é claro mas já abusando ...
@MateusWess 10 күн бұрын
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 10 күн бұрын
Fico feliz em saber mano, tmjj
@PatrickJames-ys6ki 2 ай бұрын
Muito bom, a cada dia o canal trazendo projetos novos.
@13mvincius 2 ай бұрын
A melhor explicação sobre states que já vi, de um modo simples e prático, parabéns professor!!!
@canaldevclub 2 ай бұрын
Fico feliz em saber, tmjj
@Ricocanuto 2 ай бұрын
Aula dinâmica , muito instrutiva, que me ajudou a revisar o código que recém estudei.
@luizhqdo 6 күн бұрын
Sensacional, parabéns pela didatica e dinamismo!
@canaldevclub 6 күн бұрын
Muito obrigado, tmjj
@peter8796 2 ай бұрын
coisa linda, era tudo que eu precisava, obrigado mestre!!
@gabrielrendelli 2 күн бұрын
Obrigado por esse conteudo TOP!
@danielbatista502 2 ай бұрын
Muito obrigado por tamanhos conteúdos. Vou aprender bastante aqui. 👍🏿👍🏿
@alanfaraj4983 13 күн бұрын
Sensacional adorei vou assistir novamente para pegar bem os conceitos para utilizar em outras Api completa.
@canaldevclub 13 күн бұрын
Valeuu
@edilanogonzaga470 2 ай бұрын
Fala mestre @Rodolfo, estou aqui pleno feriado estudando, não existe almoço grátis. pra cima meu irmão.
@canaldevclub 2 ай бұрын
Boooa, isso ai
@joserobertosantos83 2 ай бұрын
Melhor aula e explicação sobre React que já vi! Parabéns professor Rodolfo.
@canaldevclub 2 ай бұрын
Obrigado! Tmjj
@JLeandro84 28 күн бұрын
Parabéns pelo conteúdo! Sua forma de explicar é muito didática e facilita bastante o aprendizado. Excelente 👏👏👏👊
@canaldevclub 28 күн бұрын
Muito obrigado mano, tmjj
@user-fb7cj4tj4j 2 ай бұрын
Melhor canal do KZfaq de programação
@canaldevclub 2 ай бұрын
Obrigado!!
@jorgeluizcamposmelo3844 2 ай бұрын
Cara, por causa desse canal descobri que amo desenvolvimento web! Parabéns!!!!!! Por mais conteúdos como esses para gerar inspiração!
@canaldevclub 2 ай бұрын
Ahhhh ganhei meu dia com esse comentário...TMJ
@diegosantosmoto 2 ай бұрын
Excelente aula, ótima didática
@bob_le 2 ай бұрын
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!
@canaldevclub 2 ай бұрын
Tmjj
@nelsonsoares2281 2 ай бұрын
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 2 ай бұрын
Fico feliz em saber man, tmjj
@andrevictor1125 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
@canaldevclub Ай бұрын
Anotado!
@tiagocarvalho5571 2 ай бұрын
Sensacional, Rodolfo. Valeu.
@JulioCesarVerne-xr8nt Ай бұрын
Muito top, deu tudo certo, parabéns, AGORA VAMOS COLOCAR ON-LINE.....
@canaldevclub Ай бұрын
Boaaa, tmjj
@tiltdoisgamer 2 ай бұрын
Vídeo muito top, aprendi muito com sua didática, parabéns!
@canaldevclub 2 ай бұрын
Valeuu, tmjj
@juscelinomodestodosreis2803 2 ай бұрын
Parceiro Tmj bom diaaa menino obrigado estou doente gripe forte vou salvar aqui e ver depois fmz irmão Tmj felicidades sempre
@canaldevclub 2 ай бұрын
Tmjj
@lellisjunior Ай бұрын
Manja muito. Vi a aula de API antes de ver essa e pela primeira vez, não fiquei com medo de Backend.
@canaldevclub Ай бұрын
Booa
@saorynayara4791 2 ай бұрын
Arrasou! Ensina a fazer o deploy do banco, front etc, por favor
@canaldevclub 2 ай бұрын
Opa, anotado! Semana que vem vai sair!
@dwluciomartins 2 ай бұрын
Parabens pelos seu conteudos! Sao muito bons, obrigado
@canaldevclub Ай бұрын
Eu quem agradeço, tmjj
@rodolfocastros3t 2 ай бұрын
Top demais viu!
@canaldevclub 2 ай бұрын
Valeuu, tmj
@portugalsemfiltro 2 ай бұрын
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 2 ай бұрын
Sim, utilizar o id e o & no css. Porém pesquise sobre scss, você vai ficar mais impressionado :D
@EVERTONLUIZDAROSA-uo2he 5 күн бұрын
TOP>>>>
@marciodavid81 15 күн бұрын
Faz um vídeo criando um menu mobile com react
@marianepaschoini3569 Ай бұрын
cara, você é foda
@canaldevclub Ай бұрын
Obrigado, tmjj
@user-cl6tl2kh7x Ай бұрын
aula top ,ajudou muito ,obrigado deu tudo certo
@canaldevclub Ай бұрын
Fico feliz em saber, tmjj
@humbertocortezia 2 ай бұрын
muito bom vídeo, salvei para assistir a tarde.
@PatrickJames-ys6ki 2 ай бұрын
38:25 tem o Ctrl + shift + p depois aperta enter e escreve a tag
@guilhermerezende9517 2 ай бұрын
Muito bom !!!!
@tubechanneltubechannel4176 Ай бұрын
Aula show de bola
@canaldevclub Ай бұрын
🚀
@user-vf6tq8tf7t 2 ай бұрын
Aula top professor!
@LucasAlves-tc4sg 2 ай бұрын
cara vc é maravilhoso
@canaldevclub 2 ай бұрын
Obrigado, tmj
@Alvaro__Jose10 Ай бұрын
muito bom os seus videos.
@canaldevclub Ай бұрын
Muito obrigado
@frankguitarr 2 ай бұрын
Rodolfo vai uma sugestão para fazer uma tabela tipo de Excel mas com Node ? Saca um abrçs rsrs
@devhunterbr4721 2 ай бұрын
Ótima didática! Parabéns pelo vídeo
@canaldevclub 2 ай бұрын
Obrigado! Tmjj
@miguelCienciadaComputacao 2 ай бұрын
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 Ай бұрын
Boaaa Pega essa aula aqui: kzfaq.info/get/bejne/kN2HdMZ8ncudaas.html
@rizandrocarvalho6482 13 күн бұрын
pessoal cso o npm install nao funcionar roda o npm i vite no terminal🔥
@luisandre3532 Ай бұрын
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 Ай бұрын
VOu colocar aqui na descrição dps
@joaomachavane9456 Ай бұрын
😮
@joaomachavane9456 Ай бұрын
Agora fala spring boot 🤧🇲🇿🙏
@Olamundoio 24 күн бұрын
Se não for pedir demais poderia mostrar como subir para o git hub Pages ?
@canaldevclub 6 күн бұрын
Opa, vou ensinar sim!
@GustavoAgostini-vj5zb 2 ай бұрын
@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 Ай бұрын
Da um comando no terminal. npm install
@felipedib6521 20 күн бұрын
Bom dia pessoal, por que na aula temos 2 arquivos css? o index.css e o style.css?
@stanleyc4 12 күн бұрын
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.
@guilhermeantoniojesus9190 2 ай бұрын
Ó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.
@canaldevclub Ай бұрын
Vou criar uma aula ensinando!
@jackassfenix 2 ай бұрын
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 Ай бұрын
github.com/rodolfomori/api-node-mongo
@gabrielleoliveira9458 2 ай бұрын
🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻 ameiiii teria como fazer o login tbm?
@canaldevclub Ай бұрын
Opa, vou criar uma aula pra isso!
@karen2716 8 күн бұрын
Rodolfo, no meu caso, preciso fazer um login e conectar com o banco msql, como eu faria?
@canaldevclub 6 күн бұрын
Vai sair vídeo no canal semana que vem sobre isso!
@MarcosGuilhermeAlvesdaSilva 2 ай бұрын
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 Ай бұрын
Usa essa ferramenta kzfaq.info/get/bejne/qcucfJlqzJzTk2g.html&ab_channel=DevClub%7CPrograma%C3%A7%C3%A3o
@IPFA61 2 ай бұрын
🎉
@andreforttuna 2 ай бұрын
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 Ай бұрын
Isso ai, e dps ir pro react...
@lucasfregonezi 2 ай бұрын
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
@canaldevclub Ай бұрын
Qual erro ?
@leandrodocruze3056 17 күн бұрын
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 6 күн бұрын
No nosso canal de programação avançada vai sair kzfaq.info/love/d5TrIZ0WxlVmya7Y2PsWXw
@leandrodocruze3056 6 күн бұрын
@@canaldevclub obrigada prof🙏🏼
@decaastro96 2 ай бұрын
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 2 ай бұрын
Tenta com react umas 2 vezes, pra vc já ir pegando o jeito!
@AngeloValentimMerlo 2 ай бұрын
Sou novato em react. Qual seria a real diferença criar o projeto com typescript ou javascript?
@canaldevclub Ай бұрын
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.
@marioroberto4538 Ай бұрын
rodolfo meu cadastro-usuarios não está rodando quando executo o npm run dev poderia me ajudar?
@canaldevclub Ай бұрын
Você instalou as dependencias ?
@devhunterbr4721 2 ай бұрын
Você não usa Styled components?
@canaldevclub Ай бұрын
Uso sim.
@adrianorocha.dev17 2 ай бұрын
A imagem da lixeira o link expirou, Rodolfo.
@canaldevclub Ай бұрын
Ja renovei
@despertamentemais 2 ай бұрын
A img da lixeira expirou o link, Rodolfo.
@canaldevclub Ай бұрын
Ta normal agora!
@lucascoutinhocavalcanti7568 Ай бұрын
background: linear-gradient(180deg, #363467 0%, rgba(30, 29, 79, 0.8) 100%);
@maximillersantos Ай бұрын
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 Ай бұрын
Faz assim {users.length > 0 && users.map () }
@nelsonleandro6263 13 күн бұрын
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 6 күн бұрын
Node está instalado no seu computador ?
Sergio Outdoors
Рет қаралды 27 МЛН
DevClub | Programação
Рет қаралды 8 М.
DevClub | Programação
Рет қаралды 23 М.
Sam Meech-Ward
Рет қаралды 81 М.
DevClub | Programação
Рет қаралды 24 М.