hey guys how's it going welcome back to another video and in today's video I'm going to talk a little bit about the approach that I would take if I was going to learn react in 2024 so in this video I'm going to spend a brief amount of time explaining why react is important and why I think you should learn it then I'm going to present you guys with a list of topics that are completely obsolete for react in 2024 and that if I were you I would steer away from learning them so that if you ever see that in a video uh that maybe is 1 or 2 years old uh you actually don't spend time learning something that you won't need I'll also give you a simple road map of topics that I personally think ranging from beginner to Advanced so that you can kind of have a structure to how you're going to approach your learning and finally I'm going to recommend not only resources that I think are helpful for you but also how I think you can break through if you're currently stuck learning react and not being able to get out of the tutorial hell where you're just constantly watching tutorials and not actually being able to learn anything so I really hope you G value from this video uh before we get into the video actually if you can leave a like And subscribe I would massively appreciate it it will help push my videos to more people and I would be eternally grateful if you guys could do that so with that in mind let's get into the video okay everyone so let's start with uh talking about topics that I think are Obsolete and you could skip right over if if you're going to learn react in 2024 now the list is appearing right now on the screen but I'll briefly explain each one of them um the first one being class components if you've learned anything about react you've probably seen that uh class components used to be the way you would write components but I believe like in 2019 2018 uh that already became obsolete uh because of the introduction of hooks and uh functional components so I personally I learned react around 2019 so I already started started uh from the portion where uh we already had to learn functional components instead of class components and I can tell you that it is way easier in my opinion uh you'll just waste time if you're watching tutorials that use class components because it's outdated no one who is starting a project would use it nowadays but that doesn't mean that you should never learn uh class components and older react Styles because if you end up working on a company that has Legacy code uh most likely they won't have the resources to actually rewrite their whole codebase so um if you end up getting a situation like that then for sure learn it but leave it for the very end because um at that point uh you've learned all the essential stuff and you're just learning that for a specific job or specific codebase you're working on that is also applied to higher order components which used to be uh very very common uh to use in react and I still see it in certain projects that I work for uh however um it is outdated and you shouldn't spend that much time learning it because um you won't really see it uh being used in newer projects now another thing I think is is outdated is prop types so prop types used to be a way for you to protect the props of your components uh if you're familiar with components already by forcing certain types to them because JavaScript by itself doesn't have types however if you're going to be learning react one of the stages of learning react in my opinion is learning how to use typescript instead of JavaScript for your react applications so when you use typescript you can easily replace prop types because uh typescript is a typed language so uh you won't really need that and it becomes completely Obsolete and if you're working in in the industry right now uh you'll probably be using typescript I highly doubt there's a company out there using JavaScript and if they are I would be skeptical about their codebase also I chose to include Redux as one of the things on the list however don't get me wrong Redux could still be used and you can still gain a lot from using it however um there is a big contrast between how react was learned um in like the older days with now and maybe how you watch your YouTube videos might reflect on it differently because back in the day if you were learning react it wasn't just react you had to learn react and Redux and it was people had whole courses on react with Redux it used to be something that like you have to learn because there's no way someone would build an application in react without having a state manager and the most famous one at the time was Redux obviously there were other options like recoil and state X but the thing is redex was the most popular one and it it still exists um there's Redix toolkit there's multiple different versions I have videos on them however you could also just use different libraries that are more compatible with today's standards so I do think if you want to learn Redux and Redux toolkit you can go ahead but uh the context API is more important in my opinion to learn initially and it's not necessary for you to spend some a lot of time learning it in the beginning and finally I also made already a video this year on six uh react topics that would become obsolete with the newer version of react which is react 19 so if you're interested in seeing that I also added them over here it includes stuff like uh the use mimo hook uh forward refs lazy loading all that kind of stuff they're just becoming obsolete because uh with a newer version we won't have to manually do it and most of those things will be done automatically but I do still think that it's important to understand why they were important to react so uh later on uh I'll put them as part of the advanced section of the learning road map so this is basically it for the topics that I think you should avoid now let's go over the react road map of exactly which topics I would learn first and which approach I would take okay everyone so in the beginner uh level so the first thing if you've never touched react before uh you'll just need to spend a little bit of time not that much understanding why you're even doing this right uh understanding what is react understanding that react is one of the most powerful libraries out there for JavaScript it is used for creating single page web applications where you want to have some Dynamic UI that changes right so if you're building a website that is a social media application something that uh have users has users interacting with it um you might want to use react now it's important to understand that the reason why you would even want to learn react as opposed to any other Library is the mere fact that you've learned or you've heard of this before and you're coming to this video because you might want to learn the library now react is extremely popular and powerful and in the webd world the more popular library is correlates with how much better it is and not because what's popular is better always but because it has a bigger community so there's more people reporting bugs there's more people helping uh the the project and the library so it's it's just uh kind of a result of all of that and also react is developed by Facebook uh which is uh has that stamp of approval uh meaning that they have great support they have a whole team for them and it's used by multiple companies in the industry right now so it's definitely something that you should learn because um either you're a beginner who thinks that react is like the the end goal or the thing that will get you a job or you are already a developer in the industry and learning react will just add a new skill set that will open up a lot of opportunities that you currently don't have so it's definitely something that I think you guys can benefit from learning and understanding that is extremely important because the next part is actually spending time learning everything else which requires a lot of motivation so I would start off with learning how to build uh an initial react app or how to make an initial react tap inside of your project so uh if you watch tutorials online you'll probably see a lot of uh using the CLI command create react app now I'll tell you right off the bat that is actually something that I think is obsolete uh and a lot of people already agree with that I probably should have added that to the list but it I don't think it's it's necessarily a topic in react it's just a way for you to create your react application there are multiple ways to do that uh and one of them which was the most basic one was create react app now it is officially not recommended that you use create react tap anymore um there are other better options so I would recommend that as a beginner the first way you learn how to create a react application is by using something called vit now vit will allow you to generate a very simple boilerplate react app and get you started with your learning then I would spend some time learning about what is jsx so like what exactly differs a react app from a normal HTML app and this you will lead you to learning some of other beginner topics like functional components props how to reuse components uh why exactly would you even want to divide your project into different components and stuff like that then I would move directly to trying to handle some user inputs inside of an application and this will lead you to learn what is the Ed State hug which is probably one of the most beginner but also most important topics you can learn uh this is the first introduction to react hooks so it's definitely something that you want to get good at so definitely spend some time learning that and how to probably make like a website or a page that includes an input where you can type and maybe display whatever the user typing or uh allow a user to click a button and make some sort of change to the application uh that will definitely keep you at a level where you can continue progressing then I would progress to the following topics I would go through conditional rendering super important in react then uh how to use lists in react so probably using the map function and mapping through a list and displaying a list of items probably using a component for that um that's definitely important as well and then maybe how to handle a whole form in your applic how to get the data how to submit how to put everything into States all that kind of stuff and finally I would learn how to do some CSS and react so that would be some basic stuff like how to do inline styling how to import your CSS file and stuff like that and that would basically Encompass all of the beginner stuff you can spend around a week to two weeks it highly depends on what kind of developer you are how much experience you have I think you can do it in two to three days and I think you can even skip it if if you're interested in that because not not not skip it but like skim through it because um the more you stop and like try to like Hammer a topic in your head the harder you'll find it to understand it you actually learn a lot more through creating stuff and uh doing it over and over again then obsessing over the topic and trying to understand it without actually having practical use cases now we would get into the intermediate level and I would probably spend around a month learning this or even more if you want to uh it would include stuff like more harder uh use cases of the use State learning the use effect hook and all of reacts life cycle methods uh learning State Management with a used context Hook and the context API as a whole probably how to make a website with multiple routes using react router Dom knowing how to navigate through the website and and knowing how to actually build a website that looks like a real website then I would probably learn how to fetch some sort of data from an API and display it in your screen you can use different external libraries to do that you can use uh react query I really love it you can just use the fatch API and use the use effect hook to do that for you um doesn't matter how which approach you take um but I definitely think this is a good stage for this because now you can start actually building Dynamic websites uh without having the knowledge of actually building your own API but if you already have that you can apply that as well um and at this stage you can start building really nice projects I would recommend definitely spending more time trying to build projectss and challenging yourself than just watching tutorials or even reading through the documentation if you ever run into a problem refer back to the documentation or ask chpt or something and it can help you but through building you learn and I definitely think you should spend a good amount of the one to two months you're learning this um actually building projects that you want to and actually challenging yourself now we get to the advanced uh part of the react uh learning experience which would be uh learning all of the remaining hooks that exist in react you don't have to learn every single one of them but learning the ones that you think are going to be useful for your use case uh probably the used ref Hook is one of the most important ones that I haven't mentioned yet but I think it would get it would be important in this stage um also learning how to do some complex State Management uh and react uh I recommend getting good with libraries like react query at this point and how to actually manage your states with it um getting good at optimizing your code for performance and stuff like that and maybe spending some time watching best practices videos um and understanding how to better write your code in react super important though I think at this stage you're ready to learn typescript and I think it would benefit you a lot if you spend a good amount of time learning how to translate everything that you've learned so far into also doing it the same way but with typescript finally I also think testing in react is important however I do think it's that kind of thing where you'll have to learn eventually if you want to learn it at this stage feel free to do so it is super important however most people don't actually test unless they're going to be working at a job or starting their own startup so if you are in one of those two cases I think it's important if you're not I think you can skip through it if you are interested in doing that but I also think it's important so whenever this this point you choose whatever you want to do but this is just me outlining what I think could be cool and what I think could be important also I think you could uh maybe learn um how to introduce graphql into react now this is not necessary for everyone I personally learned how to integrate graphql using the Apollo client library but also graphql is losing some of the trend that it used to have so I'm not really sure if I would deem this as the most important thing to learn but I definitely think it still has some momentum so um if you already know how to use a grq API or if you already have a gqu API that you you want to use maybe learn how to integrate it in react it could be really important also at this point you might want to learn something other than vit so we throughout all of this I've recommended you guys to spend some time learning vit right but if you're at this point you've probably heard of something called nextjs and nextjs is gaining a lot of momentum it is really nice uh it allows you to do a lot of stuff that you couldn't before with create Rea app and it differs a lot from vit as well and because of that a lot of companies actually use nexj and require you to know that so um I would definitely spend some time learning nextjs if you're interested in that um it would be a whole other video I would say if I wanted to give you topic by topic but the thing is nextjs is very similar and includes a lot of the concepts of what you've learned so far so uh it would be more of like just adding a couple stuff to the things you already know and changing your perspective on how a react app should be structured now this is basically it for all of the beginner to advance topics at at this point you'll choose completely and you'll know how to actually progress there's stuff that you only learn after you run into problems like uh if you ever need to make a website that requires uh multiple languages you'll learn how to internationalize your website how to localize your strings and make it uh be present and and change depending on the language um if you're ever run into breaches in your website you'll spend some time learning security best practices and how to protect your website stuff like that so I think at this point there's no reason with for me to actually structure out everything because it there's no structure at this point you will just learn everything and know what you need to learn yourself so I hope you guys enjoyed that breakdown now as a final part of this video I want to spend some time explaining my Approach of how I would actually learn because um a lot of people comment on my videos saying hey I I love the way you teach I think it resonates with me um but I'm stuck at this point or uh I've been watching tutorials and I can't get out of this uh specific Trends where I'm just watching tutorials and I I'm actually not gaining anything um so I want to give you guys my perspective on it back when I learned react there weren't that many super long videos on YouTube so if you see YouTubers like myself uh making videos on YouTube we might have videos which were like 5 hours long eight hours long huge courses and the reason for that I believe specifically at least from my perspective people just started watching those videos more and more I noticed that whenever a video of mine was super long more people would watch it and I don't know why because I personally don't like super long videos uh but I don't know if you guys are the same so um I would say that if you spend 10 hours watching a course but nonstop without actually breaking it down and building something on your own in between them I think you're not doing it right my Approach would be the following I would go through each of the topics and I would watch a tutorial on it maybe even watch a course that is like I don't know 2 hours long 3 hours long something like that but not watch it all the way through you know not just copying what the person is doing I'll learn something and try to um maybe do it myself but uh in a different way you know so if I'm teaching you react States and I'm teaching you how to uh click on a button uh and make something show up on the screen you know uh with a state uh I would probably watch that understand what they did to do that and then try to do something a little bit different using what I just learned so maybe trying to make uh myself be able to click on a button and change the color of a a text you know in my screen um or if I'm building an app that has a lot of crud operations right a lot of create read delete and update operations I would spend some time learning how to maybe do some other more complex operations how to uh divide my components in a different way how to do things different from what you're watching because if you're just obsessing over the way the instructor is teaching and what they're doing then you're you're not really learning anything so I would basically spend 70 to 80% of my time learn and react just building projects when I learned I I faked it till I made it so like I would learn I would learn like till the intermediate level and then start building a project that was out of my league you know I built a Spotify Tinder app like website which was kind of like a a website where you um match with someone uh based on your musical taste and you know what when I started building the website I barely knew how States worked I literally didn't know anything but I would run into a problem and I would be like okay I want to do this specific thing and I would search on Google and then I would learn how to do that because that's the thing that I needed so I had a use case for what I was learning and automatically they just put something in my brain you know so I would just try to consistently challenge myself through projects and um um that would also keep your interest up and keep you motivated so that is the approach I would take don't spend your time watching tutorials over tutorials over tutorials because that that that doesn't really matter you know and also don't go and learn a topic just for the sake of learning a topic learn a topic if you find the need to learn it you know if you've never noticed the need to learn uh Redux don't go ahead and learn Redux you know like only if you're like okay I realized that my my website would be better if I learned this then actually go and learn it so that's my Approach with it that's how I think you will kind of get unstuck from tutorial hell uh by just building stuff and challenging yourself through more and more complex projects so if you enjoy this video please leave a like down below and comment which you want to see next subscribe because I'm posting every week and I would massively appreciate it if you guys are looking to deploy a website check out uh our partners hostinger I'll leave a link in the description uh they're really nice this video is not sponsored but I always like shouting them out cuz I do really like their service so uh that's basically it really hope you guys enjoyed it and I see you guys next time