Aprendendo React do Zero, Conectando Back e Front End, e Consumindo API
HTML-код
- Опубликовано: 4 июл 2024
- Vou te ajudar com Programação: go.rodolfomori.com.br/aprenda...
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.
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/16qg
Inscreva-se no Canal: bit.ly/3h1xtJ5
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Meus Links 👇👇
🔥 LIVE toda Segunda: go.rodolfomori.com.br/live-do...
📸 Insta: @rodolfomorii / rodolfomorii
👥 Fale com nossa equipe: go.rodolfomori.com.br/suporte
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 
Наука
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Visualizer)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo
Com relação ao curso são quantas horas ao total?
Fantástico, Fantástico, Fantástico 👏👏👏👏👏 Poderia continuar com a tela de edição de usuários, sem querer abusar é claro mas já abusando ...
Eu vendo essa aula às 01:40 da manhã, esse ano eu entro na área de desenvolvimento 🙏
Booa, bora pra cima
A melhor explicação sobre states que já vi, de um modo simples e prático, parabéns professor!!!
Fico feliz em saber, tmjj
Muito bom, a cada dia o canal trazendo projetos novos.
Fala mestre @Rodolfo, estou aqui pleno feriado estudando, não existe almoço grátis. pra cima meu irmão.
Boooa, isso ai
Sensacional, Rodolfo. Valeu.
Aula dinâmica , muito instrutiva, que me ajudou a revisar o código que recém estudei.
coisa linda, era tudo que eu precisava, obrigado mestre!!
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.
Sim, utilizar o id e o & no css. Porém pesquise sobre scss, você vai ficar mais impressionado :D
Muito obrigado por tamanhos conteúdos. Vou aprender bastante aqui. 👍🏿👍🏿
Excelente aula, ótima didática
Parceiro Tmj bom diaaa menino obrigado estou doente gripe forte vou salvar aqui e ver depois fmz irmão Tmj felicidades sempre
Tmjj
Cara, por causa desse canal descobri que amo desenvolvimento web! Parabéns!!!!!! Por mais conteúdos como esses para gerar inspiração!
Ahhhh ganhei meu dia com esse comentário...TMJ
Aula top professor!
Muito bom !!!!
Melhor aula e explicação sobre React que já vi! Parabéns professor Rodolfo.
Obrigado! Tmjj
Melhor canal do RUclips de programação
Obrigado!!
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!
Tmjj
muito bom vídeo, salvei para assistir a tarde.
Aula show de bola
🚀
aula top ,ajudou muito ,obrigado deu tudo certo
Fico feliz em saber, tmjj
Vídeo muito top, aprendi muito com sua didática, parabéns!
Valeuu, tmjj
Arrasou! Ensina a fazer o deploy do banco, front etc, por favor
Opa, anotado! Semana que vem vai sair!
Muito top, deu tudo certo, parabéns, AGORA VAMOS COLOCAR ON-LINE.....
Boaaa, tmjj
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
Anotado!
Parabens pelos seu conteudos! Sao muito bons, obrigado
Eu quem agradeço, tmjj
Rodolfo vai uma sugestão para fazer uma tabela tipo de Excel mas com Node ? Saca um abrçs rsrs
Top demais viu!
Valeuu, tmj
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!!!
Fico feliz em saber man, tmjj
38:25 tem o Ctrl + shift + p depois aperta enter e escreve a tag
Manja muito. Vi a aula de API antes de ver essa e pela primeira vez, não fiquei com medo de Backend.
Booa
cara vc é maravilhoso
Obrigado, tmj
Opa mano, libera o repositório da aula passada pf. Só para eu consumir a API sem precisar criar uma do zero. Valeu, tmj!
VOu colocar aqui na descrição dps
tem algum repositório no github com o projeto ?
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
Boaaa
Pega essa aula aqui: ruclips.net/video/ZwWAcK8e99w/видео.html
Ótima didática! Parabéns pelo vídeo
Obrigado! Tmjj
🎉
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.
Isso ai, e dps ir pro react...
😮
Agora fala spring boot 🤧🇲🇿🙏
Ó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.
Vou criar uma aula ensinando!
quero fazer uma pergunta vc acha que ta dificil encontrar estágio ? pq eu continuo aplicando mas não consigo, quais pontos a serem melhorados pra conquistar o primeiro estágio?
@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
Da um comando no terminal. npm install
🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻 ameiiii teria como fazer o login tbm?
Opa, vou criar uma aula pra isso!
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
Qual erro ?
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?
Tenta com react umas 2 vezes, pra vc já ir pegando o jeito!
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
Usa essa ferramenta
ruclips.net/video/selI69g6oc4/видео.html&ab_channel=DevClub%7CPrograma%C3%A7%C3%A3o
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'
github.com/rodolfomori/api-node-mongo
Você não usa Styled components?
Uso sim.
Sou novato em react. Qual seria a real diferença criar o projeto com typescript ou javascript?
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.
rodolfo meu cadastro-usuarios não está rodando quando executo o npm run dev poderia me ajudar?
Você instalou as dependencias ?
A img da lixeira expirou o link, Rodolfo.
Ta normal agora!
A imagem da lixeira o link expirou, Rodolfo.
Ja renovei
background: linear-gradient(180deg, #363467 0%, rgba(30, 29, 79, 0.8) 100%);
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,
});
}
Faz assim
{users.length > 0 && users.map () }