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: kzread.info/dash/bejne/hIp6o9t_h7Kal9I.html

@NamNguyen-oz8uj

2 жыл бұрын

I'm building my own project and your tutorials really help me a lot. Thank you very much Dave 🙏🎉

@Alex-xe6bl

2 жыл бұрын

can you make an extra episode for this. applying a debounce? thanks sir!

@jamstack3538

Жыл бұрын

In this tutorial what u use as backend? I want to use strapi as backend can i follow ur this series?

@mohamed__sharif

3 ай бұрын

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!

@DaveGrayTeachesCode

2 жыл бұрын

Good job and congrats, Ali! 🚀 I appreciate the kind words and reference, too!

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

Жыл бұрын

You're very welcome!

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.

@DaveGrayTeachesCode

Жыл бұрын

Thank you, Eric! 🙏 This is the kind of feedback that keeps me motivated! And congratulations on your promotion! 💯🚀

Definitely one of the most well put together tutorials I've come across. You're a great teacher. Thanks Dave.

@DaveGrayTeachesCode

Жыл бұрын

Thank you for the kind words! 🙏

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.

@DaveGrayTeachesCode

Жыл бұрын

You're very welcome!

@eyadambri9382

Жыл бұрын

With mysql ?

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

@DaveGrayTeachesCode

2 жыл бұрын

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!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏🙏

Great work Dave! Please continue to roll out more useful content like this. Much much appreciated!

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

That was epic! Accessibility was never talked on a video I watched and you wrote your whole code based on accessibility. That's wonderful.

@DaveGrayTeachesCode

2 жыл бұрын

Glad you liked it! 💯

@enes98li1

2 жыл бұрын

@@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 😁

@DaveGrayTeachesCode

Жыл бұрын

Thank you!

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 KZreadrs 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.

@DaveGrayTeachesCode

2 жыл бұрын

Thanks for the request 🙏 TS is on my list for 2022 🚀

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 ! ))

@DaveGrayTeachesCode

Жыл бұрын

Glad to hear that, Oleg! 💯

Really good approach having the code written beforehand and just pasting bits and explaining them.

Wonderful Tutorial. Learned a lot. Thanks Dave.

Learnt a lot Dave!! Thanks a lot. Keep uploading. Wish you a great year ahead

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Sayan! 💯🙏

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!

@DaveGrayTeachesCode

Жыл бұрын

Thank you for the kind words! 🙏💯

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.

@DaveGrayTeachesCode

Жыл бұрын

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!

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.

@DaveGrayTeachesCode

Жыл бұрын

Glad it was helpful!

Dude, your tutorials ARE FREAKING AWESOME! Great work!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words, Bohdan! 💯🚀

I'm building my own project and your tutorials really help me a lot. Thank you very much Dave 🙏🎉

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯

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!

@DaveGrayTeachesCode

3 ай бұрын

Thank you for the kind words and support!

Thanks Dave for the wonderful React form. Undoubtedly Awesome

Thank you man. Awesome, best tutorial ever. Keep it up

Awesome video, thanks for this. Loved the dive into accessibility!

@DaveGrayTeachesCode

Жыл бұрын

Glad you enjoyed it!

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!

@DaveGrayTeachesCode

Жыл бұрын

Glad it was helpful!

Superb tutorial as always! Looking forward to more in the new year.

@DaveGrayTeachesCode

2 жыл бұрын

Happy New Year and thank you!

Great Dave!!! This is just what I needed.

@DaveGrayTeachesCode

Жыл бұрын

Glad to hear that!

What a wonderful video. Thank you Dave!

@DaveGrayTeachesCode

Жыл бұрын

You are very welcome!

very helpful tutorial, thanks a lot

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)

This course was useful for me , in developing a website as an intermediate.

This is a legendary video. Thank you for taking your time to make these videos they are easy to understand and very clear.

@DaveGrayTeachesCode

2 жыл бұрын

You're very welcome! 💯

Dave Gray, thanx so much for these tutorials, really appreciate them they have changed how i write code

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! And glad I have helped you 💯

You're the best Dave, Thanks for making these tutorials

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words! 🙏🙏

Great tutorial. Learned and followed along very easily!

@DaveGrayTeachesCode

Жыл бұрын

Glad it helped!

This was difficult, but I learned so much from it. Great explaination. Makes sense why you teach at a university

@DaveGrayTeachesCode

2 жыл бұрын

I'm glad I could help! 💯

The best production-ready tutorial I ever had.

@DaveGrayTeachesCode

Жыл бұрын

Thank you!

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?

Thanks Dave for your effort and time put into this.

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯

Love your videos. Keep up the amaing work🙌🙌

I love your examples.....very realistic and as necessary as ever...... Properly explaining everything....big ups bro

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words! 💯🚀

Wow...! Amazing tutorial, it helped me so much in understanding and applying full form processing with React!

@DaveGrayTeachesCode

2 жыл бұрын

Glad it helped! 💯

Dave for the best

beautiful tutorial

Thankyou for being so clear with you explanations. Appreciated

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Simply Brilliant!

you made my Day ! Best Explanation Thank You mr Dave

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯

thanks for the nice comprehensive tutorial . will follow nodejs course now and then come back on this, please keep it up.

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome, Rohan! 🙏

Super! Thank you Dave :)

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

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 👍

Thanks Dave, you are a gem.... keep the good work .

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome, Daniel!

Thank you very much Dave! I'm just a beginner and it's help me a lot❤

@DaveGrayTeachesCode

2 жыл бұрын

Glad to hear that! 💯

I love the pace of your videos, juuuust the right speed for me intermediate.

@DaveGrayTeachesCode

Жыл бұрын

Great to hear!

this series will help me up my skill level in react ..thank you dave

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Dave thanks again for making this excellent content available. I'm here in Brazil following your every post. Sorry about my English

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Again, thank you for this. Thank you!

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

When applying for junior dev positions, do you think it is bad to aim for a MERN position? I've been learning React and Node separately and then was hoping to create some projects. However, i've read some articles which mentions that might be better off with. React first since full stack generally entails more responsibility/experience.

@DaveGrayTeachesCode

Жыл бұрын

I'd look for any and all openings that are available. It is good to know everything you can, but do not limit your scope when looking for open positions.

Even though I already know these things, I still love to listen to the way you explain it ❤️

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 🙏

fruitful and detailed

excellent thank you !

one of the best in-depth sign-up guides I've seen

@DaveGrayTeachesCode

Жыл бұрын

Thank you!

Thx a lot from Brittany - France, you made may day : i will follow all your tuts !

@DaveGrayTeachesCode

Жыл бұрын

You're welcome, Brittany! And hello to France! 👋

Hello Dave, my uid note displays as soon as the page is loaded without input or focus on user. Any idea on why?

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

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words, Yaswanth! 💯

@melchizedek79

Жыл бұрын

As far as Dave is concerned, I rest my case. I wish the programming world would know him.

Is there any reason putting validation logic in useEffect rather than change handler? Thanks for great tutorials.

How wiil it be usign auth system (context and provider) with keycloak?

this is amazing so detailed.wow i am genuinely just happy

@DaveGrayTeachesCode

Жыл бұрын

Glad to hear that, Tarek! 💯

best best best dave!! you are great thankss

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏🙏

Nice tutorial. Glad I found your videos.

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Venkat! 🙏

Hello Dave, thank you for the video! is the synthax for the icons still up to date? I ran into an issue that the icons and the notes are always visible even though the validation is set on true, so i suppose sth. is wrong with these phrases work properly. Unfortunately I could not find anything that helped me in the web so I hope you or somebody of your community could help.

@HanLok420

8 ай бұрын

Okay, i found a solution on my own instead of you proposal I have used an other method for conditional rendering: {!UserFocus ? () : validUser ? ( ) : ( )} Translation: If UserFocus is not true print nothing, else if input of user is valid print the hook, else print the X. The same logic works for the notes: {!UserFocus ? ( ) : validUser ? ( ) : (some note text

Awesomely explained. Thank you. You are the greatest teacher

@DaveGrayTeachesCode

Жыл бұрын

You're very welcome!

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?

Great course, thank you a lot for such a detailed course

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Hey Dave.. Which part of the Node.js course do I need to pick up from to be able to complete the backend of this project?

@DaveGrayTeachesCode

2 жыл бұрын

If you are already familiar with Node, you can jump to chapter 6 where the express framework begins.

Fantastic tutorial, a unique way of explaining, keep it up, brother.

@DaveGrayTeachesCode

15 күн бұрын

Glad it was helpful!

There is a lot here. Intermediate level is good. Keep moving!

@DaveGrayTeachesCode

2 жыл бұрын

Glad to hear it and thanks for the feedback! 💯

hello dave, for the backend used for this playlist session, do i just have to clone and run npm install for all dependencies, without having to set up the database on mongoDB? Because I got an error like this when running npm run dev in the end nodejs code of your video "MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose .connect()` or `mongoose.createConnection()` is a string"😊

@DaveGrayTeachesCode

2 жыл бұрын

You do need to set up your own MongoDB and provide your own .env file values, too.

@bvfromruvitaliy

2 жыл бұрын

@@DaveGrayTeachesCode Is there any quick way to do it if I know nothing about backend and I'm planning to study it later? ps. Thanks for your channel, just found it few weeks ago and it's amazing!

Great job 🎉. Your tutorial saves me a ton of time.

@DaveGrayTeachesCode

Жыл бұрын

Glad to help!

@youngzproduction7498

Жыл бұрын

@@DaveGrayTeachesCode now I’m going through all the series. They are pure gold.

Hi Dave, I am trying to follow along, but I can’t use your backend, since I don’t have .env there. I just wanted to copy your backend and practice frontend for now only, but it seems that I can’t do it without following the Node Js tutorial completely from scratch (unless I am missing something). Now, when I am trying to run the backend, it tries mongoose error (the uri parameter must be a string, got undefined)

@DaveGrayTeachesCode

2 жыл бұрын

Yes, it helps to understand the backend, and you will need to create your own MongoDB Atlas database and your own .env file to get the backend to work. If all of that is confusing, you will likely need to work through the Node.js course where the backend is built: kzread.info/dash/bejne/mGZ506d8mbeofJs.html

it was really awesome

you are amazing developer

Wow, this is great, this channel is a great find

@DaveGrayTeachesCode

2 жыл бұрын

I'm glad you're here! 💯

I am enjoying every teaching video you have brought about. Thank you!!!!!!

@DaveGrayTeachesCode

Жыл бұрын

You are so welcome!

Thank you for video and see you next year

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome and Happy New Year!

TY!

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.

@DaveGrayTeachesCode

Жыл бұрын

You're very welcome!

You are most kind teacher of react login In the world

@DaveGrayTeachesCode

2 жыл бұрын

Thank you 🙏🙏

If only I've learned about your tutorials sooner, my first experience with React would be more pleasant

@DaveGrayTeachesCode

2 жыл бұрын

I hope they help now! 💯

font awesome link in description is not working plz check it

Beautiful !

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! Cheers!

Hello Dave, on which endpoint can I get the list of users ? Where they are stored ?

@DaveGrayTeachesCode

2 жыл бұрын

The backend REST API provides this and connects to MongoDB. This React login series uses the backend REST API created in my Node.js full course: kzread.info/dash/bejne/mGZ506d8mbeofJs.html That course teaches you how to build it.

Do I need to go over the nodejs course before proceeding to the react series?

@DaveGrayTeachesCode

2 жыл бұрын

It will help if you are not familiar with REST API endpoints and want to know how the authentication responses are generated when you get to the 3rd, 4th, and 5th login tutorials. It is not necessary to get started in the series though.

Hi Dave! i'm just able to see plain text's without any colouring or css even thou I applied the css file which is in you git repository! what might the problem?

@DaveGrayTeachesCode

Жыл бұрын

Sounds like the CSS file is not properly linked. I can only guess from here.

Should i create my own forms like this everytime or use a library like formik to make my work easier? Asking from code efficiency pov.

@DaveGrayTeachesCode

9 ай бұрын

The info here is good to learn, but using formik or react-hook-form is very common and useful, too. I have a video on Zod and react-hook-form.

I never thought of that I will learn so much about HTML attributes in a react tutorial ❤❤❤❤❤❤

@DaveGrayTeachesCode

Жыл бұрын

Right on! 💯

absolutely fantastic video

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words 🙏

Hi Dave what if i am calling the API from .NET ASP API will i still call the allowOrgins component the same way in my react project

@DaveGrayTeachesCode

Жыл бұрын

allowOrigins is something you would check on the backend. It is part of your CORS settings.

where do i get the backend?