Appreciate this concise example. One tiny enhancement suggestion. On UserForm where you're using InputWithLabel, instead of having all over the place. You can at the top of the file define a typed version of the input. For instance const UserInputWithLabel = InputWithLabel. Then in the form itself you just have . Not a huge enhancement, but perhaps a tiny bit cleaner. And you can't forget the type by accident.
Hello Sir! I wanted to thank you for making React Next Node and Redux series along with teaching libraries like axios and jwt etc. I got employed as a MERN stack developer and I learnt a lot from you. Thanks a lot! :D
Love your content! Your teaching methods are on point. I was wondering maybe you could do an advanced tutorial using nextjs on how to implement a multi subscriptions with stripe for a Saas.
Hey Dave, thanks for the explainer. Quick question: why not just pass the “User” type to your input components instead of “typeof defaultValues”? After all, if the User type passed to useForm is used to enforce the type of the “defaultValues” property, then they should be equivalent, no? Just wondering if I’m missing a technical nuance or if this comes down to style/preference.
Amazing tutorial as expected. Hello Dave, could you please make a video that shows how to use react query with Axios interceptor? The objective is to make all the requests sent from one place for error handling and Auth header also for a refresh token and may need custom hooks in this case. I know it's quite an advanced pattern. so, please make a video about that topic, or tell me how to think about this case.
Both React Query and Axios are used for fetching data. It would be strange to use both. If you want to use RQ, I would look for something it offers that functions like an interceptor does in Axios.
@@DaveGrayTeachesCode Ok, but the objective is not to use both together ( RQ + Axios ), but to make all the requests sent from one place for error handling and Auth header also for a refresh token, and I want to use a cleaner way to apply that using React Query. Very thanks for your interesting :)
@@zayne-sarutobi Thanks for sharing :) I already have an implementation for this case 1) Custom hook for an Axios instance that handles the request headers like auth token and the request global error handling like showing a specific error message based on the status code refreshing the token and resending the failed requests when the access token is expired 2) Custom hook for each business logic that includes a group of functions that are used with React Query hook as queryFn By this implementation, I have the business logic separated for each service and one place for the pre and post-action for any request, and that is enough for my case.
react-hook-form identifies the dot notation, but TypeScript will only identify the top level keys as a keyof. For the solution shown here, you'll want everything in a flattened object.
sir i really loved your videos , but i am very confused in coding , i am doing python , html and css at same time , please tell me which programming should i master first
Thanks Dave It a good start point to what I pretending to do soon, also it will be great if you made some reusable custom form fields made with shadcn hook form and zod. Just like inputField SelectField DateField ImageField ..etc. with all possible cases especially SelectField with mutli select, async data fetching, data caching and so on.. I've done this before but with react suite, formik and yup, and now after I moved to chadcn I feel lazy to redo all this stuff 😂
While making final component to render We write the code like export default function App(){ return () } OR export function App(){ return () } OR function App(){ return () } export default App; OR const App = ()=> { return () } export default App; What is the difference in these 4 types of "export" in React-JS??
Dave, when will you do a react native course? Also is it possible to use the nextjs backend with the react native rather than nodejs? Cuz i don't like node much
Thinking about React Native in the last half of this year, but no specific date yet. React Native is for mobile apps. If you want to replace Node.js for your backend, you will want to look at other solutions like Python with FastAPI (tutorial coming very soon on this) or there are several other backend options.
Anyone know how he gets his html 'brackets' (I don't know the exact name, the ) to be so bright and "connected"? Mine are so dim and hard to see. I love how it looks but can't find any settings or extensions to replicate it.
I don't think uploading files directly to a serverless function is a good idea. You should use the pre-signed url method to upload files to a blob storage like S3 instead.
Appreciate this concise example.
One tiny enhancement suggestion. On UserForm where you're using InputWithLabel, instead of having all over the place. You can at the top of the file define a typed version of the input. For instance const UserInputWithLabel = InputWithLabel. Then in the form itself you just have . Not a huge enhancement, but perhaps a tiny bit cleaner. And you can't forget the type by accident.
Hello Sir! I wanted to thank you for making React Next Node and Redux series along with teaching libraries like axios and jwt etc. I got employed as a MERN stack developer and I learnt a lot from you. Thanks a lot! :D
Thank you Dave Gray, I came cross with problem, by your video I fixed my problem 😊
Great tuts.
Hello Dave, could you please make a video about clearn achitecture or haxagonal achitecture please?
Hi Mr Dave, can you explain how to add arrow key controls to navigate in a form or in a nested navbar
At 06:28 you spread defaultValues. Shouldn't it be just defaultValues?
Good catch! It works either way. Sometimes I default to creating a new object when it's really unnecessary.
Love your content! Your teaching methods are on point. I was wondering maybe you could do an advanced tutorial using nextjs on how to implement a multi subscriptions with stripe for a Saas.
Great suggestion!
Another great tutorial as always.
Thank you!
i find it funny how a guy with 300k+ subs uses ai mugshots for profile picture. true engineer right there
As always great video Dave!
Hey Dave, thanks for the explainer. Quick question: why not just pass the “User” type to your input components instead of “typeof defaultValues”? After all, if the User type passed to useForm is used to enforce the type of the “defaultValues” property, then they should be equivalent, no?
Just wondering if I’m missing a technical nuance or if this comes down to style/preference.
Amazing tutorial as expected.
Hello Dave, could you please make a video that shows how to use react query with Axios interceptor? The objective is to make all the requests sent from one place for error handling and Auth header also for a refresh token and may need custom hooks in this case.
I know it's quite an advanced pattern. so, please make a video about that topic, or tell me how to think about this case.
Both React Query and Axios are used for fetching data. It would be strange to use both. If you want to use RQ, I would look for something it offers that functions like an interceptor does in Axios.
@@DaveGrayTeachesCode Ok, but the objective is not to use both together ( RQ + Axios ), but to make all the requests sent from one place for error handling and Auth header also for a refresh token, and I want to use a cleaner way to apply that using React Query.
Very thanks for your interesting :)
@@MohamedSalah-ez9hf you can check github.com/ryan-zayne/callapi for that... It might be just what you're seeking for
@@zayne-sarutobi
Thanks for sharing :)
I already have an implementation for this case
1) Custom hook for an Axios instance that handles the request headers like auth token and the request global error handling like showing a specific error message based on the status code refreshing the token and resending the failed requests when the access token is expired
2) Custom hook for each business logic that includes a group of functions that are used with React Query hook as queryFn
By this implementation, I have the business logic separated for each service and one place for the pre and post-action for any request, and that is enough for my case.
@@zayne-sarutobi The cashing and state management are the main objectives for using this pattern
can you do a full course on webpack typescript react there is not a detailed video on youtube in this topic , it would be awesome if you post it .
I have a question. Hope you can answer. What if we have a nested schema? like "user.name". what can we change the nameInSchema?. Thank you
react-hook-form identifies the dot notation, but TypeScript will only identify the top level keys as a keyof. For the solution shown here, you'll want everything in a flattened object.
@DaveGrayTeachesCode instead of 'keyof T & string' just use FieldPath from use-hook-form
sir i really loved your videos , but i am very confused in coding , i am doing python , html and css at same time , please tell me which programming should i master first
THank you so much dave
Please make a full vide on wordpress
Thanks a lot for This Amazing video as always ❤❤❤❤❤❤
You're welcome!
in authjs v5 how to sync google provider login and credentials login via rest api?
Thanks Dave
It a good start point to what I pretending to do soon, also it will be great if you made some reusable custom form fields made with shadcn hook form and zod. Just like inputField SelectField DateField ImageField ..etc. with all possible cases especially SelectField with mutli select, async data fetching, data caching and so on..
I've done this before but with react suite, formik and yup, and now after I moved to chadcn I feel lazy to redo all this stuff 😂
Cool video, as always :)
Moar about TS generics!
Thanks for thevideo
You're welcome!
Hi @DaveGray , do you know why "stopAtFirstError" validation pipe is not working as expected in nestjs??
While making final component to render
We write the code like
export default function App(){
return ()
}
OR
export function App(){
return ()
}
OR
function App(){
return ()
}
export default App;
OR
const App = ()=>
{
return ()
}
export default App;
What is the difference in these 4 types of "export" in React-JS??
Dave, when will you do a react native course? Also is it possible to use the nextjs backend with the react native rather than nodejs? Cuz i don't like node much
Thinking about React Native in the last half of this year, but no specific date yet. React Native is for mobile apps. If you want to replace Node.js for your backend, you will want to look at other solutions like Python with FastAPI (tutorial coming very soon on this) or there are several other backend options.
Anyone know how he gets his html 'brackets' (I don't know the exact name, the ) to be so bright and "connected"? Mine are so dim and hard to see. I love how it looks but can't find any settings or extensions to replicate it.
Pls do a svelte tutorial
How to validate a file? and use Nextjs Server Action, I gave up trying to make it work. it's tough. I'm talking about uploading multiple files.
Good request! next-safe-action supports file uploads. I'll see what I can put together.
@@DaveGrayTeachesCode Thanks, doing it with Supabase would be appreciated. but whatever works.
I don't think uploading files directly to a serverless function is a good idea. You should use the pre-signed url method to upload files to a blob storage like S3 instead.
bro any tips to get some paid work or a job
I use ant, it has validations included
Share a link 🙂
Thanks for another wonderful video
Guys I need help