How to use React hook form in production
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
![ผัวเถื่อน - ยูริ โตเกียวมิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/P08ORRVDGl8/mqdefault.jpg)
![ReactJS Course [11] - React-Hook-Form and YUP Tutorial | How to do Forms The Right Way](/img/n.gif)
This level of content is so rare to find even on paid courses. Hats off to Hitesh sir for delivering such an amazing react tutorial.
Thanks a lot😊
Sir aap jaise hi course complete karva doge to m aapke pass hi job ke liye apply kardunga😂😂
Me Bhi Bas sir Jaipur me khi dhik Jaye
@@jayashsaini8927
🤩 Lucky ho yaar tum logo jaipur walo Jab man kare Sir se mil lo 🎉
26:45 -> Form main Logic
36:22 -> Revision of Login component
49:38 Authentication Layout
At 00:03, the tutorial starts with creating and configuring input elements and buttons in React. At 01:59, the instructor moves on to creating and using HTML form with React hook form. Then, at 05:46, the tutorial covers how to use React hook form effectively in production.
At 08:05, the tutorial explores how to use React Hook Form to handle services and states for querying and information retrieval. Then, at 12:14, the tutorial explains how to use file ID to retrieve resources and implement them in the app.
At 14:18 and 18:20, the instructor demonstrates how to use React Hook Form in production. At 20:07, the tutorial covers how to use React hook form for login functionalities. Then, at 23:30, the instructor explains how to use React Hook Form for navigation and login.
At 25:15 and 28:46, the tutorial covers how to use React hook form for form handling and input fields. At 30:33, the instructor explains how to use React hook form options in production. Then, at 34:09, the tutorial covers how to use React hook form for custom input fields and validation.
At 35:57 and 39:37, the tutorial explains how to utilize React hook form for production and using try-catch to handle errors in production code. At 41:20, the instructor covers how to use React hook form to manage user data.
At 45:13, the tutorial highlights how using React hook form simplifies form handling. At 47:09, the instructor demonstrates implementing React Hook Form in a real-time editor. Then, at 50:47, the tutorial covers using React hook form in production.
At 52:41, the instructor explains that the use effect hook and its dependency array are important in React hook form production usage. At 56:28, the tutorial covers understanding authentication conditions in React hook form. At 58:23, the instructor demonstrates managing authentication and conditional navigation in React using React hook form.
Finally, at 1:02:02, the tutorial covers how to use React hook form to simplify complex UIs.
Bhai 401 wala error kese resove kiya aapne ek baar bataoge?
@@amankumar-vh7lq bro i guess error isliye hai ki login nahi hai starting me yaani session nahi hai koi bhi so when .get() is called it throws an error because there is no valid session so either create a session or login first aur sir ne jis tarah se is video me code kiya to error remove ho jaega kyuki .get is called only when there is a session
i have to do backend also but i have to do react once more what should i do anybody please help
00:03 Creating and configuring input elements and buttons in React
01:59 Creating and using HTML form with React hook form
05:46 Using React hook form effectively in production
08:05 Using React Hook Form includes handling services and states for querying and information retrieval.
12:14 Using file ID to retrieve resources and implement in app
14:18 Using React Hook Form in production
18:20 Using React hook form in production
20:07 Using React hook form for login functionalities
23:30 Using React Hook Form for navigation and login
25:15 Using React hook form for form handling
28:46 Using React hook form for input fields
30:33 Using React hook form options in production
34:09 Use React hook form for custom input fields and validation
35:57 Utilizing React hook form for production
39:37 Using try-catch to handle errors in production code
41:20 Using React hook form to manage user data
45:13 Using React hook form simplifies form handling
47:09 Implementing React Hook Form in a real-time editor.
50:47 Using React hook form in production
52:41 The use effect hook and its dependency array are important in React hook form production usage.
56:28 Understanding authentication conditions in React hook form
58:23 Managing authentication and conditional navigation in React using React hook form
1:02:02 Using React hook form to simplify complex UIs
samaj to sab aa gaya...par khud se banane jate hai to kuch samaj nahi aata ki kya likhna hai
Starting my IT career again after a long career break, and your coding videos have been a lifesaver! Your content has not only refreshed my knowledge but also inspired me to keep pushing forward in this ever-evolving field. Thank you so much Hitesh for sharing your knowledge !
18:31 React-hook-form starts .
49:22 authentication layout
Sir you have defined forward ref in Input component but never used it in Login and Logout component. Aren't we supposed to use useRef react hook and pass ref in Input component?
Haa bhai mujhe bhi ye doubt 🤔 hai
*Attendence: Date 25/09/2024 *
*React Mega Project with one and only Hitesh Sir aka Chai aur Code*
*Thank you so much, Sir! *
QUESTION ?????
QUESTION ?????
QUESTION ?????
Sir I want to ask you when you use Your own build Input component at time 34:00 why are you don't pass the value for ref as its required to get the value from that component because component is somewhere else and we need state of that component somewhere else so How are you doing that without providing the value for ref parameter which you mentioned while creating your own Input component, that's point is not understanding that how are you get access of that Input component data without providing the ref parameter value.....
I Hope MR. Chai and Code Solve my issue
I will be waiting for your reply......
This level of content is so rare to find even on paid courses. Hats off to Hitesh sir for delivering such an amazing react tutorial.🥰
thanks sir
Sir ji aap ak personal portfolio website banakr upload kr dijiye please hindi me mere sabhi frndo ki demand please sir ye ignore mt kijiyega please please please please please sir ji react se
I tried adding this to the password field sir, is this correct.
{...register("password"),{
required:true,
validate:{
matchPattern: (value) => /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.text(value) ||
"Password must be valid"
}
}}
I understood the code of Authlogic at the first time. 🤩
Thank you very much for your hardwork sir ❤
Hitesh Sir You are the one of the best teacher on TH-cam❣❣❣❣
😊🙏
49:25 authlayout to protect from unauthorised access of route directly 51:06
watching this for the 3rd time on 21st June 2024. After watching the playlist for 1st time i moved on to other resources but couldnt find anything better than this so back here watching this again😅
lo phir aagaye , sir ne kaha hai AI aagaya hai speed badani hogi ,chaliye chalte hai
Sir please show what is happening in parallel , because pata nahi chal raha hai hum kaam kispar kar rahe hain
You are putting so much efforts ...THANK YOU ...A moment... In authentication topic, when concept is going out of head, he is like...i will get back and give u a revision too...hats off 🫡
the conditions in AuthLayout should be
if (authentication && authStatus !== authentication){
navigate('/login')
}
else if (authentication && authStatus === authentication ){
navigate('/')
}
I think this is more simpler to understand
Hitesh sir use
else if(!authentication && authStatus !==authentication)
Which will always evaluate to false if value of authentication is true.
Your logic is perfect thanks for sharing🎉
6:35 meine pehle hi dekh liya tha k forwardRef nhi use kia. But mene socha Hitesh sir hn kia pta kuch nayi cheez ijaad kar di ho 🤔. Q k har roz hi kuch naya seekhne ko milta he
Select Component mein ForwardRef Import nahi kiya sir aapne also vo koi const banake use bhi nahi kiya aapne jabh ki refrence de diya hain uska. was it intentional?
:- mil gaya answer. puri video dekhke comment karunga agli baar se. Thank you so much for these lectures
Finally completed this video🤧
Any one who povide me the name of symbol which is used in vs code ( file symbol , language symbol)
That is just a vs code extension:
Material Theme Icon
18:45 yaha se start hota hai React Hook form ka usage.
?. -> Optional Chaining and ye tab use hota jab ham value koi api ke through ya fir null value milne ke chances ho.
attendance 19-Dec-2023
attendance: 17/09/24
sir please teach us how to host the project
18:43 React hook forms started
Sir, what a great teacher you are.....mtlb itna detail kon jaata hai free videos. Literally, at 7:00 jb aapne ref ka 2nd tarika bataya. Isse phle bhi maine paid course se react pda tha but kisi ne ref k baare mai hint bhi nhi kiya tha....or aap itna detail bta rhe ho...Hatsoff to you sir👏.
Attendence: 10 April 2024, 10:42 PM
18:40 react-hook-form tutorial
42:26 , error == if (userDataa) dispatch (login(userData)) , yaha par conditional bracket mae userData ayega . instead of userDataa
What is the extension you are using for auto suggestion & completing the code?
the way of delivering lecture I love it, and the best part "main sikha ke hi manunga"
muje ye thoda sa hard laga .... but maza aaya
15:40 19-01-23 raat ke 12:31am , abb thak chuke hai , lekin sir ne ka hai ki ek bar phele deklo fir dobara dekhna , to kal dobara se vapis yha .
aa gaye vapis 20-01-24
49:26 - AuthLayout starts here
You are Genius Sir 😍🔥🔥
15:10 April 12 2024, 11:47pm
sir apne startup mai lelo....
react-hook-form : 18:30
Hitesh sir's React tutorial stands out for its exceptional quality, surpassing even many paid courses in clarity and depth.
Thanks a ton
Watching your videos in 2024 from Pakistan, Love your content and teaching skills.💚
29 sep 2023 , 11:56Am
Hanji Kese hai aap log 😁
sir u r the one of the best teacher on youtube , whenever i started watching your vedios i can watch continously without getting bored and u r providing in depth knowledge and the best part is all the basics in hindi witch makes learning-experience 100x better for us thank you so much
This level of content is so rare to find even on paid courses. Hats off to Hitesh sir for delivering such an amazing react tutorial.
AuthLayout is heavy confusing, I don't understand the need of this component. We can just add a condition in App.jsx that whether an user is signed in or not and based on that we can navigate him to any routes.
Ex: (Inside App.jsx)
const navigate = useNavigate()
useEffect(() => {
authService.getCurrentUser()
.then((userData) => {
if (userData) {
dispatch(login({ userData }));
} else {
dispatch(logout())
navigate("/login") // Here if user doesn't exist navigate him to login page
}
})
.catch((error) => {
console.log("Error occured in app.jsx, user can't be logged in", error)
})
.finally(() => setLoading(false))
}, [])
Its an Honor to learn from u sir !!! Amazing content , Amazing Explanation You are genius❤❤❤
00:00 - 07:30
geooo lalaaaa
Bhot tough hogya sir😢
But still liking it, jabtk fodenge nhi tbtk chhodenge nhi
Attempt no. 1
instead of optionally check options can we decleare the default value as options=[] ?
Nice ❤ explanation sir
Good evening sir.
Please viewers complete the given Target. 500+ comment and more than like share
Thanks A Lot Sir for such production Level Knowledge ❤❤
Present (late)
I am watching again and now things make sense to me.
❤️😊
watching at :- 'Sun Aug 25 2024 14:02:04 GMT+0530 (India Standard Time)'
forwardRef, select option, postcard, login form, handle submit, creating input, auth layout
01:00 = building select field component
15:00 = starting with react hook form
At 57:04 isn't the condition checking will be like -->
!false && true !== false ( since authentication sent by the user is false )
So this will become -->
!false && true !== false --> true && true --> navigate to login page.
Attendence 'Sun Nov 19 2023 18:37:10 GMT+0530 (India Standard Time)'
Sir teach typescript with react please. it's too hard to learn
Attending this class on 30/09/2024
After watching it the second time, I feel motivated and can proudly say that I understand about 90% of the video
While creating Input component we have used forwardRef. Dont we need pass something while using the input here.Can someone please explain????
const isAuthenticated = authStatus === true
if (authentication && !isAuthenticated) {
navigate("/login")
} else if (!authentication && isAuthenticated) {
navigate("/")
}
Thankyou Sir aap bahot easy way mai sikhate ho video dekhte time beech beech confusing lagta hai par jab code ek do baar dekhne ke baad easy lagta hai ❤
Maine 2 mahine pehle bhi comment kra thaa aur 2 mahine lagatar mehnat krne ke baad ab mai saas type ke projects next js me bna paa rha hu sath hi react native me bhi ....🙏 Shukriya Guruji
Thanx for the heart sir... hopefully next space me apse baat kr pauu aur wha bhi thanx keh pau🙏🙏
Ye comment aapki Mehant ke naam sir ji. Great Job 👍
'Tue May 28 2024 14:05:47 GMT+0530 (India Standard Time)'
AppwriteException: Network request failed 401 error code
do we need to create use account also
reply ASAP
it's completely diffrent experience to learn from you be it any series hitesh sir has nailed it , sab samjh aa rha hae ❤❤❤❤❤❤
what is copilot? "IntelliSense hi hai, bs thoda sa steroid pe hai" - Hitesh Choudhary (2023)
thank you sir i know this video is confusing for us as this is just a half portion and i know when we complete code our project... Sare Dott apne app jud jayenge......Hitesh Sir Cristopher Nolan se kam hai kya .... ?
Thank You sir. Attendance Date : 09-11-2023
Present sir
Present sir
49.28 authentication layout started from here.....
Ye silsila chalta hi rahega...
Learning more then expectations 1:02
Rewatching on Wed 1 November 2023, 11:05 AM
forwardRed Hook missing , we have to import it and put the function inside the forwardRef
i have a doubt, why we don't pass ref in Input Component as well Button Component
sir production base par company ke andar kaise Puri website banate hai proper ways e
Thank you so much hitesh sir !! I have figured out the error as you pass ref on the parameters !! figuring error gives a kind of inner happiness and joy 😂😂
Date: 16/05/2024
Present sir 🧑💻🧑💻🧑💻🧑💻
i Fount the bug already
sir dosen't wrapped input in the forwardref ()
Arey sir, aap bar bar notes dekhke karenge bolrahey ho(css), par hum kya karey?
Khud karne lage tow css mey hi dinn bitjata hey, react tow bhul jayenge ese tow.
#chaiaurcode
#chaiaurcode
present sir , attendance laga diya hai sir 16/02/2024 09:24 am
yes it is totally new to me, but the lecture was Awesome as always. Thanks
how is the ref passed to login or signup components' input component. There is no prop named ref passed there?
pls help!!
57:50 Why even this else if condition will run as it will always be false ? as false & false = false and false & true = false
Hello sir
I follow your all video and I got so much problem to understood this video
Please sir guide me please
18:43 react-hook-form starts from here !
49:25 authentication layout