Sistema de Login com React.JS! 🔥 (Autenticação, Context API, Hooks)
HTML-код
- Опубликовано: 24 апр 2022
- Nesse vídeo compartilho a criação de um simples sistema de login, onde vamos logar e permanecer logados com o Context API, e a sessão de Cadastro, onde vamos armazenar nossos usuários no Local Storage do navegador.
💻 Repositório: github.com/WilliamDosSantos/S...
================
CURSOS QUE INDICO:
Full Stack Web PRO do zero ao avançado
hotm.art/Full-Stack-Web-PRO-d...
React Native do zero ao Avançado
hotm.art/React-Native-do-zero...
Curso de Node.js, React e React Native
hotm.art/Curso-Node-React-Rea...
Curso de Node.js (Celke)
hotm.art/curso-node-celke
Pacote Full Stack
hotm.art/Pacote--Full-Stack
Curso Criando Apps de I.A
hotm.art/curso-apps-ia
Curso de Flutter Completo
hotm.art/Curso-Flutter-Completo
Curso de Node.js (Danki Code)
hotm.art/curso-nodejs-dankicode
================
Instagram de Tecnologia:
/ will_programmer
Linkedin:
/ william-l-9b6625102
#LOGIN #REACTJS #CONTEXTAPI 
Наука
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Cara muito obrigado por compartilhar sua sabedoria com a gente de maneira tão simples, não pare por conta dos percalços da vida, e siga em frente!
simples e direto ao ponto, ótimo conteúdo. Parabéns
Cara, teu conteúdo é muito bom. Ensina conceitos muito importantes. Deu pra clarear muita coisa, valeu! Muito sucesso pro seu canal! Abraços man, tmj
Muito obrigado, Marcos 🤜🤛
No lugar de receber desse cadastro como seria se recebece do banco mysql atravez da biblioteca axios??
Graças a Deus eu encontrei o seu canal ele é incrível desejo todo o sucesso!!!
Muito obrigado pelo feedback :D
Projeto show de bola
Muito top, obrigado por compartilhar.
Cara seu vídeo ficou incrível, muito obrigado, vc poderia fazer unificar esse vídeo com o esse aqui CRUD full stack com Node, React e MySQL(esse vídeo tbm é seu) gostaria de saber se vc pode fazer a pagina de cadastro com autentificação com google e facebook mas guardar os dados no MySQL(exatamente a pagina de cadastro q ta no video vlw...
Fiz um aqui, mas eu não consigo ter controle na rota, por exemplo, se eu estiver na pagina login fica /login se for pra dashbosrd /dashboard e assim por diante...
Muito bom, parabéns pelo conteúdo!
Muito obrigado :D
mais um ótimo conteúdo, parabéns. 👏
Obrigado pelo feedback :D
Show de bola! Ganhou mais um inscrito fera! Segura meu like!
Valeeu
Boa tarde pessoal, alguém poderia me ajudar... meu código logo no inicio, depois que importo o GlobalStyle o código quebra, não funciona mais, alguém pode me ajudar?
Muito bom, me ajudou bastante. Parabéns!
Valeeu :D
Excelente vídeo. Ganhou mais um inscrito!!
Valeeu
sinceramente ver seu video me ajudou muito, estive tendo problemas nas versões mais atuais do react-router-dom que o sistema de modificar a route diretamente não funcionava mais, serio, ajudo d+
Showw
como vc resolveu isso?? eu estou tentando e n consigo...
CARA VOCÊ ME SALVOU, MUITO OBRIGADO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Adorei o vídeo. Muito didático. Gostaria de integrar o login com o postgres ou uma api.
Valeeu
Vídeo muito bom!
Parabéns pelo conteúdo, ficou muito instrutivo 👏
Estes códigos estão em algum repositório, como o github ?
Muito obrigado pelo feedback! Sim, eu deixo o link do repositório de cada projeto na descrição dos vídeos.
Muito top!!!
Ficou show...
Como você faria para tratar o erro de resposta da api na tela de login?
Obrigado pelo feedback Abel! Qualquer erro ao tentar logar? Daria para colocar em cima do botão de logar a descrição do erro.
Parabens Professor, que Deus lhe abençoe, agora só vou atras de montar a tela da home.
Showw
Muito boa tua aula!! Consegui executar todos os passos e bombou direto!! Parabens!! Posso dar uma sugestão?! Será que você poderia complementar essa aula com outro vídeos implementando JWT e salvando usuario no MongoDB??
Muito obrigado pelo feedback e pela sugestão :D
Valeu, Cris... seria uma boa mesmo.
Grato pelo conteudo, Will
Mds vc salvou a minha vida
Boa, mano! Beleza? To curtindo mt o canal. Só uma dúvida, quando você foi usar o template string no javascript, no meu vscode ele não apareceu como css os estilos. Poderia me ajudar?
Obrigado pelo feedback Victor. Então, para usar como css normal no styled components, basta instalar a extensão vscode-styled-components no seu VS Code
@@will_dev , certo! Então além de importar os styleds-components preciso também da extensão no vscode? Valeu!
@@Cocaicara isso
Parabéns muito bom!!!
Muito obrigado 😃
Top demais irmão!
Valeeu
Muito bom o conteúdo cara, neste caso, como faria pra pegar os dados do banco de dados?
Obrigado pelo feedback. Teria que integrar com um banco de dados, aqui no canal eu tenho alguns exemplos trabalhando com o firebase.
Salve! Mano, ali no 5:19 quando você usa o "rafce" as divs dentro do return elas quebram, não deixando funcionar o código, quais extensões você esta usando?
Salve! Então, eu uso essa 'ES7+ React/Redux/React-Native snippets'
@Victor GamesBR sei que é um comentario antigo, porem, tente rfc
Muito bom conteudo, salvou meu dia, to com um probleminha no meu codigo ele não estar aceitando inserir dados nos campos.
Refiz o projeto e continua com a mesma falha de inserção, não acho que seja por criar o projeto com npm, sendo que você utilizou yarn, se esse fosse o caso o erro seria outro!
Pode me dar uma luz pq não esta capturando os dados digitados?
Verifique se passou as propriedades value e onchange para os inputs
@@will_dev as propriedades value e onchange foram passadas, igualmente ao tutorial.
Como instala essas bibliotecas styled-components e react-router-dom ? Estou botando este yarn add... mas não esta funcionando. Ele fala que não reconhece o comando.
Tem que instalar o yarn antes, mas se você tiver o node instalado, pode usar npm install styled...
Cara que vídeo sensacional estava querendo aprender fundamentos sobre a criação de logins e cair aqui, seu video me ajudou muito, obrigado e sucesso!!!!
Showw, muito obrigado pelo feedback :D
Ótima explicação
Muito obrigado pelo feedback 😃
o que são esses "", "" e "" que você colocou no Signin e Signup?
Eu importei todas as estilizações como C do arquivo styles, import * as C from ... Poderia ser outro nome também
Ops!
Só não conseguir armazenar as informações do cadastro em uma array.
Ele me retorna usuário não cadastrado, mesmo cadastrando.
Cannot read properties of undefined (reading 'setError')
Opa, compare com o código do repositório, o link está na descrição do vídeo
VAi me salvar cara, vlw
Mano, parabéns. Se eu quiser colocar uma logo dentro do layout de login, como faz?
só adicionar o
@@alvin-dev Essa imagem ficou fixa após logar também, eu consigo deixar uma tela para logar e outra tela como dark light colocando cores específicas?
pera, onde tu adiciona a img ? no app.js ou nas rotas ?
O Meu import React from "react";
Não está funcionando, sabe me dizer porque ?
O arquivo tá com .js .ts ou .jsx? Se sim, qual o erro que dá ocorrendo?
TOP
MUITO BOM
Obrigado pelo feedback :D
Mas tem como integrar sapoha com banco de dados? Pq acho que quando dar um build no projeto ele deixa de funcionar com banco de dados -_-
Sim, o banco de dados vai ter que estar disponível daí quando subir
@@will_dev ata ;-;-;-;-;
Show! apesar de não entender nada kkkk. Amigo você presta serviços pra terceiros?
Preciso de criar uma tela de login pra um plugin que criei.
Opa, pior que no momento não mano
cara to querendo criar um desse so que sem a a pagina de cadastro, so que ele não esta logando com os dados que eu coloco no application
Você está validando pelo localstorage?
@@will_dev acabei de ver aqui, eu queria fazer uma tela de login so que com api externa
@@viniciusmazzoli5458 hmm, teria que ver alguns exemplos na net para facilitar teu entendimento, pior que não trouxe nada sobre isso ainda :/
Muito obrigado
Valeeu
O projeto tem o Mock da API?
Não tem :/
No tempo 9:55 porque você coloca "exact" antes de "Path"?
Para indicar que a página só vai aparecer exatamente para a rota do path
@@will_dev , Show, mano! Valeu pelo retorno!!! É uma atualização do React Router, não é? Eu sofri por causa disso em um curso menos atualizado do React.
creio que esse exact não seja mais necessário na versão 6 do router
Agora é só integrar com um PostgreSQL, Prisma, NestJS e GraphQL :)
Valeeu
puta merda cara, que vídeo absurdo de bom
Valeeu
e como que salva em um postgres ?
Não tenho ainda nenhum exemplo com PostgreSQL, mas fiz uns projetos aqui no canal com Fireblade e MySQL
Ta dando problema no meu filter, alguem sabe me ajudar?
Tenta comparar com o repositório
como assim no routes signed > 0 ??????
É apenas uma forma de verificar se o user está logado
mas onde eu puxo as informações de uma api ?
Teria que consumir uma api com o fetch ou axios, aqui no canal tem uns vídeos de intereção com o backend
Como vc faz isso? Vc simplesmente clica e o código aparece, isso e alguma extensão?
Opaa, não. Eu coloco o código vou removendo ele, e depois dou ctrl + z para ir desfazendo e aparecendo :D
@@will_dev hahahaha, muito boa a sua didática! aula top.
muuuuito complicado, meu Deus!
Aos poucos descomplica rs
Olá, perdoe minha ignorancia, por que o ?.lenght aqui? if (hasUser?.length) nessa verificação?
Olá Edson, para casos que hasUser não tenha nenhum valor, assim se for null ele não faz a verificação de length, e não ocorre erro.
@@will_dev blza, entendi
vc teria alguma rede social pra tirar duvidas com vc ? tipo discord
Olá, no momento não tenho.