The Ultimate Guide To Forms In React Tutorial

Рет қаралды 77,417

Жыл бұрын

Check out my courses to become a PRO 👇
developedbyed.com/
In today's episode we are going to cover how to make a really nice form in react using framer motion, formik and yup for form validation. I really wanted to put together a complete package and an easy go to for people who are looking to add forms inside a react project.
Get the code here ✨
github.com/developedbyed/reac...
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react

Пікірлер: 95

@anno96 Жыл бұрын

Hello Ed, can u please make a project with NextJs 13? I want to see how would you approach it after the new features that were added to NextJs. And thanks for this amazing video ❤️

@kove5762 9 ай бұрын

This was super helpful :D The formik documentation is clear too, but i prefer when this is explained in video

@CarlosAponte-lm5le Жыл бұрын

I tried following your tutorial but it was really complicated to have the css colors work! The tutorial is just amazing but unfortunately that tailwind config was a bit complicated and many of the color animations, to not say all of them were impossible to follow until now. I will continue learning from you, of course but if you may have thought about it, maybe you could have a video of common issues that happen to people since I saw online this happens to many of us. Thanks much dude!

@kingsleyzuze9949 Жыл бұрын

Thank you for the tutorial, it was really amazing. As someone just starting React, I really do appreciate this. Massive props!

@junog5552 Жыл бұрын

Ed, amazing tut. Exactly what I was looking for as a beginner. Much love!

@Joshdevbox_my_Teleqram_id Жыл бұрын

🌟DM for help/support👆

@philipjamesajagabos2519 Жыл бұрын

A great guide for me as a starter in react. Thanks , subscribing to your channel with much ❤

@yahayaoyinkansola8258 3 ай бұрын

Thank you Ed for this tutorial!, I was saying to myself that I wanted to learn how to build forms in React from scratch (Which I would still learn for basic knowledge), but for doing a Job fast, using formik and yup is extremely helpful, thanks for also showing a small example of how to use framer motion and the useRouter hook in NextJS. This was really an insightful video

@vladislaviy 5 ай бұрын

Maaaan such a nice vibe from you)) thanks for the mood and knowledge sharing!!!!

@BugMotoChannel Жыл бұрын

This tutorial was so thoroughly satisfying. Thank you!

@Joshdevbox_my_Teleqram_id Жыл бұрын

🌟DM for help/support👆

@johnurena2863 Жыл бұрын

Hi! Great tutorial! Which extension do you use?

@davique0 Жыл бұрын

You are a legend, thanks for this great content, just a quick question, how could you send the information collected by the form to send to my prisma backend to save that data?

@dev_franqqi Жыл бұрын

Anytime I think about you...BOOM you post😁... loving the consistency

@paulthomas1052 Жыл бұрын

Another great tutorial. Thanks so much !

@ankushanand Жыл бұрын

Hey Ed, What extensions are you rocking. Please share or maybe you have a video for it

@misael5179 Жыл бұрын

This tutorial is Amazing! I love formik!

@alifyout Жыл бұрын

You don't know Ed what good you are doing to our whole web developer brethren. Bless You.

@tamalbiswas7593 11 ай бұрын

@user-of8gq4tf4l Why you do this?

@bonfacenjuguna214 Жыл бұрын

thanks Ed, would you kindly do a Redux-toolkit with RTK-query tutorial.Thank again.

@Charlotte-jm3ce Жыл бұрын

Thank you for including accessibility 🙏

@JoaoPedro-kp7zd Жыл бұрын

Hello! I'm using Vite instead of Next js, I'm looking for something similar to the next js push, do you guys suggest anything to validate the form and send the information in the same button?

@indrasen9617 Жыл бұрын

Thanks for making react easy for us.

@belkocik Жыл бұрын

Very helpful video!

@mohaiminulislamshishir9361 Жыл бұрын

How did you add the emoji after the Let's get started heading ??

@oladapotaiwo3383 Жыл бұрын

How do i use formik submit after validation to go to the next page? If i use NavLink it would go through but ignore all form validation. Though I used npx create react app. Curious

@blue_berry_pie64 Жыл бұрын

Thanks Ed, that is what I need 😊

@thatsharepointdev Жыл бұрын

Really helpful !

@soltiscd Жыл бұрын

Would you cover react-forms on the tanstack?

@newtojillo Жыл бұрын

I've saved it to my playlist I'll visit it

@mochamadhadyonosandi2085 Жыл бұрын

Hello Ed, may i know what font do you use?

@ChArham-bs1ne Жыл бұрын

Formik and Yup are cool and whatever, but I was looking for a vanilla JS tutorial on forms. Great tutorial nevertheless my friend. Thanks.

@sibamuns Жыл бұрын

What if the dropdown was using fetched data from an api, instead of a hardcoded json object? How would I pass that data from the api into my dropdown using formik?

@lucassantos7623 7 ай бұрын

Thank you for the tutorial.

@blacklight8318 Жыл бұрын

you can use yarn create next-app --example with-tailwindcss this will do all of your work eith tailwind setup

@reflectivereveriemingle Жыл бұрын

Thanks Ed you rock

@koladechris Жыл бұрын

This is incredible! I had a lesson to learn from everything you did. Thank you.

@Joshdevbox_my_Teleqram_id Жыл бұрын

🌟DM for help/support👆

@haiderimam8977 Жыл бұрын

I hope your health is fine. Bless you brother.

@user-to9kf9xo2h Жыл бұрын

please what is the emoji plugin you used.. thank you

@damidelOK Жыл бұрын

Good evening, I have an error in the code focus:border-teal-500 focus:ring-teal-500 is not getting the focus with the color correctly. The border is obtained but not the focus. What could it be...?

@Joshdevbox_my_Teleqram_id Жыл бұрын

🌟DM for help/support👆

@manuelgoncalves4026 11 ай бұрын

Hey. I am confused. The UI & UX is great but the form data is not really getting submitted anywhere. The user data is getting saved yes but NOT sent to any email address (recipient) of our choice. How to do that part?

@somerandomdude-hoyeaaaaa 4 ай бұрын

There are separate libraries for doing so. If you are building a contact form where the users can contact you, services like web3forms and formspree come in handy (both are free). On the other hand, if you want to send an email to someone using this, there are libraries such as Nodemailer that can be used to do so. [SORRY FOR BEING 6 MONTHS LATE💀]

@MarlonEnglemam Жыл бұрын

great video. I prefer react-hook-form though

@chrisstucker1813 6 ай бұрын

So use Formik with Yup for small forms or use react-hook-forms and Zod for bigger more complex forms since react-hook-forms minimises the amount of re-renders when interacting with the form for better performance :-)

@elhaambasheerch7058 Жыл бұрын

All these cool libs make me feel that we're in the golden era of coding, yes we need to get familiar with a lot of stuff but it does make our life ridiculously easier.

@CarlWicker Жыл бұрын

Cheers Ed, you da man!

@thegauravsoni Жыл бұрын

make a tutorial on api integration and backend intraction

@plussminuss Жыл бұрын

Hello bro! I have a problem please help when I import useRouter from next/router shows blank page white screen in console says Uncaught ReferenceError: process is has-base-path.ts:3 not defined

@plussminuss Жыл бұрын

Helluuo

@jasmimounna Жыл бұрын

me too, please if it worked for you let me know how to fix it

@Davyyd1 Жыл бұрын

so what's front-end developer job? not only designing pages? should also do "validations" on forms? that is not back end's job?

@Mwtorres89 Жыл бұрын

well... yes, Front end also involves JavaScript which is a little more complicated than CSS and HTML.

@Davyyd1 Жыл бұрын

@@Mwtorres89 where i can Find what front end dev do?

@Mwtorres89 Жыл бұрын

@@Davyyd1 front end mentor

@prathamshenoy9840 Жыл бұрын

You resemble the guy from CameraConspiracies a lot

@nikkoazz Жыл бұрын

Hmmmm, I'm a noob, learning react and tailwind atm. Can i use this tutorial or are there next.js specific things in here?

@Joshdevbox_my_Teleqram_id Жыл бұрын

🌟DM for help/support👆

@emmanuelsheshi961 10 ай бұрын

you are so calm

@thegauravsoni Жыл бұрын

Thanks sir, Thanks from india :)

@AndrewTSq Жыл бұрын

Formvalidation is supereasy in plain HTML actually. Use the pattern-tag, like pattern="[a-z]{1,15}" (normal regex) and then you just make a HTMLSelectElement.checkValidity() . And checkValidity() also checks for min and maxlength etc ofcourse. And thanks to css you can make the fields not meeting the critiera have a red border automaticly without a single of extra code. (yes I hate frameworks and libraries :D

@loogie5679 Жыл бұрын

i think the main issue with doing it with plain html is that anyone with little programming knowledge could easily inspect the website and edit the html code

@philipjamesajagabos2519 Жыл бұрын

@@loogie5679 Exactly my thoughts. A complete validation should be both at the client and server side.

@kinstar Жыл бұрын

@@loogie5679 its definitely easier that way but quite hacky, forms and validation are a pain in general

@oscare123 8 ай бұрын

Hell no

@AndrewTSq 8 ай бұрын

@@philipjamesajagabos2519 yes agree that it should be on server side aswell. But funny thing is that when I check code I often see people use jquery for form validation on clientside.

@cyberducc Жыл бұрын

38:15 Instead of writing a tertiary operator, a ? a : b can be written as a || b. And a ? b : "" can be written as a && b.

@EricOnYouTube Жыл бұрын

Oh, also, can you do a drag and drop in Next 13? Thanks.

@EricOnYouTube Жыл бұрын

How would this work in Next 13? Thanks.

@Siderite Жыл бұрын

So first you use good design principles and you get rid of all that style="margin:10px; color: black;" and then use a good CSS framework like Tailwind, using modern stuff like class="margin10px colorBlack". Is that how it works? :D

@TheAshokWB Жыл бұрын

I'm gorgeous today

@TobyWild Жыл бұрын

30 minutes I was going insane because the Country field had the label of Email.....

@VindexTOS Жыл бұрын

27:46 useForm

@prasankumar4306 Жыл бұрын

Great

@adamdurrant Жыл бұрын

Why does this project need Next?

@shivaansh98 Жыл бұрын

Initial 24 mins is HTML-CSS, skip to 24 for react.

@javeriazaheer6970 Жыл бұрын

8:40

@Elderny Жыл бұрын

like your content :)

@darrenchen8912 Жыл бұрын

nice tut but the Tailwind css config often didn't work,

@simisanoo5382 Жыл бұрын

So wait, it's next not react?

@aliguliyev2122 Жыл бұрын

First 😊

@beconfident5482 Жыл бұрын

Finally first comment 😂

@cristianespinoza1438 Жыл бұрын

is it a react forms tutorial or a css tutorial? :/

@zuber696 11 ай бұрын

u said react but u used next js , i had to change the video , sorry u disapointed

@adamjamiu6764 Жыл бұрын

"let go to the tutorial" 🤔

@user-vp7ht2fg1u Жыл бұрын

formik is slow actually react-hook-form is faster and more popular

@abdousifelhak4486 Жыл бұрын

Rhf?

@user-vp7ht2fg1u Жыл бұрын

@@abdousifelhak4486 react-hook-form, i mean

@Zagoorland Жыл бұрын

Bruh, start using typescript. Javascript is pretty much dead nowadays.

@sdmit2000 Жыл бұрын

why introduce so many dependencies to your projects? you can code it easily with vanilla react/js/ts

@abdousifelhak4486 Жыл бұрын

Do not reinvent the wheel

@Pareshbpatel Жыл бұрын

{2023-03-05}

@mariomacari4637 Жыл бұрын

Hi Ed, I purchased your HTML course and I am enjoying it, but I wanted to let you know this link: drive.google.com/drive/folders/15uNyS0zwm3L_sjqX-WUiFdFCVDBet3PI?usp=sharing is broken. It's under the Full Course Download I hope you fix it soon. Thanks,