Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Create a React User Login and Authentication form with Axios request submission. We'll build a user login form and submit the username and password with Axios to a backend REST API for authentication.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview

Subscribe https://bit.ly/3nGHmNn

React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go

React Login tutorial series playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd

Source Code: https://github.com/gitdagray/react_login_form

Course Updates https://courses.davegray.codes/

React User Login and Authentication with Axios

(00:00) Intro
(00:18) Welcome
(00:49) Starting App State
(01:30) Create the Login component
(02:12) Adding React Hooks
(04:22) Starting the JSX
(05:24) Username Input
(08:19) Password Input
(09:22) Finish the form
(10:18) handleSubmit function
(12:03) Displaying the success screen
(12:59) Testing the form
(13:57) Creating Auth context and state
(18:09) Adding Axios to the project
(20:01) Adding Axios to handleSubmit
(25:11) Handling Errors
(27:10) Node JS Authentication server
(28:55) Testing Server Responses

Buy Me A Coffee: https://www.buymeacoffee.com/davegray

React Register Form with Validation, Axios and a11y: https://youtu.be/brcHK3P6ChQ

Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: https://youtu.be/f2EqECiTBL8

FontAwesome for React:
https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

RegExr for Regular Expressions: https://regexr.com/

Accessible Form References:
WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/advanced
WebAIM.org - Form Validation: https://webaim.org/techniques/formvalidation/
MDN - Aria Attributes:
aria-invalid: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
aria-describedby: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
aria-live: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about creating a React User Login form with authentication, axios, and accessibility features helpful? If so, please share. Let me know your thoughts in the comments.

#react #login #form