How To Learn React In 2024 - React Roadmap
Summary
TLDRThis video offers a strategic approach to learning React in 2024, emphasizing React's importance and suggesting a learning roadmap from beginner to advanced levels. It advises against outdated topics like class components and prop types, and highlights the relevance of functional components, TypeScript, and the Context API. The speaker recommends learning by building projects and challenges the 'tutorial hell' by encouraging practical application of skills. The video also shares personal learning strategies and resources for enhancing React proficiency.
Takeaways
- 🚀 **React Importance**: The speaker emphasizes the importance of learning React in 2024 due to its popularity, community support, and its use in creating dynamic single-page web applications.
- ⚠️ **Outdated Topics**: Class components, higher-order components, and PropTypes are considered obsolete in 2024. Learning them should be postponed until after mastering the essentials of React.
- 📚 **Learning Redux**: While Redux is still relevant, it's not as essential as it once was. The Context API is more important to learn first, and Redux can be an additional topic based on specific project needs.
- 🔧 **React 19 Changes**: Certain topics like useImperativeHandle, forwardRefs, and lazy loading are becoming obsolete with the newer version of React, which will handle these more automatically.
- 🛠 **Beginner Roadmap**: For beginners, the speaker recommends starting with functional components, JSX, useState, conditional rendering, lists, forms, and basic CSS integration with React.
- 🔄 **Intermediate Focus**: Intermediate learners should focus on useState and useEffect hooks, context API, React Router for navigation, and fetching data from APIs.
- 🔧 **Advanced Topics**: Advanced learners should explore all remaining hooks, complex state management, performance optimization, and best practices for writing React code.
- 📝 **TypeScript Integration**: Learning TypeScript is highly recommended for adding type safety to React applications, which can replace PropTypes.
- 🔬 **Testing in React**: While testing is important, it's often learned on the job or for startups, and may not be necessary for all learners at the outset.
- 🌐 **Next.js and Vit**: Next.js is gaining momentum and is worth learning for advanced features, but Vit is a good starting point for beginners to create React applications.
- 🛑 **Avoid Tutorial Hell**: The speaker advises against passive learning through endless tutorials. Instead, learners should actively build projects and challenge themselves to apply and reinforce their knowledge.
Q & A
Why is React important to learn in 2024 according to the video?
-React is important to learn in 2024 because it is one of the most powerful libraries for JavaScript, used for creating dynamic single-page web applications. Its popularity and community support, as well as being developed by Facebook, ensure it has great support and is widely used in the industry, making it a valuable skill for job opportunities.
What is the video's stance on learning class components in React?
-The video suggests that class components are obsolete due to the introduction of hooks and functional components. It recommends learning functional components instead, but also mentions that understanding class components could be useful when working with legacy code.
Why should one avoid learning higher order components when starting with React in 2024?
-Higher order components are considered outdated, and the video suggests that they are not commonly used in newer projects. It advises to focus on current best practices and learn higher order components only if necessary for a specific job or codebase.
What is the video's advice on using PropTypes in React?
-The video considers PropTypes to be outdated, recommending the use of TypeScript instead for type safety in React applications, as TypeScript is a typed language that can replace the need for PropTypes.
How does the video suggest approaching Redux when learning React in 2024?
-While Redux can still be used and has value, the video suggests that the Context API is more important to learn initially. It advises not to spend too much time on Redux at the beginning but to consider it later in the learning process.
What is the recommended learning path for someone starting with React according to the video?
-The video recommends starting with understanding JSX, functional components, props, and component reusability. Then moving on to user inputs, state management with useState, conditional rendering, lists, forms, and CSS in React.
Why does the video suggest avoiding 'create-react-app' for starting a React project?
-The video considers 'create-react-app' to be obsolete and not recommended for use. It suggests using Vite as an alternative to generate a simple boilerplate React app for beginners.
What are some intermediate topics the video suggests learning after mastering the basics of React?
-The intermediate topics include useState and useEffect hooks, lifecycle methods, context API for state management, routing with react-router-dom, and fetching and displaying data from APIs.
What is the video's perspective on the use of libraries like Redux and React Query for state management?
-The video suggests that while Redux has its place, React Query is recommended for complex state management due to its compatibility with today's standards, and it simplifies many tasks that were previously done manually.
How does the video recommend overcoming the 'tutorial hell' when learning React?
-The video recommends spending 70-80% of the learning time building projects. It suggests learning by doing, challenging oneself with complex projects, and only learning topics when there is a specific need for them in the project.
What is the final advice given in the video for learners who want to deploy a website?
-The video suggests checking out Hostinger for deploying a website, mentioning that it is not sponsored but appreciates their service.
Outlines
🚀 Introduction to Learning React in 2024
The speaker introduces the video's purpose, which is to guide viewers on the best approach to learning React in 2024. They will discuss React's importance, outdated topics to avoid, provide a learning roadmap, and recommend resources to overcome 'tutorial hell.' The speaker also encourages viewers to like, subscribe, and support the channel for more visibility.
📝 Avoiding Obsolete React Topics in 2024
The speaker lists topics that are considered obsolete in React for the year 2024, such as class components, higher-order components, and prop types, advocating for the use of functional components and TypeScript instead. They also discuss Redux, suggesting that while still usable, it's not as essential as learning the Context API. The speaker emphasizes that understanding why these topics were important can be beneficial, especially for dealing with legacy code.
🛠 The React Learning Roadmap for Beginners
The speaker outlines a learning roadmap for React beginners, starting with understanding React's purpose and popularity. They advise against using 'create react app' and instead recommend using Vite for setting up a new project. The roadmap includes learning JSX, functional components, props, component reusability, handling user inputs, and managing state with useState. The speaker also touches on conditional rendering, using lists, and form handling in React.
🌐 Intermediate to Advanced React Topics and Learning Approach
Moving beyond the basics, the speaker discusses intermediate topics like useState, useEffect, and the Context API for state management. They also cover routing with React Router DOM and fetching data from APIs. For advanced learners, the focus is on mastering remaining hooks, optimizing performance, and possibly introducing TypeScript and GraphQL. The speaker also recommends learning Next.js, a framework gaining momentum in the React ecosystem.
🎓 Personal Learning Approach and Overcoming Tutorial Hell
The speaker shares their personal learning approach, emphasizing building projects and challenging oneself with complex tasks rather than passively watching tutorials. They suggest learning through doing and seeking information when faced with specific problems. The speaker advises against learning topics just for the sake of learning, but rather to focus on areas that are immediately relevant to one's projects or interests.
👋 Conclusion and Encouragement for Active Learning
In conclusion, the speaker reiterates the importance of active learning through building projects and encourages viewers to apply the advice given in the video. They invite viewers to like, comment, and subscribe for more content and mention a preferred web hosting service, Hostinger, without it being a sponsored mention.
Mindmap
Keywords
💡React
💡Class Components
💡Functional Components
💡Hooks
💡TypeScript
💡Context API
💡Redux
💡Vite
💡JSX
💡Conditional Rendering
💡React Router DOM
💡API
💡Next.js
Highlights
React's importance in 2024 and its significance in the web development landscape.
List of obsolete topics for learning React in 2024, including class components and higher order components.
The shift from class components to functional components due to the introduction of hooks.
The recommendation to learn TypeScript instead of using PropTypes for type safety in React.
Redux's role in modern React development and the rise of the Context API as an alternative.
The introduction of React 19 and its impact on making certain topics obsolete, such as the use of useMemo hook.
A beginner's roadmap for learning React, starting with understanding JSX and functional components.
The deprecation of 'create-react-app' and the recommendation to use Vite for setting up React projects.
Emphasis on learning useState and useEffect hooks as foundational knowledge for React development.
The intermediate learning path including conditional rendering, list handling, and form management in React.
Advanced topics such as learning all remaining hooks, complex state management, and performance optimization.
The importance of learning TypeScript to enhance React applications with static type checking.
Strategies for breaking out of 'tutorial hell' by building projects and challenging oneself.
The approach of learning by doing, where 70-80% of time should be spent on building rather than just watching tutorials.
The recommendation to learn Next.js for advanced React development and its growing industry adoption.
The idea of learning only when there is a need, rather than learning topics just for the sake of learning.
The final advice on how to approach learning React effectively by combining tutorials with practical implementation.
Transcripts
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
Ver Más Videos Relacionados
How to Master React in 2024 - The React Roadmap
Understanding Props and PropTypes in React | Complete React Course in Hindi #6
Course Introduction | Mastering React: An In-Depth Zero to Hero Video Series
How To Master React In 2024 (Complete Roadmap)
Beginner to Pro with ChatGPT in One Video!
Learn TypeScript For React in 50 Minutes - React TypeScript Beginner Crash Course
5.0 / 5 (0 votes)