Видео

Could you upload the starter code to your GitHub repository? I'd like to follow along while watching the video.

Why don't you just use http cookie for both. I do that and it works. The frontend should not deal with any token whatsoever. It's key to have an interceptor in axios config.

great tutorial! thx

This is pretty interesting, I often find myself stuck on simple problems specifically related to types because I keep thinking about future proofing, I should take up the mentality to loosen that up and embrace the fact the future changes is okay to happen and doesn't mean that the code is bad. I am wondering why wouldn't you create a global interface for the routines and for each component use "Pick" and choose what you need from that global interface.

Waht about making a video for event tracker and how to integrate google analytics with react? ❤

love your explanation!

Subscribed. What a easy way to explain! Loved the video. Keep the great vids coming!

That pattern is commonly used for functions coming from third parties libraries where the type definition is not clear or defined, hence this is a good solution to infer the type out of it. From my point of view you have 2 solutions, either you create multiple interfaces to define the different types and then add all of those into a “main” interface so you can use them in the different components or you could use something like zodiac schemas, to validate the data types are correct during runtime and then infer the different types out of the schemas so you can reuse them. Mainly both solution are dependent of a multiple data types that are link to a master data type, the advantage of the second solution is that you make sure the data gets validated before propagating down the children components

I used it once, and it worked well with normal tags in locales, and without passing the whole string in addition to the key. It only supported simple tags like strong etc. But it worked.

4:52 "Or did it?" *VSauce music plays in bg*

It was really useful

A great tutorial, hats off 🫡

i really love how the guy's body language communicates the fact that he knows what he is talkig about. his classes feel like they are only ones you will ever truly need

I've been putting interceptors in a separate axiosPrivate file that would define an axios instance that I'd use across my application. I'm curious why you put interceptors inside of React. Would placing interceptor outside of react behave any differently?

introduction icon was awesome

Thank you so much for this video. Could you kindly share the code for this, it makes it even more easier to follow along.

Cosden Solutions you must watch your health

Create Interfaces, you can create a lot of small interfaces with each piece of the result you need, and them create a "master" interface to extends all the others. Your function can be set to return the interface type and each component can be set to receive just the interface with the properties are needed

Looks like you are holding a lot of data when you don't need all of it at the same time For each routine you are holding all its items, which also holding all of its entries Maybe you could split that into multiple API endpoints, and ask for the items for specific routine only in the place that you need it react query is already handling all the caching for you(in case you'll need again the items for already-viewed routine for example).

`type RoutineAndXYZ = Awaited<...>` and then just use that everywhere I suppose.

What you can do is to create a Contract that both the Provider and Consumer use. You define your Contract as something like "RoutineResult". Your Provider is for example your "getRoutineVersionForDate" and it is forced to return anything that satisfies the Contract. Your Consumer is for example your Component which also is forced to handle input in the form described by the Contract. This way ensures that your Consumer is no longer tied to the actual implementation / provider and thus they do not know about each other. You also ged rid of that repeated Awaited<...> typing. What I like to do is to create the Contract using Zod / Yup or something else to also provide a Schema which I use to Validate my Output and Input data so that I can react to invalid data on runtime side

what do you use to record these videos?

Can we also use context in this situation, so we don't have to pass props to these components, and get props from custom context hook instead?

I have questions do you prefer using nodejs for backend or using services like firebase or aws

Why does your type ="text" for your email input

Bhai...maza agaya

does the useTransition hook work with react's userReducer just like it would be useState?

so basically useTransition is just debouncing the function to be invoked a little bit later(in milliseconds)?

You should change keyboard if want make videos..

very nice and clear tutorial, an additional example would have been fine where the role of the clean up function is being demonstrated

Theo made a video of the problems of using normal fetch and UseEffect .... We can solve these problems but code will be unreadable

UseEffect runs on mount ... Stat charge Unmount 9:30 cleanup: state change or unmount

Great video!! Is it possible to share whole atuh provider code with us?

If you store token in state won't it get deleted on page refresh? Then what would you send to the server. So every time the page is refreshed the user needs to relogin?

Great tutorial bro! Appreciate it so much. Clear and concise.

As someone coming from Flutter background, this seems to be the best UI library that I am going to learn. I don't understand why there is so much hate for it in the comments section. I am a full-stack developer and I don't want to spend ages making the UI, and I loved how the material UI on Flutter was able to make something beautiful by default without much work. It seems that I found the equivalent on the Web. At the beginning I thought that it should have the same naming as Flutter (Like Container instead of Box) but this is not a big problem, especially when you get so much advanced components like ratings for free!

This makes my testes hurt.

00:37 Understanding the folder structure and architecture in React 01:34 Page folder determines the skeleton of the React application and user navigation. 03:08 Components folder to hold all UI reusable components. 04:35 Components/UI folder to hold all small reusable components by other components. 06:20 Hooks folder. 07:45 (optional) services/api or services/i18n for multi-language support (internalization), services/stat for state management like redux, 09:09 services/providers for app warppers or for context (rename it to services/context if it's just for context) 09:50 utils folder for small, useful, Others : utils/helpers.ts or utils/formatters.ts 12:00 subscribe😃

don't know why love watching your videos🤍

this is probably the best rhf lesson i have ever seen ! Thank you so much!

Thank you very much! Very useful and understandable

perfect example

I'm sorry, but please get someone who knows a little more about react or at least prepares before hand. His answer that a disadvantage of the virtual DOM is "performance"??? The entire reason react was created and uses a virtual DOM is to improve performance for highly interactive applications compared to older frameworks like jQuery. I get that it's a youtube video and you just supply the answer anyway, but this would be much better as you just answering the questions yourself.

muito bom

"Refresh token is very very secret and should not leak out of the server" 😂😂 Nah bro!! That's not how it works.

video starts at 01:07

Спасибо большое, очень полезный урок!

I noticed your tattoo - is it Farsi? It made me curious if you're Iranian. :))

Loved the custom hooks part!❤

Why do we need a POST api and point? I did it within a server action and it worked