Live refactoring a subscribers React SPA anime application

[@arditgashi8850]

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!

[@WebDevCody]

I often self doubt my abilities, but yes I agree, I need to just own it

[@Sapphiamur]

These refactoring sessions are awesome to learn from, thank you so much!

[@vaibhavgautam1999]

This is really helpful for new programmers like me, it feels like a PR review. And lots of new insights

[@Nodsaibot]

most of his fixes is stuff hes breaking lol

[@vaibhavgautam1999]

@@Nodsaibot doesn't matter for anyone is getting any value out of it

[@ishakzehhaf864]

Dammmnn bro, you always make very helpful videos about coding and way of working. Keep up

[@AnshumanKP]

Your videos are chill and informative, specially the live code refactoring streams. Love them!

[@Manjaco]

I believe the problem was the missing “:” at 6:37 before the ${id}

[@afaque.]

At last someone experienced making a video

[@3dninja54]

One thing I would say is to use lowercased words separated by hyphens for css classes. So instead of heroContainer, make it hero-container.

[@saitech2452]

that doesnt work with react if they use module any idea how would you deal with that?

[@madtin]

@@saitech2452 you would have use it like styles['hero-container'] in the jsx but It's pretty uggly so I prefer to use camelCase.

[@saitech2452]

@@madtin ye same I just use camel case I'm still looking for improvements but so far nothing found

[@bluerose2542]

5:00 What if we have a nested route?

[@BSimone95]

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.

[@stanimirdimitrov4913]

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.

[@stanimirdimitrov4913]

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!

[@rmt0858]

I think mapping would take much time.

[@qutibcodder]

Great video bro!

[@jordondax]

Great video idea man, learning a ton.

[@NguyenLam-vz9nb]

Very useful hope you make more videos like this

[@turkeymoonrover6830]

React-router has GeneratePath method for generating paths with params . Better approach then GOTO usage.

[@WebDevCody]

Illl need to check that out thanks for sharing

[@markangeloatienza7405]

Love to watch more of this kind of videos.

[@lalithrockz]

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.

[@skeetplayz]

Which VScode theme are you using?

[@raygo44]

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.

[@WebDevCody]

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.

[@raygo44]

@@WebDevCody Yeah I agree. That is basically what I said.

[@WebDevCody]

@@raygo44 nice ok we’re on the same page!

[@omerfarooq7752]

You can also set the base_url on axios instance itself by doing something like axios.defaults.baseURL = "YOUR_URL"';

[@HarshPatel-uz4nm]

What Xcode theme, with font and text color scheme are you using

[@gusde9681]

what vscode theme did u use in this video?

[@ГенаПетров-н5ы]

export page slug from page component

[@mmareplays4610]

Nice video man. What extension shows the errors while you code?

[@ProbablyArth]

I love to watch videos like these

[@sammorgan7143]

Warning: Hypthons in URLs are frowned upon in SEO Edit: ignore the above, it's only for domain names, rather than URLs.

[@WebDevCody]

The first google result says google recommends using hyphens since they are more human readable

[@sammorgan7143]

@@WebDevCody ammended as it's only relevant for domain names.

[@butwhothehellknows]

Good job babe!!!!!

[@christianwebb4748]

Maybe have 1 function for getAnimes/getAnime? Return all data if id is undefined?

[@WebDevCody]

That’s an option for sure

[@_Rohit_Kumaar]

How you directly importing anything by pressing some key in vs code ? please share

[@yaseru]

install auto import extension on vscode, when you type something it autocompletes for you and then autoimports it.

[@xiiEJRAM]

I really love watch your videos and the way you think 🖤

[@ESArnau]

What is better to render if u wanna display nothing. A react fragment or null?

[@foxyl0l]

the answer within the question

[@markangeloatienza7405]

What vscode extension you are using to show live errors on set of coding ? thank you in advance!

[@joansebastiancarrillobaron8014]

Its name is Error Lens

[@ninjaplavi]

How can we submit apps for these refactoring videos?

[@WebDevCody]

My discord

[@vintage8]

Could you share the extensions you use for React? Thanks

[@vintage8]

Did you heart my question without answering it? That's odd, no?

[@fadoashura2867]

@@vintage8 I laughed.

[@李鴻均-y6i]

Thanks!

[@elmalleable]

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

[@RaldinCasidar]

The routing approach just makes it more complicated. But other than that, this is cool!

[@WebDevCody]

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 😅

[@ThePirateHistory]

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.

[@WebDevCody]

I didn’t really understand what you’re ranting about to be honest. Are you insulting my subscribers code because he is a beginner?