Creating a registration form can require more details and validation than a sign in form. In this tutorial, we will create a user registration form that is complete with validation and accessibility features. All too often, accessibility is not included in tutorial projects, but it is a must! In addition, we will submit the form with axios to a Node JS REST API. If you are just getting started with React, I recommend completing my full React JS for Beginners course before attempting this tutorial: ua-cam.com/video/RVFAyFWO4go/v-deo.html
For anyone curious about pursuing Dave Grey's tutorials: I'm getting my master's in software engineering with no background in the field (don't get me started on all of that). I followed Dave's tutorials to help me with a class, and my prof and classmates were thoroughly impressed with what I came up with. All kudos to Dave. I strongly encourage anyone to follow his work, I wouldn't have gotten an A in my class without him!
Love the way you describe every little thing you do. "Minimize this, maximize that, Ctrl + B to hide, etc". Really nice for the people who don't use the same tool sets.
Exactly the tutorial I've been looking for. Thanks for this course Dave. You didn't just go straight to your project, you also explained why you used some things and how we can use them differently depending on what we want or the circumstance. Thank you again.
@@DaveGrayTeachesCode Just finished writing the code on the video. It works perfect. I used json-server and now I'm going to watch your nodejs mongodb video. Thanks for everything wise man!
Incredibly thorough tutorials, real world examples and it's all step by step.. you are brilliant! I use ReactJS as my frontend with a .NET Core backend, though I'm also starting to learn Node & Angular specifically for a personal project. I'm also doing my degree (BSc Computing & IT / Software Engineering) part time while I work & this is helping me learn so many different topics in a fraction of the time. The form validation, JWT auth (w/ aT & rT), Axios interceptors and the rest of the content covered in this playlist are absolute gold. Thanks so much for sharing all of this with us. You've definitely got another subscriber 😁
Coming across this as a beginner who is interested in but has not yet been taught much about accessibility, THANK YOU for teaching me some amazing things in this video. I'm looking forward to delving into so much more of your content after watching this.
Perfectly explained, divided, and paced! I'm relatively new to React and I didn't get lost at all since this tutorial was perfect. I also took the liberty to add in my own email field with validation as well. Also glad that you included accessibility. Thanks!
Hi Dave, you're way better than others, especially by adding assistance features. Now, because you asked, I'm going to mention that It puts me off if you do copy paste or don't follow the flow of the logic. It's better if you do everything from scratch logically. For example, I don't like it when you put all the states first and then use it, I'd prefer you start writing react renders first then write the hooks and JS when needed in logic. Overall though it's been a pleasure to learn from you. Nice 👍
Awesome. With your tutorials you make it so much easier to learn React. Wish I discovered your channel when I just started learning JS because back then it was a nightmare. But you explain every step perfectly. I`m definetely going to finish all your tutorials. Thanks a lot ! ))
Hi Dave. Thanks for releasing this video. It's pretty darn comprehensive and seems it could be used as a blueprint for most login forms. I like that you make the IDE's text much larger and have a theme that's easy to read. You'll be surprised by how many UA-camrs overlook these details, (which in my opinion makes the videos unwatchable). Will you be releasing any TypeScript content? I have been studying JS (and FE development overall) for just over a year. My intention is to transition from my current (non-developer related) job to a FE dev later this year. I started learning TS as it seems the trend is going that way, especially for modern FE development such as React. I wondered if you'd be releasing any TS content as you're a great teacher and in truth there isn't a whole lot of quality TS React videos on YT, so I feel you could capitalize on that. All the best.
I love the fact that your not spending time on typing the code and focused on explaining. do you have a podcast etc? I would like to listen to those and get mentored by you.
A really awesome video and awesome explanation for every small bit. Thank you Dave for creating such a wonderful project. Looking forward to completing this full playlist.
What an amazing tutorial - absolutely perfectly presented as quickly and precisely as possible - only recommendation is to not leave something unexplained (like resetting states to clear input fields) in future tutorials, although this was a rather self explanatory omission and my only, regretful critique. Thrilled to have watch and picked up what you put down here otherwise. Countless hours have gone into my study and search for this material and video. Thank you very much for making this video! Like and subscribe so this dude continues to win helping others do the same!
Hi Dave, I thought this would be like any other registration form creation tutorial but the i have seen none doing web accessibility along with react registration and error handling this good. Thank you. Awesome tutorial
What do you mean by putting the regex in the handleSubmit function, you were anyway checking with the useEffect right? which would mean at every state updation you are validating .... oh so you mean that someone could bypass the validation !!!! using the console to enable the disabled button????. So on submitting you also gave that validation logic!!! @DaveGrayTeachesCode BRILLIANT!
Another great tutorial Dave, amazing work. i liked your way to explaining everything and step by step approach. also it was great to learn importance of accessibility and how to make your forms more accessible. Thank you!
I have one question, Dave. According to this logic - first - we Sign Up and create a user on a backend second - we need to go to Sign in page to sign in, where if the user exists - we get authentication tokens and save them in Auth provider for future use. So my question is, that possibly, we can create our backend logic the way that after successful SIGNUP - we also receive auth tokens and can save them into auth provider. In this case we do not need to make user type in their credentials again. Am I thinking in a right direction?
You can do that. There are many approaches. Currently, most seem to wait until you validate your account with an email or text and then have you sign in.
Hello Dave, I like the pace of this video and I hope you continue and do more, I have a few alternatives (nothing serious though), - For USER_REGEX we can use [a-Z] instead of [a-zA-Z] - For the valid/invalid icons we may eliminate the span containing the icon and apply the className directly to the FontAwesomeIcon component also, we may use one font awesome icon and alternate its icon value along with its className like this: Just a note for people like me about the PWD_REGEX having the *question mark* followed by an *equal sign* in the group is called (zero-width positive lookahead assertion) which makes the regex behave differently than what we might think in short words, this type of group will reset the search start position after the expression inside did match, so the next group will start testing the string from the previous saved position (from the beginning of the string here) Regards and see you next year
Thanks for your solution and tips. However we don't want to hide the icon in all cases where there is a valid username. My solution seems to work as intended although there's probably a better way to write it.
It's very nice for me to watch this video. I've been looking for a complete form tutorial in react and when I see this tutorial I said that's it. But I think it seems to be a complete tutorial covering many aspects of the topic, so why to named it "Beginners to Intermediate"? What would be the advanced level?
You're log in is super robust - i love it - I'm wondering if you recommend the use of yup and formik for forms and validation otherwise. Why or why not?
Hello Dave , first I appreciate you for golden package about React Redux. I live in Tehran and I m 33 and my major aint IT or something like this , I learned css html js es6 bootstrap tailwind git and recently react redux in 6 monthes and I m doin a project to get a job , I just a bit baffled about tokens and wanna talk you directly if it s possible. much love 💜💜💜
Thank you. Your teaching content is awesome as usual though I got a question: is it a reasonable idea to use FormData class to grab all the input fields values?
Can you please teach us how to connect our ready front end with the backend like you did in this video after 31:41 minute. It started from axios chapter. That is really interesting for me. And I know very little about it
I'm doing this with a Spring Boot backend and intellij is saying the payload isn't in json but the x-form... format. I referenced MDN and ensured I did the stringify correctly. Any ideas?
the code looks cluttered in a single file and what approach should be follow if we have registeration form with a lot of details like name, phone, email, roll number, branch, address, how can we validate that and how can we separate the logic of validations from form components.
I saw u used async handleSubmit function meanwhile submit like a async function so why u have to do that. i just wonder why, btw thanks for this video i love that
Hey Dave, thank you so much for your great video!! I learned so much. I am doing a group project and I will be doing Log in - Sign up form. I can see that you are running mongo DB through Node JS. I appreciate that you've left the link in the description. Do I need to watch the whole 7 hour course in order to practice sign in and sign up features? Thanks again!
I suggest watching the 7 hour Node JS course if you want to understand exactly how the backend server is built. It especially helps to understand it when you get into protecting API endpoints with JWTs. If not, you can still use it for this React JS Login series. Full series here: ua-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html
@@DaveGrayTeachesCode Thank you so much. I will go take the Node JS quickly. I am going to be honest with you. Your teaching quality is just so amazing that it makes me speechless.
@@DaveGrayTeachesCode I've been following you since 2020 and I am happy that your channel is getting well known now. Thanks so much for the great videos!
Creating a registration form can require more details and validation than a sign in form. In this tutorial, we will create a user registration form that is complete with validation and accessibility features. All too often, accessibility is not included in tutorial projects, but it is a must! In addition, we will submit the form with axios to a Node JS REST API. If you are just getting started with React, I recommend completing my full React JS for Beginners course before attempting this tutorial: ua-cam.com/video/RVFAyFWO4go/v-deo.html
I'm building my own project and your tutorials really help me a lot. Thank you very much Dave 🙏🎉
can you make an extra episode for this. applying a debounce? thanks sir!
In this tutorial what u use as backend?
I want to use strapi as backend can i follow ur this series?
even though this video is 2 years ago, is it more practible to check password in a function rather than useEffect to prevent re-rendering ?
For anyone curious about pursuing Dave Grey's tutorials: I'm getting my master's in software engineering with no background in the field (don't get me started on all of that). I followed Dave's tutorials to help me with a class, and my prof and classmates were thoroughly impressed with what I came up with. All kudos to Dave. I strongly encourage anyone to follow his work, I wouldn't have gotten an A in my class without him!
Good job and congrats, Ali! 🚀 I appreciate the kind words and reference, too!
Love the way you describe every little thing you do. "Minimize this, maximize that, Ctrl + B to hide, etc". Really nice for the people who don't use the same tool sets.
You're very welcome!
With mysql ?
I just got a job promotion from frontend dev to fullstack dev and Dave's videos have proven to be invaluable in their comprehensiveness and detail.
Thank you, Eric! 🙏 This is the kind of feedback that keeps me motivated! And congratulations on your promotion! 💯🚀
Exactly the tutorial I've been looking for. Thanks for this course Dave.
You didn't just go straight to your project, you also explained why you used some things and how we can use them differently depending on what we want or the circumstance.
Thank you again.
You're very welcome!
Excellent! Please continue with this series... Navbars, react auth, etc... With your tutorials I have changed a lot of my old code due to bad habits
So glad to hear I've helped you, Gabriel! And thank you for the comment! 💯🙏
OMG! This is the best tutorial I've ever seen. It's very understandable and your speach is also so clear! Thank you so so much!
You're welcome! 🙏🙏
Definitely one of the most well put together tutorials I've come across. You're a great teacher. Thanks Dave.
Thank you for the kind words! 🙏
That was epic! Accessibility was never talked on a video I watched and you wrote your whole code based on accessibility. That's wonderful.
Glad you liked it! 💯
@@DaveGrayTeachesCode Just finished writing the code on the video. It works perfect. I used json-server and now I'm going to watch your nodejs mongodb video. Thanks for everything wise man!
Incredibly thorough tutorials, real world examples and it's all step by step.. you are brilliant!
I use ReactJS as my frontend with a .NET Core backend, though I'm also starting to learn Node & Angular specifically for a personal project. I'm also doing my degree (BSc Computing & IT / Software Engineering) part time while I work & this is helping me learn so many different topics in a fraction of the time. The form validation, JWT auth (w/ aT & rT), Axios interceptors and the rest of the content covered in this playlist are absolute gold. Thanks so much for sharing all of this with us.
You've definitely got another subscriber 😁
Thank you!
Coming across this as a beginner who is interested in but has not yet been taught much about accessibility, THANK YOU for teaching me some amazing things in this video. I'm looking forward to delving into so much more of your content after watching this.
Glad it was helpful!
Perfectly explained, divided, and paced!
I'm relatively new to React and I didn't get lost at all since this tutorial was perfect. I also took the liberty to add in my own email field with validation as well. Also glad that you included accessibility.
Thanks!
Thank you for the kind words and support!
Hi Dave, you're way better than others, especially by adding assistance features. Now, because you asked, I'm going to mention that It puts me off if you do copy paste or don't follow the flow of the logic. It's better if you do everything from scratch logically. For example, I don't like it when you put all the states first and then use it, I'd prefer you start writing react renders first then write the hooks and JS when needed in logic. Overall though it's been a pleasure to learn from you. Nice 👍
Great work Dave! Please continue to roll out more useful content like this. Much much appreciated!
You're welcome!
Awesome. With your tutorials you make it so much easier to learn React. Wish I discovered your channel when I just started learning JS because back then it was a nightmare. But you explain every step perfectly. I`m definetely going to finish all your tutorials. Thanks a lot ! ))
Glad to hear that, Oleg! 💯
Hi Dave. Thanks for releasing this video. It's pretty darn comprehensive and seems it could be used as a blueprint for most login forms.
I like that you make the IDE's text much larger and have a theme that's easy to read. You'll be surprised by how many UA-camrs overlook these details, (which in my opinion makes the videos unwatchable).
Will you be releasing any TypeScript content? I have been studying JS (and FE development overall) for just over a year. My intention is to transition from my current (non-developer related) job to a FE dev later this year. I started learning TS as it seems the trend is going that way, especially for modern FE development such as React. I wondered if you'd be releasing any TS content as you're a great teacher and in truth there isn't a whole lot of quality TS React videos on YT, so I feel you could capitalize on that.
All the best.
Thanks for the request 🙏 TS is on my list for 2022 🚀
I'm building my own project and your tutorials really help me a lot. Thank you very much Dave 🙏🎉
You're welcome! 💯
I am watching this video after three years but it still help me alot thanks thanks alot Dev
Really good approach having the code written beforehand and just pasting bits and explaining them.
I love the fact that your not spending time on typing the code and focused on explaining. do you have a podcast etc? I would like to listen to those and get mentored by you.
Thank you for the kind words! 🙏 No podcast at this time.
This was difficult, but I learned so much from it. Great explaination. Makes sense why you teach at a university
I'm glad I could help! 💯
This is a legendary video. Thank you for taking your time to make these videos they are easy to understand and very clear.
You're very welcome! 💯
The best production-ready tutorial I ever had.
Thank you!
A really awesome video and awesome explanation for every small bit. Thank you Dave for creating such a wonderful project. Looking forward to completing this full playlist.
Glad it was helpful!
What an amazing tutorial - absolutely perfectly presented as quickly and precisely as possible - only recommendation is to not leave something unexplained (like resetting states to clear input fields) in future tutorials, although this was a rather self explanatory omission and my only, regretful critique. Thrilled to have watch and picked up what you put down here otherwise. Countless hours have gone into my study and search for this material and video. Thank you very much for making this video! Like and subscribe so this dude continues to win helping others do the same!
Thank you Dave. Your codes are so clean and easy to understand. One the best videos I have ever seen. please make more videos, appreciate your work!
Thank you for the kind words! 🙏💯
Learnt a lot Dave!! Thanks a lot.
Keep uploading.
Wish you a great year ahead
Thank you, Sayan! 💯🙏
I love the pace of your videos, juuuust the right speed for me intermediate.
Great to hear!
Wonderful Tutorial. Learned a lot. Thanks Dave.
Thank you for the useful video. If I get a job in that sphere, I will start using the "Thanks" button every time I watch such good content.
You're very welcome!
one of the best in-depth sign-up guides I've seen
Thank you!
Fantastic tutorial, a unique way of explaining, keep it up, brother.
Glad it was helpful!
This course was useful for me , in developing a website as an intermediate.
There is a lot here. Intermediate level is good. Keep moving!
Glad to hear it and thanks for the feedback! 💯
Hi Dave, I thought this would be like any other registration form creation tutorial but the i have seen none doing web accessibility along with react registration and error handling this good. Thank you. Awesome tutorial
Thank you for the kind words, Yaswanth! 💯
As far as Dave is concerned, I rest my case. I wish the programming world would know him.
Dave thanks again for making this excellent content available. I'm here in Brazil following your every post. Sorry about my English
You're welcome!
Dude, your tutorials ARE FREAKING AWESOME! Great work!
Thank you for the kind words, Bohdan! 💯🚀
Superb tutorial as always! Looking forward to more in the new year.
Happy New Year and thank you!
I love your examples.....very realistic and as necessary as ever...... Properly explaining everything....big ups bro
Thank you for the kind words! 💯🚀
this series will help me up my skill level in react ..thank you dave
You're welcome!
Even though I already know these things, I still love to listen to the way you explain it ❤️
Thank you! 🙏
What do you mean by putting the regex in the handleSubmit function, you were anyway checking with the useEffect right? which would mean at every state updation you are validating .... oh so you mean that someone could bypass the validation !!!! using the console to enable the disabled button????. So on submitting you also gave that validation logic!!! @DaveGrayTeachesCode BRILLIANT!
Great Dave!!! This is just what I needed.
Glad to hear that!
I never thought of that I will learn so much about HTML attributes in a react tutorial ❤❤❤❤❤❤
Right on! 💯
You are most kind teacher of react login
In the world
Thank you 🙏🙏
thanks for the nice comprehensive tutorial . will follow nodejs course now and then come back on this, please keep it up.
You're welcome, Rohan! 🙏
Dave Gray, thanx so much for these tutorials, really appreciate them they have changed how i write code
You're welcome! And glad I have helped you 💯
No fancy React stuff or JavaScript nightmares, probably because I have already learnt react but still it is simple and informative.
Another great tutorial Dave, amazing work. i liked your way to explaining everything and step by step approach. also it was great to learn importance of accessibility and how to make your forms more accessible. Thank you!
Glad it was helpful!
Thx a lot from Brittany - France, you made may day : i will follow all your tuts !
You're welcome, Brittany! And hello to France! 👋
If only I've learned about your tutorials sooner, my first experience with React would be more pleasant
I hope they help now! 💯
Wow...! Amazing tutorial, it helped me so much in understanding and applying full form processing with React!
Glad it helped! 💯
Thanks Dave for the wonderful React form. Undoubtedly Awesome
Awesome video, thanks for this. Loved the dive into accessibility!
Glad you enjoyed it!
You're the best Dave, Thanks for making these tutorials
Thank you for the kind words! 🙏🙏
I have one question, Dave.
According to this logic - first - we Sign Up and create a user on a backend
second - we need to go to Sign in page to sign in, where if the user exists - we get authentication tokens and save them in Auth provider for future use.
So my question is, that possibly, we can create our backend logic the way that after successful SIGNUP - we also receive auth tokens and can save them into auth provider.
In this case we do not need to make user type in their credentials again. Am I thinking in a right direction?
You can do that. There are many approaches. Currently, most seem to wait until you validate your account with an email or text and then have you sign in.
Thank you man. Awesome, best tutorial ever. Keep it up
Thankyou for being so clear with you explanations. Appreciated
You're welcome!
Hello Dave,
I like the pace of this video and I hope you continue and do more,
I have a few alternatives (nothing serious though),
- For USER_REGEX we can use [a-Z] instead of [a-zA-Z]
- For the valid/invalid icons we may eliminate the span containing the icon and apply the className directly to the FontAwesomeIcon component
also, we may use one font awesome icon and alternate its icon value along with its className like this:
Just a note for people like me about the PWD_REGEX
having the *question mark* followed by an *equal sign* in the group is called (zero-width positive lookahead assertion) which makes the regex behave differently than what we might think
in short words, this type of group will reset the search start position after the expression inside did match, so the next group will start testing the string from the previous saved position (from the beginning of the string here)
Regards and see you next year
Thanks for the comment, Ahmad 🙏 Nice syntax notes! And Happy New Year my friend! 💯
@@DaveGrayTeachesCode To you and to your family too my friend,
it was a very good and informative dev year with you, so thank you
You're welcome, and I have enjoyed your input this year as well. Here's to a great 2022! 🚀
Thanks for your solution and tips. However we don't want to hide the icon in all cases where there is a valid username. My solution seems to work as intended although there's probably a better way to write it.
@@MeAsMeButMe You're welcome,
That would also work,
I am enjoying every teaching video you have brought about. Thank you!!!!!!
You are so welcome!
I have a question. Why you put the errRef to the p errMsg and set focus to it when have err? (sorry about my english :vv)
Getting the issue.
Failed to load resource: net::ERR_CONNECTION_REFUSED
Can you please suggest how to resolve it?
Hello Dave, my uid note displays as soon as the page is loaded without input or focus on user. Any idea on why?
It's very nice for me to watch this video. I've been looking for a complete form tutorial in react and when I see this tutorial I said that's it. But I think it seems to be a complete tutorial covering many aspects of the topic, so why to named it "Beginners to Intermediate"? What would be the advanced level?
This is a great way of doing your tutorial
Hoping to see you with a million of subscribers here.
One day! Let's keep making progress! 🚀🚀
Thank you very much Dave! I'm just a beginner and it's help me a lot❤
Glad to hear that! 💯
Thanks allot. We need to see your full sales on udemy with real life react project, testing and deployment. Thanks Dave
Thank you! I do plan to release courses in the new year 💯🙏
Thanks Dave for your effort and time put into this.
You're welcome! 💯
What a wonderful video. Thank you Dave!
You are very welcome!
you made my Day ! Best Explanation Thank You mr Dave
You're welcome! 💯
👏👏👏 The best tutorial ever
Why are there no "value" attributes in each input item? Don't we need that for React to control the inputs?
Is there any reason putting validation logic in useEffect rather than change handler?
Thanks for great tutorials.
Super! Thank you Dave :)
You're welcome!
It would be a good idea to give audible feedback of "passwords match".
You're log in is super robust - i love it - I'm wondering if you recommend the use of yup and formik for forms and validation otherwise. Why or why not?
You can use those tools if you want. I like React-Hook-Form, too. Creating your own as I did here helps further understanding / learning.
Hello Dave ,
first I appreciate you for golden package about React Redux.
I live in Tehran and I m 33 and my major aint IT or something like this , I learned css html js es6 bootstrap tailwind git and recently react redux in 6 monthes and I m doin a project to get a job , I just a bit baffled about tokens and wanna talk you directly if it s possible.
much love 💜💜💜
You can join my Discord to ask more questions. Link in the header of my UA-cam channel.
woow the tutorials are great ,i have learnt alot from them,, am kindly requesting for a forgot password tutorial
That's a great request! Thank you! 💯🚀
Love your videos. Keep up the amaing work🙌🙌
very helpful tutorial, thanks a lot
Great course, thank you a lot for such a detailed course
You're welcome!
this is amazing so detailed.wow i am genuinely just happy
Glad to hear that, Tarek! 💯
Thank you. Your teaching content is awesome as usual though I got a question: is it a reasonable idea to use FormData class to grab all the input fields values?
Can you please teach us how to connect our ready front end with the backend like you did in this video after 31:41 minute. It started from axios chapter. That is really interesting for me. And I know very little about it
Keep going in this playlist. You will see other videos where I do it.
What an amazing work keep going forward... I think it would better to these stuff register and login with redux it will be marvelous
Thank you, Haider! I like your suggestions and will keep going! 💯🚀
Is there any way we could use lesser amount of hooks ? especially the useState hooks ?
I'm doing this with a Spring Boot backend and intellij is saying the payload isn't in json but the x-form... format. I referenced MDN and ensured I did the stringify correctly. Any ideas?
Nice tutorial. Glad I found your videos.
Thank you, Venkat! 🙏
Awesome teacher and guru
Thank you!
Wow, this is great, this channel is a great find
I'm glad you're here! 💯
I Love this guy, i hope to meet you some day
Thank you!
axios headers content-type: application/json. U dont need to write the header because it is by default application/json
THE BEST 🔥🔥
Thank you!
the code looks cluttered in a single file and what approach should be follow if we have registeration form with a lot of details like name, phone, email, roll number, branch, address, how can we validate that and how can we separate the logic of validations from form components.
Again, thank you for this. Thank you!
You're welcome!
I saw u used async handleSubmit function meanwhile submit like a async function so why u have to do that. i just wonder why, btw thanks for this video i love that
Just a note: backend does it's own validation. If it doesn't it's a terrible security hole (it's insane actually)
you are amazing developer
Hey Dave, thank you so much for your great video!! I learned so much.
I am doing a group project and I will be doing Log in - Sign up form.
I can see that you are running mongo DB through Node JS. I appreciate that you've left the link in the description. Do I need to watch the whole 7 hour course in order to practice sign in and sign up features?
Thanks again!
I suggest watching the 7 hour Node JS course if you want to understand exactly how the backend server is built. It especially helps to understand it when you get into protecting API endpoints with JWTs. If not, you can still use it for this React JS Login series. Full series here: ua-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html
@@DaveGrayTeachesCode
Thank you so much. I will go take the Node JS quickly. I am going to be honest with you. Your teaching quality is just so amazing that it makes me speechless.
@@DaveGrayTeachesCode I've been following you since 2020 and I am happy that your channel is getting well known now. Thanks so much for the great videos!
@@frank3481 thank you so much for the kind words 💯🙏