Login Form in ReactJS with React Hooks

[@kashmirtechtv2948]

Changing the gradient with Background position on Hover is cool

[@hedgewizardly]

I really appreciate you taking the time to throw in some CSS to this too, because even if I've got slightly different use cases, it really helps to contextualise what you've taught us and how changing certain values affects the end result!

[@Sidspiritual]

you are awesome brother i got my job as a react js developer just becoz of your channel and Thapa Technical

[@TylerPotts]

Woah that's awesome good luck with your career!

[@ased4u]

finally a dev who doesnt just ends project with console.log or with preventdefault in a beginner tutorial. Thank you man! Im totally new to coding. and your tutorial for forms is the first one that inculdes everything from a-z and as a newbie thats really important to me. keep up the good work. btw: the else statement wasnt working whenever i put conlos log in IF statement. i had to take it out to make it work.

[@TylerPotts]

Glad I could help!

[@EstebanTobon-rv6lb]

I love this! It was so hard to find a simple video that can actually teach beginners! Thank you for providing an understanding on how to set this up!

[@MP-mh1tu]

I've seen many tutorials on the subject but this one is the absolute best one by far.

[@noneyahbiz6976]

Thanks for this...this saved me LOL- Everyone else is throwing weird GUI crap in the dev of this so they really don't have to code anything in react- This is straight- thanks- I am subscribing :) for reals-

[@mj2758]

just a quick note you can use the CSS shorthand property INSET instead of "top right bottom left "

[@stefanmasic1287]

Dear Tyler. Thank you very much. It took me 3 hours and my Login definitely works. With no knowledge I would strugle throug React, TDD etc. Thanks, Štefan.

[@TylerPotts]

Glad it helped!

[@yannickfonkeu701]

Merci beaucoup Tyler POTTS car avec ton explication dans cette vidéo on est en confiance de se lancer dans REACT js. Que DIEU te bénisse.

[@TylerPotts]

😁

[@guitarholicz]

This video is really a good stuff, I really enjoy and learnt from it. Thanks for this video.

[@TylerPotts]

Glad you enjoyed it!

[@muhammadumarkhan2848]

Thanks a lot for a quick fast and easy to understand tutorial to get a startup. thought 1 would need basic React understanding before really diving into the login form tutorial. but once u have a basic understanding. this one is pretty much a piece of cake to understand.

[@TylerPotts]

Glad it helped!

[@madhumathiravichandran1659]

Hey Tyler, your videos are amazing . Thank you for this simple and excellent steps.

[@kashmirtechtv2948]

❤️❤️❤️❤️❤️❤️❤️❤️❤️ If we can get some detailed understanding as well this will become best😍

[@kamola9142]

Thanks a lot, very well explained👌👌

[@TylerPotts]

Happy to help

[@andrewchen2349]

This is so helpful! Thank you so much for this tutorial!

[@rahul7vlog]

easy and simple to understand , awesome work

[@TylerPotts]

Glad you think so!

[@jinkisaragi8679]

Bro this is so much easy to understand, thank you for going step by step, just could you help me add a bit of comment in each function just so an newb like me didn't get messed up? I gotta reward a few time to get it all XD

[@danavzaradel]

6:22 well that's a nice trick I didn't know... great content, thanks a lot

[@TylerPotts]

Glad you liked it!

[@chtsilva]

Thank you friend, from Brazil.

[@TylerPotts]

Welcome to the channel!

[@lywatanak8594]

Thank for this videos admin 👍

[@NanduKandula52]

Hey Tyler great video and lots to learn about especially for a new guy like me can you update where is the source code for this tutorial???

[@TylerPotts]

Thank you and sorry I no longer have the source code! 😅

[@fehmiig]

hey bro, what is details? i cant use that. can u explain this parameter basically?

[@Atstyle]

Great tutorial, I wonder what kind of extension you're using for the jsx tags auto-complete?

[@ashaoluayanfe7474]

Prettier should do the work

[@luigikart11]

settings >> extensions >> emmet >> "Include Languages" >> Add item (key: javascript, value: javascriptreact) :)

[@mohanvaddi]

@@luigikart11 Thanks, It worked. :)

[@edwardkevin8650]

I learned a lot, thx so much !!!

[@TylerPotts]

Glad it was helpful!

[@Pl-vw4wd]

Cool, but what if someone have more pages than one? When I change page it kick me out and I have to re-login.

[@jbcastillo5129]

Can I ask for help, cause when I tried to input else statement, I got error on it.

[@Ayoutubeaccount3]

very well explained

[@TylerPotts]

Glad you think so!

[@Maayan_1]

Hi, work perfectly! thanks. what is the correct way to move on from login form to main/register page! Yuval

[@butchiraju669]

thanks bro it helped me a lot

[@TheNamesJT]

How would you connect your backend? to your front end? if you coded the back-end login and registration already using mongodb, express? I already have endpoints for login and password I just don't know how to talk to the backend from the front end...

[@TylerPotts]

I would use Axios! www.digitalocean.com/community/tutorials/react-axios-react

[@tufan7123]

Is there any background music in first few minutes?? or my headphone is not good....

[@arpitprasad2249]

Why do we have to destructure the details props in setDetails at 11:45?

[@8wab0]

It's really cool it helped me 💯

[@TylerPotts]

Glad to hear that!

[@DevsLikeUs]

Great tutorial.

[@TylerPotts]

Thank you!

[@deanhome1]

is it possible to ty this into a backend using flask sqlalchemy & marshmallow fyi im a noob

[@tsalisrosyadi1441]

You've got my attention, thanks for the video

[@TylerPotts]

You're welcome

[@nailam4734]

Merci beaucoup pour cette vidéo et bonne continuation

[@kashmirtechtv2948]

Whu do we use form:after?

[@ivanriverosgarcia8924]

Amazing bro! Thank you very much

[@TylerPotts]

No problem!

[@ameedk48]

Which vs code theme you are using?

[@TylerPotts]

Synthwave 84

[@javimombiela6228]

what theme are you using?

[@othmanetouri6354]

what theme is that in vs code ?

[@msuleman7786]

Thanks, this is really helpful

[@TylerPotts]

I'm happy it is helpful, Suleman!

[@gaurav8113]

Hey Suleman! Are you a self-taught programmer and build projects to learn? If yes, please reach out to me so that we can discuss some interesting software development roles in latest technologies!

[@ahmedchouihi]

Thanks a lot, simple and exact

[@TylerPotts]

You're welcome!

[@mariasohail2416]

This is great! Where is the github link to this repo?

[@thesimplypleasure4746]

Great, But.. but.. but.. how to keep logged in, while the page is refreshed?

[@beyondepicness]

Hello sir how did you run them with the localhost

[@hassanzafar4849]

when i click out logout button after input the wrong then correct credentials it says details donot match how do i remove this

[@Maayan_1]

Hi, thanks for sharing your knowledge. I'm running through some issues, straight after writing the first line as you did I got on the app page this: ERR_CONNECTION_REFUSED and not showing anything. did I do something wronge?

[@MrAsandler]

what about routing ??

[@mayankkandari6794]

Great one

[@paingoo1999]

how do u make the border with gradient for the welcome page?

[@herdiyanafirmansyah5155]

if i create in another file, that's work?

[@nikhiltiwari1525]

@tyler potts which color theme you use?

[@priyankaroberts1093]

Hey Nikhil Have you created any projects in JavaScript frameworks? Are you interested in opportunities with regard to web development currently ?

[@poornashreethirumalai3220]

how does it auto complete when he types in .form-inner or .form-group and the entire line appears? It doesnt auto complete for me? whats the solution?

[@ritahung4470]

try Ctrl+Shift+P and type "open settings" to open the setting.json then add line "emmet.triggerExpansionOnTab": true

[@congtrongtran8701]

code is easy to understand. tks

[@anaghamulay5442]

How to link another page like HomePage.js to the Submit button?

[@kushagraaagnihotri1081]

index.js:1 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. HELPPP ME ANYONEEE!

[@gaurav8113]

Hey Kushagra! Are you a self-taught programmer and build projects to learn? If yes, please reach out to me so that we can discuss some interesting software development roles in latest technologies!

[@abaabiilsuryawinata3604]

thanks mate

[@TylerPotts]

You're welcome!

[@vanessagill8846]

This is so helpful, thank you

[@TylerPotts]

Glad it was helpful!

[@esihazar1270]

where can I found the actuall code

[@hedgewizardly]

Thanks

[@TylerPotts]

Oh wow thank you!

[@aazimsheikh279]

Thanks, the form validation works amazing. I just wanna ask that when I logged in successfully, if I hit refresh it redirect to the login form again. What can I do so that it will stay on the page?

[@priyankaroberts1093]

Hey Aazim Good to know that you like learning from these tutorials. Are you open to exploring opportunities in web development presently?

[@aazimsheikh279]

@@priyankaroberts1093 yes I am. If there's any please let me know

[@priyankaroberts1093]

@@aazimsheikh279 Aazim could you kindly reach out to me using the contact details mentioned on my channel so that we can discuss it in detail ?

[@priyankaroberts1093]

@@aazimsheikh279 Hey Aazim. Just following up. Are you still interested in the software development opportunity ? Kindly connect with me if you do!

[@aazimsheikh279]

@@priyankaroberts1093 yes, I am interested

[@ramyakonujula5540]

while clicking on the login button - then in console i didnt get any parameters name email and password as empty field can anyone tell me plz how to solve this issue

[@tijos98]

what is this theme in VS? It looks nice

[@karmapatel1477]

bro thanks for this video

[@TylerPotts]

No problem

[@alizain3715]

does anyone at 11:56 why he used ...details why did he use the three dots..I am new :)

[@OhBanq]

what extension did u use when u typed ".form-group"? Great tutorial btw!

[@thomasfuckingshelby8466]

me too idk why he can do it tell me plss

[@hassanzafar4849]

Its called VS Code ES7 React/Redux/React-Native/JS snippets and you have to write .formgroup and it will create the div automatically

[@huynguyenngoc2556]

u can retype the file to .jsx instead of .js

[@paoxeroxe]

Still have bug of Error message: "Details do not match!"

[@navyasreemallela4887]

yeah same doubt

[@muhammadowais2873]

thank you

[@imrans.m6788]

please provide all the extension you installed in vs code

[@phanluongcongthang5433]

what theme vscode pls?

[@Zorohere123]

can we get that coading part as a file please

[@TylerPotts]

Sorry I don't have it anymore

[@Pedro-yo4hr]

Thanks for the video. What's the extension that allows you to write .classname to automatically turn it into JSX?

[@TylerPotts]

Thats just emmet! It's built into VSCode

[@Pedro-yo4hr]

@@TylerPotts oh, i see. it only works on my .css files, not on my .js files

[@novanoskillz4151]

@@Pedro-yo4hr you have to enable it

[@hardwired66]

Love it

[@muhammadfaiq8466]

May i get the github repo for this tutorial?

[@arpitprasad2249]

in LoginForm.js what is that e in submitHandler function?

[@priyankaroberts1093]

Hey Arpit Have you worked with any JS Frameworks recently ? Would you like to explore internship/job opportunities in web development ?

[@emmanuelmadu7052]

can i get thee css file link??

[@Sharanagina]

how to get the code

[@SearchAndSolve12345]

great 🤗👍👍👍👍👍👍👍

[@thepatternhub853]

thanks alot

[@MP-mh1tu]

what is yarn? doesn't work when I launch it

[@tmajormajor6292]

replace yarn with npm

[@MP-mh1tu]

@@tmajormajor6292 thank you

[@muhammadmuqeet6472]

could you provide source code for this ?

[@Mohammed-rx6ok]

Vscode theme name plz?

[@amaechichisom787]

Great tutorial, can you attach the the link to the code

[@XChriSBaTa24]

just do it!

[@dipanjandas9463]

I am a beginner. Please teach slowly and explain. I didn't understand the onChange part.

[@moustachemen26]

nicee

[@ryanfrancisco8109]

Do you have source code for this?

[@ConsulthinkProgrammer]

Use apps script for an alternative with database in google sheets

[@wafafelahi2297]

there is no source code plz ?

[@NickNNME]

Hello, great video but im stuck, i keep getting an error, "Login is not a function"? at 10:00

[@NickNNME]

solved

[@mojomojo4668]

I have the same error as you corrected it

[@mojomojo4668]

solved AJAJAJJA

[@garlandrajasalan5076]

@@NickNNME - may i know how you have solved it? Your response will help. THANK YOU

[@NickNNME]

@@garlandrajasalan5076 I believe I just had a syntax error

[@ipeksudegun688]

where is the source code? please

[@ramyakonujula5540]

can anyone share the link for this page

[@priyankaroberts1093]

Hey Ramya Have you worked on any JS projects lately ? Are you open to opportunities in software development ?

[@raghavendraps518]

cool

[@tjpendarvis5262]

You kind of sound like Anderson Webb lol

[@fmikael1]

> What level of British are you ? Free

[@TylerPotts]

🤣🤣

[@kalynndier6524]

I keep getting Login is not a function when adding Login(details) to the submitHandler on LoginForms. And yes, I've added Login as a prop to the LoginForm function. function LoginForm({Login, error}) { const [details, setDetails] = useState({name: '', email: '', password: ''}); const submitHandler = e => { e.preventDefault(); Login(details); }

[@kaihengzhang5521]

Have you solved that? I got same one

[@chromevox8723]

i got this error when "Login, error" were not in {}, dont know whats the problem in your code

[@noneyahbiz6976]

I got the same thing?? Whats up with that?

[@noneyahbiz6976]

Oh hey I fixed it...passing a const in as a props sometimes messes it up so I took the props out...moved the entire code over to the LoginForm.js- function LoginForm() { const adminUser{} const [user, setUser] const [error, setError] const Login = details => blah blah blah const logout= const [details, setDetails] const submitHandler = e=> return( form) on the App.js just set up the routes to your LoginForm() import LoginForm from './componenet/LoginForm; import {Route } from 'react-router-dom'; function App() { return( )} export default App; and set your around the index.js

[@josephawad4388]

can you give use the code source please?

[@TylerPotts]

Sorry I no longer have the source code.

[@QuickJourneyHub]

Dont you have github repo :O ?

[@TylerPotts]

Unfortunately not, I'll make sure future projects all have repos!

[@SamratAkkinepally]

I couldn't understand without source code......please post source code link