Stop excusing yourself for doing what you are doing. You are doing great, everything you've done in this refactor I would have done myself. Don't be so hard on yourself. Great video, keep them coming!
Love this type of content. I'm worse than you at coding, the only thing that came to my mind while you were refactoring is that it seemed that the random anime page was returning JSON detials for all the animes, which made the call to get the data again for individual anime seem a bit redundant. I think, in a perfect world, when opening the individual component I would've had something like an optional prop with data if I'm coming from the random anime page, if there is no prop then I make the request with the id.
4:56 - I'd say, make an array of objects, which would include the path and the element that you want to render. Then, you would simply map it in the return statement.
Ive been having this bug when I login it goes into a infinite loop. It should go to a home page but its not. If I manually go to the other routes then the whole app works fine.
There is a card component which has 4 props being passed into it. What I would do is to pass only one prop to it called "anime" and destructure what I need inside the component. Tho the reasoning behind different props is probably because there is a lot of data inside "anime" object which makes it pointless to pass entire anime object, but if that wasn't the case I would pass only 1 prop and destructure.
that works as well, one issue I have with that is if you anime card only need to display 4 things, but your Anime object has 30 properties, you don't want to expose all that extra data to your card object since that increases coupling between your anime object and UI card component.
if you dont have typescript in a project then you can use jsdoc comments to annotate the code and get better intellisense support, also add jsconfig to the project to get vscode to provide even better guard rails. to get jsconfing with little effort , try `npx jsconfig.json`, then confirm checkJS is true, you could also set that in vscode itself somewhere
I would agree for this example, but on an application with 30 different endpoints, it makes it hard to refactor a url if everything is hard coded to point to that url, but yes maybe this approach isn’t the best 😅
For me, it’s better to come up with criteria for selecting projects, because this project in the video is full of ***, for example, the url should go through -, then don’t use the id, use the slug, because there weren’t such stupid movements as downloading absolutely all things that are not displayed, otherwise you will drown in shit, and you will constantly be asked to help and help. The type from the video needs to take some kind of course for beginners, where they will explain what to do, what to think, what to optimize, think about traffic, etc.
Stop excusing yourself for doing what you are doing. You are doing great, everything you've done in this refactor I would have done myself. Don't be so hard on yourself. Great video, keep them coming!
I often self doubt my abilities, but yes I agree, I need to just own it
These refactoring sessions are awesome to learn from, thank you so much!
I believe the problem was the missing “:” at 6:37 before the ${id}
At last someone experienced making a video
One thing I would say is to use lowercased words separated by hyphens for css classes. So instead of heroContainer, make it hero-container.
that doesnt work with react if they use module any idea how would you deal with that?
@@saitech2452 you would have use it like styles['hero-container'] in the jsx but It's pretty uggly so I prefer to use camelCase.
@@madtin ye same I just use camel case I'm still looking for improvements but so far nothing found
This is really helpful for new programmers like me, it feels like a PR review. And lots of new insights
most of his fixes is stuff hes breaking lol
@@Nodsaibot doesn't matter for anyone is getting any value out of it
5:00 What if we have a nested route?
Your videos are chill and informative, specially the live code refactoring streams. Love them!
Dammmnn bro, you always make very helpful videos about coding and way of working. Keep up
Love this type of content. I'm worse than you at coding, the only thing that came to my mind while you were refactoring is that it seemed that the random anime page was returning JSON detials for all the animes, which made the call to get the data again for individual anime seem a bit redundant. I think, in a perfect world, when opening the individual component I would've had something like an optional prop with data if I'm coming from the random anime page, if there is no prop then I make the request with the id.
Great video bro!
4:56 - I'd say, make an array of objects, which would include the path and the element that you want to render. Then, you would simply map it in the return statement.
Love your content @Web Dev Junkie. I am a junior developer and most of the things that you say actually help me get better. Thank you!
I think mapping would take much time.
React-router has GeneratePath method for generating paths with params . Better approach then GOTO usage.
Illl need to check that out thanks for sharing
Great video idea man, learning a ton.
export page slug from page component
Which VScode theme are you using?
Love to watch more of this kind of videos.
What Xcode theme, with font and text color scheme are you using
what vscode theme did u use in this video?
Very useful hope you make more videos like this
Ive been having this bug when I login it goes into a infinite loop. It should go to a home page but its not. If I manually go to the other routes then the whole app works fine.
You can also set the base_url on axios instance itself by doing something like axios.defaults.baseURL = "YOUR_URL"';
Nice video man. What extension shows the errors while you code?
There is a card component which has 4 props being passed into it. What I would do is to pass only one prop to it called "anime" and destructure what I need inside the component. Tho the reasoning behind different props is probably because there is a lot of data inside "anime" object which makes it pointless to pass entire anime object, but if that wasn't the case I would pass only 1 prop and destructure.
that works as well, one issue I have with that is if you anime card only need to display 4 things, but your Anime object has 30 properties, you don't want to expose all that extra data to your card object since that increases coupling between your anime object and UI card component.
@@WebDevCody Yeah I agree. That is basically what I said.
@@raygo44 nice ok we’re on the same page!
What vscode extension you are using to show live errors on set of coding ? thank you in advance!
Its name is Error Lens
How can we submit apps for these refactoring videos?
My discord
How you directly importing anything by pressing some key in vs code ? please share
install auto import extension on vscode, when you type something it autocompletes for you and then autoimports it.
Good job babe!!!!!
What is better to render if u wanna display nothing. A react fragment or null?
the answer within the question
Maybe have 1 function for getAnimes/getAnime? Return all data if id is undefined?
That’s an option for sure
Could you share the extensions you use for React?
Thanks
Did you heart my question without answering it? That's odd, no?
@@vintage8 I laughed.
I love to watch videos like these
Warning: Hypthons in URLs are frowned upon in SEO
Edit: ignore the above, it's only for domain names, rather than URLs.
The first google result says google recommends using hyphens since they are more human readable
@@WebDevCody ammended as it's only relevant for domain names.
Thanks!
I really love watch your videos and the way you think 🖤
if you dont have typescript in a project then you can use jsdoc comments to annotate the code and get better intellisense support, also add jsconfig to the project to get vscode to provide even better guard rails. to get jsconfing with little effort , try `npx jsconfig.json`, then confirm checkJS is true, you could also set that in vscode itself somewhere
The routing approach just makes it more complicated. But other than that, this is cool!
I would agree for this example, but on an application with 30 different endpoints, it makes it hard to refactor a url if everything is hard coded to point to that url, but yes maybe this approach isn’t the best 😅
For me, it’s better to come up with criteria for selecting projects, because this project in the video is full of ***, for example, the url should go through -, then don’t use the id, use the slug, because there weren’t such stupid movements as downloading absolutely all things that are not displayed, otherwise you will drown in shit, and you will constantly be asked to help and help. The type from the video needs to take some kind of course for beginners, where they will explain what to do, what to think, what to optimize, think about traffic, etc.
I didn’t really understand what you’re ranting about to be honest. Are you insulting my subscribers code because he is a beginner?