The Ultimate Guide To Forms In React Tutorial

Подписаться 930 тыс.

Просмотров 77 тыс.

50% 1

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

Наука

Опубликовано:

28 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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 ❤️

@kingsleyzuze9949 Год назад

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

@kove5762 9 месяцев назад

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

@yahayaoyinkansola8258 2 месяца назад

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

@philipjamesajagabos2519 Год назад

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

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

@vladislaviy 4 месяца назад

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

@junog5552 Год назад

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

@Joshdevbox_my_Teleqram_id Год назад

🌟DM for help/support👆

@paulthomas1052 Год назад

Another great tutorial. Thanks so much !

@misael5179 Год назад

This tutorial is Amazing! I love formik!

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

@BugMotoChannel Год назад

This tutorial was so thoroughly satisfying. Thank you!

@Joshdevbox_my_Teleqram_id Год назад

🌟DM for help/support👆

@dev_franqqi Год назад

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

@johnurena2863 Год назад

Hi! Great tutorial! Which extension do you use?

@Charlotte-jm3ce Год назад

Thank you for including accessibility 🙏

@alifyout Год назад

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

@tamalbiswas7593 10 месяцев назад

@user-of8gq4tf4l Why you do this?

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

@bonfacenjuguna214 Год назад

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

@ankushanand Год назад

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

@belkocik Год назад

Very helpful video!

@blue_berry_pie64 Год назад

Thanks Ed, that is what I need 😊

@thatsharepointdev Год назад

Really helpful !

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

@blacklight8318 Год назад

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

@lucassantos7623 6 месяцев назад

Thank you for the tutorial.

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

@mohaiminulislamshishir9361 Год назад

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

@newtojillo Год назад

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

@mochamadhadyonosandi2085 Год назад

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

@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

@CarlWicker Год назад

Cheers Ed, you da man!

@chrisstucker1813 5 месяцев назад

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

@MarlonEnglemam Год назад

great video. I prefer react-hook-form though

@haiderimam8977 Год назад

I hope your health is fine. Bless you brother.

@sibamuns 11 месяцев назад

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?

@soltiscd Год назад

Would you cover react-forms on the tanstack?

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

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

@thegauravsoni Год назад

Thanks sir, Thanks from india :)

@emmanuelsheshi961 9 месяцев назад

you are so calm

@user-to9kf9xo2h Год назад

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

@thegauravsoni Год назад

make a tutorial on api integration and backend intraction

@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

@manuelgoncalves4026 10 месяцев назад

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 3 месяца назад

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💀]

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

@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 7 месяцев назад

Hell no

@AndrewTSq 7 месяцев назад

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

@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

@_tanzil_ 7 месяцев назад

Great

@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

@Elderny Год назад

like your content :)

@shivaansh98 11 месяцев назад

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

@javeriazaheer6970 Год назад

8:40

@adamdurrant Год назад

Why does this project need Next?

@aliguliyev2122 Год назад

First 😊

@beconfident5482 Год назад

Finally first comment 😂

@darrenchen8912 Год назад

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

@simisanoo5382 Год назад

So wait, it's next not react?

@adamjamiu6764 Год назад

"let go to the tutorial" 🤔

@cristianespinoza1438 Год назад

is it a react forms tutorial or a css 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

@zuber696 10 месяцев назад

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

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