How To Learn React In 2024 - React Roadmap

PedroTech
2 Jul 202420:50

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

00:00

🚀 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.

05:01

📝 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.

10:02

🛠 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.

15:03

🌐 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.

20:03

🎓 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

React is an open-source JavaScript library used for building user interfaces, particularly for single-page applications. It is a core topic of the video, which discusses the approach to learning React in 2024. The script mentions React's importance due to its popularity and powerful features for creating dynamic UIs, which is why the speaker recommends learning it.

💡Class Components

In React, class components were traditionally used to create reusable UI components. However, the script notes that they have become obsolete due to the introduction of hooks and functional components. The speaker suggests that new learners should avoid spending time on class components as they are outdated and not used in modern React projects.

💡Functional Components

Functional components are a simpler and more modern way to create components in React, which have become the standard after the introduction of hooks. The video emphasizes learning functional components over class components, as they are the current best practice in the React community.

💡Hooks

Hooks are a feature in React that allows functional components to have 'side effects' and maintain state. The script mentions that with the introduction of hooks, class components have become obsolete. Hooks are fundamental to modern React development and are a key learning point for beginners.

💡TypeScript

TypeScript is a typed superset of JavaScript that adds static types to the language. The video suggests that learning TypeScript is an important step in React development, as it can replace prop types and provide a more robust type system for React applications.

💡Context API

The Context API in React is used for sharing values across the component tree without having to explicitly pass props down multiple levels. The script highlights the importance of learning the Context API for state management, especially in the absence of Redux, which is considered less necessary in modern React development.

💡Redux

Redux is a state management library often used with React to manage state more predictably across the app. The video mentions that while Redux can still be useful, it is not as essential as it once was due to the Context API and other state management solutions.

💡Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. The script recommends using Vite over Create React App for setting up new React projects, as it is a more current and efficient tool.

💡JSX

JSX is a syntax extension for JavaScript, allowing HTML-like structures to be used within JavaScript code. The video discusses JSX as a fundamental concept for understanding how React differs from traditional HTML applications and how components are rendered in React.

💡Conditional Rendering

Conditional rendering in React is the process of rendering different components or elements based on certain conditions or states. The script identifies conditional rendering as a super important topic for React developers, especially when building dynamic user interfaces.

💡React Router DOM

React Router DOM is a version of React Router used for web applications to manage navigation and dynamic routing. The video mentions learning React Router DOM as part of the intermediate topics, which is essential for building multi-page React applications.

💡API

An API (Application Programming Interface) is a set of protocols and tools for building software applications. The script discusses the importance of learning how to fetch and display data from an API in React, which is a key skill for creating dynamic websites that interact with back-end services.

💡Next.js

Next.js is a React framework that enables features like server-side rendering and static site generation. The video suggests learning Next.js as part of the advanced topics, as it is gaining momentum and is used by many companies for building modern web applications.

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

play00:00

hey guys how's it going welcome back to

play00:01

another video and in today's video I'm

play00:04

going to talk a little bit about the

play00:05

approach that I would take if I was

play00:07

going to learn react in 2024 so in this

play00:10

video I'm going to spend a brief amount

play00:12

of time explaining why react is

play00:13

important and why I think you should

play00:15

learn it then I'm going to present you

play00:16

guys with a list of topics that are

play00:18

completely obsolete for react in 2024

play00:21

and that if I were you I would steer

play00:23

away from learning them so that if you

play00:24

ever see that in a video uh that maybe

play00:27

is 1 or 2 years old uh you actually

play00:29

don't spend time learning something that

play00:31

you won't need I'll also give you a

play00:33

simple road map of topics that I

play00:35

personally think ranging from beginner

play00:37

to Advanced so that you can kind of have

play00:39

a structure to how you're going to

play00:40

approach your learning and finally I'm

play00:42

going to recommend not only resources

play00:45

that I think are helpful for you but

play00:47

also how I think you can break through

play00:50

if you're currently stuck learning react

play00:52

and not being able to get out of the

play00:54

tutorial hell where you're just

play00:55

constantly watching tutorials and not

play00:57

actually being able to learn anything so

play00:59

I really hope you G value from this

play01:00

video uh before we get into the video

play01:02

actually if you can leave a like And

play01:04

subscribe I would massively appreciate

play01:05

it it will help push my videos to more

play01:07

people and I would be eternally grateful

play01:09

if you guys could do that so with that

play01:11

in mind let's get into the

play01:22

video okay everyone so let's start with

play01:26

uh talking about topics that I think are

play01:27

Obsolete and you could skip right over

play01:29

if if you're going to learn react in

play01:31

2024 now the list is appearing right now

play01:33

on the screen but I'll briefly explain

play01:35

each one of them um the first one being

play01:38

class components if you've learned

play01:39

anything about react you've probably

play01:41

seen that uh class components used to be

play01:43

the way you would write components but I

play01:45

believe like in 2019 2018 uh that

play01:49

already became obsolete uh because of

play01:51

the introduction of hooks and uh

play01:53

functional components so I personally I

play01:55

learned react around 2019 so I already

play01:59

started started uh from the portion

play02:02

where uh we already had to learn

play02:04

functional components instead of class

play02:05

components and I can tell you that it is

play02:07

way easier in my opinion uh you'll just

play02:10

waste time if you're watching tutorials

play02:11

that use class components because it's

play02:13

outdated no one who is starting a

play02:16

project would use it nowadays but that

play02:18

doesn't mean that you should never learn

play02:20

uh class components and older react

play02:22

Styles because if you end up working on

play02:24

a company that has Legacy code uh most

play02:26

likely they won't have the resources to

play02:28

actually rewrite their whole codebase so

play02:31

um if you end up getting a situation

play02:33

like that then for sure learn it but

play02:35

leave it for the very end because um at

play02:38

that point uh you've learned all the

play02:39

essential stuff and you're just learning

play02:41

that for a specific job or specific

play02:43

codebase you're working on that is also

play02:45

applied to higher order components which

play02:48

used to be uh very very common uh to use

play02:51

in react and I still see it in certain

play02:53

projects that I work for uh however um

play02:57

it is outdated and you shouldn't spend

play02:59

that much time learning it because um

play03:01

you won't really see it uh being used in

play03:04

newer projects now another thing I think

play03:06

is is outdated is prop types so prop

play03:09

types used to be a way for you to

play03:10

protect the props of your components uh

play03:13

if you're familiar with components

play03:15

already by forcing certain types to them

play03:17

because JavaScript by itself doesn't

play03:18

have types however if you're going to be

play03:20

learning react one of the stages of

play03:22

learning react in my opinion is learning

play03:24

how to use typescript instead of

play03:26

JavaScript for your react applications

play03:28

so when you use typescript you can

play03:30

easily replace prop types because uh

play03:33

typescript is a typed language so uh you

play03:36

won't really need that and it becomes

play03:38

completely Obsolete and if you're

play03:39

working in in the industry right now uh

play03:42

you'll probably be using typescript I

play03:43

highly doubt there's a company out there

play03:45

using JavaScript and if they are I would

play03:47

be skeptical about their codebase also I

play03:50

chose to include Redux as one of the

play03:52

things on the list however don't get me

play03:54

wrong Redux could still be used and you

play03:57

can still gain a lot from using it

play03:59

however um there is a big contrast

play04:02

between how react was learned um in like

play04:06

the older days with now and maybe how

play04:08

you watch your YouTube videos might

play04:10

reflect on it differently because back

play04:12

in the day if you were learning react it

play04:14

wasn't just react you had to learn react

play04:17

and Redux and it was people had whole

play04:20

courses on react with Redux it used to

play04:22

be something that like you have to learn

play04:24

because there's no way someone would

play04:26

build an application in react without

play04:28

having a state manager and the most

play04:30

famous one at the time was Redux

play04:32

obviously there were other options like

play04:34

recoil and state X but the thing is

play04:37

redex was the most popular one and it it

play04:39

still exists um there's Redix toolkit

play04:42

there's multiple different versions I

play04:44

have videos on them however you could

play04:46

also just use different libraries that

play04:48

are more compatible with today's

play04:50

standards so I do think if you want to

play04:52

learn Redux and Redux toolkit you can go

play04:54

ahead but uh the context API is more

play04:57

important in my opinion to learn

play04:58

initially and it's not necessary for you

play05:01

to spend some a lot of time learning it

play05:02

in the beginning and finally I also made

play05:04

already a video this year on six uh

play05:07

react topics that would become obsolete

play05:09

with the newer version of react which is

play05:12

react 19 so if you're interested in

play05:14

seeing that I also added them over here

play05:16

it includes stuff like uh the use mimo

play05:19

hook uh forward refs lazy loading all

play05:21

that kind of stuff they're just becoming

play05:23

obsolete because uh with a newer version

play05:25

we won't have to manually do it and most

play05:27

of those things will be done

play05:28

automatically but I do still think that

play05:30

it's important to understand why they

play05:31

were important to react so uh later on

play05:34

uh I'll put them as part of the advanced

play05:36

section of the learning road map so this

play05:40

is basically it for the topics that I

play05:42

think you should avoid now let's go over

play05:45

the react road map of exactly which

play05:48

topics I would learn first and which

play05:50

approach I would take okay everyone so

play05:52

in the beginner uh level so the first

play05:55

thing if you've never touched react

play05:56

before uh you'll just need to spend a

play05:58

little bit of time not that much

play06:01

understanding why you're even doing this

play06:02

right uh understanding what is react

play06:04

understanding that react is one of the

play06:05

most powerful libraries out there for

play06:08

JavaScript it is used for creating

play06:10

single page web applications where you

play06:12

want to have some Dynamic UI that

play06:14

changes right so if you're building a

play06:15

website that is a social media

play06:17

application something that uh have users

play06:20

has users interacting with it um you

play06:23

might want to use react now it's

play06:24

important to understand that the reason

play06:26

why you would even want to learn react

play06:28

as opposed to any other Library

play06:30

is the mere fact that you've learned or

play06:33

you've heard of this before and you're

play06:34

coming to this video because you might

play06:36

want to learn the library now react is

play06:39

extremely popular and powerful and in

play06:41

the webd world the more popular library

play06:45

is correlates with how much better it is

play06:49

and not because what's popular is better

play06:52

always but because it has a bigger

play06:53

community so there's more people

play06:55

reporting bugs there's more people

play06:57

helping uh the the project and the

play07:00

library so it's it's just uh kind of a

play07:03

result of all of that and also react is

play07:05

developed by Facebook uh which is uh has

play07:08

that stamp of approval uh meaning that

play07:11

they have great support they have a

play07:12

whole team for them and it's used by

play07:13

multiple companies in the industry right

play07:16

now so it's definitely something that

play07:17

you should learn because um either

play07:19

you're a beginner who thinks that react

play07:21

is like the the end goal or the thing

play07:24

that will get you a job or you are

play07:26

already a developer in the industry and

play07:27

learning react will just add a new skill

play07:30

set that will open up a lot of

play07:31

opportunities that you currently don't

play07:33

have so it's definitely something that I

play07:35

think you guys can benefit from learning

play07:37

and understanding that is extremely

play07:38

important because the next part is

play07:40

actually spending time learning

play07:42

everything else which requires a lot of

play07:44

motivation so I would start off with

play07:46

learning how to build uh an initial

play07:49

react app or how to make an initial

play07:51

react tap inside of your project so uh

play07:53

if you watch tutorials online you'll

play07:55

probably see a lot of uh using the CLI

play07:58

command create react app

play08:00

now I'll tell you right off the bat that

play08:02

is actually something that I think is

play08:03

obsolete uh and a lot of people already

play08:05

agree with that I probably should have

play08:06

added that to the list but it I don't

play08:09

think it's it's necessarily a topic in

play08:10

react it's just a way for you to create

play08:13

your react application there are

play08:14

multiple ways to do that uh and one of

play08:17

them which was the most basic one was

play08:19

create react app now it is officially

play08:23

not recommended that you use create

play08:25

react tap anymore um there are other

play08:28

better options so I would recommend that

play08:30

as a beginner the first way you learn

play08:31

how to create a react application is by

play08:33

using something called vit now vit will

play08:36

allow you to generate a very simple

play08:38

boilerplate react app and get you

play08:41

started with your learning then I would

play08:43

spend some time learning about what is

play08:45

jsx so like what exactly differs a react

play08:48

app from a normal HTML app and this you

play08:51

will lead you to learning some of other

play08:53

beginner topics like functional

play08:55

components props how to reuse components

play08:59

uh why exactly would you even want to

play09:00

divide your project into different

play09:01

components and stuff like that then I

play09:04

would move directly to trying to handle

play09:06

some user inputs inside of an

play09:08

application and this will lead you to

play09:09

learn what is the Ed State hug which is

play09:12

probably one of the most beginner but

play09:13

also most important topics you can learn

play09:16

uh this is the first introduction to

play09:17

react hooks so it's definitely something

play09:19

that you want to get good at so

play09:20

definitely spend some time learning that

play09:22

and how to probably make like a website

play09:24

or a page that includes an input where

play09:26

you can type and maybe display whatever

play09:29

the user typing or uh allow a user to

play09:31

click a button and make some sort of

play09:33

change to the application uh that will

play09:35

definitely keep you at a level where you

play09:37

can continue progressing then I would

play09:39

progress to the following topics I would

play09:41

go through conditional rendering super

play09:43

important in react then uh how to use

play09:46

lists in react so probably using the map

play09:48

function and mapping through a list and

play09:50

displaying a list of items probably

play09:52

using a component for that um that's

play09:55

definitely important as well and then

play09:56

maybe how to handle a whole form in your

play09:59

applic

play10:00

how to get the data how to submit how to

play10:02

put everything into States all that kind

play10:03

of stuff and finally I would learn how

play10:05

to do some CSS and react so that would

play10:07

be some basic stuff like how to do

play10:09

inline styling how to import your CSS

play10:12

file and stuff like that and that would

play10:14

basically Encompass all of the beginner

play10:16

stuff you can spend around a week to two

play10:18

weeks it highly depends on what kind of

play10:21

developer you are how much experience

play10:23

you have I think you can do it in two to

play10:26

three days and I think you can even skip

play10:28

it if if you're interested in that

play10:30

because not not not skip it but like

play10:32

skim through it because um the more you

play10:35

stop and like try to like Hammer a topic

play10:39

in your head the harder you'll find it

play10:41

to understand it you actually learn a

play10:43

lot more through creating stuff and uh

play10:46

doing it over and over again then

play10:49

obsessing over the topic and trying to

play10:50

understand it without actually having

play10:52

practical use cases now we would get

play10:54

into the intermediate level and I would

play10:57

probably spend around a month learning

play10:59

this or even more if you want to uh it

play11:02

would include stuff like more harder uh

play11:04

use cases of the use State learning the

play11:06

use effect hook and all of reacts life

play11:08

cycle methods uh learning State

play11:11

Management with a used context Hook and

play11:13

the context API as a whole probably how

play11:15

to make a website with multiple routes

play11:18

using react router Dom knowing how to

play11:20

navigate through the website and and

play11:22

knowing how to actually build a website

play11:23

that looks like a real website then I

play11:25

would probably learn how to fetch some

play11:28

sort of data from an API and display it

play11:30

in your screen you can use different

play11:32

external libraries to do that you can

play11:34

use uh react query I really love it you

play11:36

can just use the fatch API and use the

play11:38

use effect hook to do that for you um

play11:41

doesn't matter how which approach you

play11:42

take um but I definitely think this is a

play11:44

good stage for this because now you can

play11:46

start actually building Dynamic websites

play11:48

uh without having the knowledge of

play11:50

actually building your own API but if

play11:51

you already have that you can apply that

play11:53

as well um and at this stage you can

play11:56

start building really nice projects I

play11:58

would recommend definitely spending more

play11:59

time trying to build projectss and

play12:01

challenging yourself than just watching

play12:04

tutorials or even reading through the

play12:06

documentation if you ever run into a

play12:08

problem refer back to the documentation

play12:10

or ask chpt or something and it can help

play12:12

you but through building you learn and I

play12:15

definitely think you should spend a good

play12:17

amount of the one to two months you're

play12:18

learning this um actually building

play12:21

projects that you want to and actually

play12:23

challenging yourself now we get to the

play12:25

advanced uh part of the react uh

play12:28

learning experience which would be uh

play12:30

learning all of the remaining hooks that

play12:32

exist in react you don't have to learn

play12:33

every single one of them but learning

play12:35

the ones that you think are going to be

play12:36

useful for your use case uh probably the

play12:38

used ref Hook is one of the most

play12:40

important ones that I haven't mentioned

play12:41

yet but I think it would get it would be

play12:43

important in this stage um also learning

play12:46

how to do some complex State Management

play12:49

uh and react uh I recommend getting good

play12:52

with libraries like react query at this

play12:54

point and how to actually manage your

play12:55

states with it um getting good at

play12:58

optimizing your code for performance and

play13:00

stuff like that and maybe spending some

play13:01

time watching best practices videos um

play13:04

and understanding how to better write

play13:05

your code in react super important

play13:08

though I think at this stage you're

play13:09

ready to learn typescript and I think it

play13:11

would benefit you a lot if you spend a

play13:14

good amount of time learning how to

play13:15

translate everything that you've learned

play13:16

so far into also doing it the same way

play13:19

but with typescript finally I also think

play13:21

testing in react is important however I

play13:24

do think it's that kind of thing where

play13:26

you'll have to learn eventually if you

play13:27

want to learn it at this stage feel free

play13:29

to do so it is super important however

play13:32

most people don't actually test unless

play13:34

they're going to be working at a job or

play13:36

starting their own startup so if you are

play13:38

in one of those two cases I think it's

play13:40

important if you're not I think you can

play13:42

skip through it if you are interested in

play13:43

doing that but I also think it's

play13:45

important so whenever this this point

play13:47

you choose whatever you want to do but

play13:49

this is just me outlining what I think

play13:51

could be cool and what I think could be

play13:52

important also I think you could uh

play13:55

maybe learn um how to introduce graphql

play13:58

into react now this is not necessary for

play14:00

everyone I personally learned how to

play14:02

integrate graphql using the Apollo

play14:04

client library but also graphql is

play14:07

losing some of the trend that it used to

play14:09

have so I'm not really sure if I would

play14:12

deem this as the most important thing to

play14:14

learn but I definitely think it still

play14:15

has some momentum so um if you already

play14:18

know how to use a grq API or if you

play14:21

already have a gqu API that you you want

play14:23

to use maybe learn how to integrate it

play14:25

in react it could be really important

play14:27

also at this point you might want to

play14:29

learn something other than vit so we

play14:32

throughout all of this I've recommended

play14:33

you guys to spend some time learning vit

play14:35

right but if you're at this point you've

play14:37

probably heard of something called

play14:38

nextjs and nextjs is gaining a lot of

play14:41

momentum it is really nice uh it allows

play14:44

you to do a lot of stuff that you

play14:46

couldn't before with create Rea app and

play14:48

it differs a lot from vit as well and

play14:50

because of that a lot of companies

play14:52

actually use nexj and require you to

play14:53

know that so um I would definitely spend

play14:56

some time learning nextjs if you're

play14:58

interested in that um it would be a

play15:00

whole other video I would say if I

play15:02

wanted to give you topic by topic but

play15:04

the thing is nextjs is very similar and

play15:07

includes a lot of the concepts of what

play15:09

you've learned so far so uh it would be

play15:11

more of like just adding a couple stuff

play15:12

to the things you already know and

play15:14

changing your perspective on how a react

play15:16

app should be structured now this is

play15:18

basically it for all of the beginner to

play15:20

advance topics at at this point you'll

play15:23

choose completely and you'll know how to

play15:24

actually progress there's stuff that you

play15:27

only learn after you run into problems

play15:29

like uh if you ever need to make a

play15:31

website that requires uh multiple

play15:34

languages you'll learn how to

play15:35

internationalize your website how to

play15:37

localize your strings and make it uh be

play15:40

present and and change depending on the

play15:42

language um if you're ever run into

play15:44

breaches in your website you'll spend

play15:46

some time learning security best

play15:48

practices and how to protect your

play15:49

website stuff like that so I think at

play15:51

this point there's no reason with for me

play15:53

to actually structure out everything

play15:54

because it there's no structure at this

play15:57

point you will just learn everything and

play15:59

know what you need to learn yourself so

play16:02

I hope you guys enjoyed that breakdown

play16:05

now as a final part of this video I want

play16:07

to spend some time explaining my

play16:09

Approach of how I would actually learn

play16:11

because um a lot of people comment on my

play16:13

videos saying hey I I love the way you

play16:15

teach I think it resonates with me um

play16:18

but I'm stuck at this point or uh I've

play16:20

been watching tutorials and I can't get

play16:22

out of this uh specific Trends where I'm

play16:25

just watching tutorials and I I'm

play16:26

actually not gaining anything um so I

play16:29

want to give you guys my perspective on

play16:31

it back when I learned react there

play16:32

weren't that many super long videos on

play16:35

YouTube so if you see YouTubers like

play16:37

myself uh making videos on YouTube we

play16:40

might have videos which were like 5

play16:42

hours long eight hours long huge courses

play16:45

and the reason for that I believe

play16:47

specifically at least from my

play16:48

perspective people just started watching

play16:50

those videos more and more I noticed

play16:52

that whenever a video of mine was super

play16:54

long more people would watch it and I

play16:56

don't know why because I personally

play16:58

don't like super long videos uh but I

play17:00

don't know if you guys are the same so

play17:03

um I would say that if you spend 10

play17:07

hours watching a course but nonstop

play17:10

without actually breaking it down and

play17:12

building something on your own in

play17:13

between them I think you're not doing it

play17:17

right my Approach would be the following

play17:19

I would go through each of the topics

play17:22

and I would watch a tutorial on it maybe

play17:24

even watch a course that is like I don't

play17:26

know 2 hours long 3 hours long something

play17:28

like that but not watch it all the way

play17:30

through you know not just copying what

play17:32

the person is doing I'll learn something

play17:34

and try to um maybe do it myself but uh

play17:38

in a different way you know so if I'm

play17:39

teaching you react States and I'm

play17:41

teaching you how to uh click on a button

play17:44

uh and make something show up on the

play17:47

screen you know uh with a state uh I

play17:50

would probably watch that understand

play17:52

what they did to do that and then try to

play17:54

do something a little bit different

play17:56

using what I just learned so maybe

play17:58

trying to make uh myself be able to

play18:01

click on a button and change the color

play18:03

of a a text you know in my screen um or

play18:07

if I'm building an app that has a lot of

play18:11

crud operations right a lot of create

play18:13

read delete and update operations I

play18:15

would spend some time learning how to

play18:18

maybe do some other more complex

play18:20

operations how to uh divide my

play18:22

components in a different way how to do

play18:24

things different from what you're

play18:25

watching because if you're just

play18:26

obsessing over the way the instructor is

play18:28

teaching and what they're doing then

play18:30

you're you're not really learning

play18:32

anything so I would basically spend 70

play18:35

to 80% of my time learn and react just

play18:37

building projects when I learned I I

play18:40

faked it till I made it so like I would

play18:43

learn I would learn like till the

play18:45

intermediate level and then start

play18:47

building a project that was out of my

play18:48

league you know I built a Spotify Tinder

play18:52

app like website which was kind of like

play18:54

a a website where you um match with

play18:59

someone uh based on your musical taste

play19:01

and you know what when I started

play19:03

building the website I barely knew how

play19:05

States worked I literally didn't know

play19:07

anything but I would run into a problem

play19:10

and I would be like okay I want to do

play19:11

this specific thing and I would search

play19:13

on Google and then I would learn how to

play19:15

do that because that's the thing that I

play19:17

needed so I had a use case for what I

play19:20

was learning and automatically they just

play19:22

put something in my brain you know so I

play19:24

would just try to consistently challenge

play19:26

myself through projects and um um that

play19:30

would also keep your interest up and

play19:31

keep you motivated so that is the

play19:34

approach I would take don't spend your

play19:36

time watching tutorials over tutorials

play19:38

over tutorials because that that that

play19:39

doesn't really matter you know and also

play19:41

don't go and learn a topic just for the

play19:43

sake of learning a topic learn a topic

play19:45

if you find the need to learn it you

play19:47

know if you've never noticed the need to

play19:50

learn uh Redux don't go ahead and learn

play19:52

Redux you know like only if you're like

play19:55

okay I realized that my my website would

play19:58

be better if I learned this then

play20:01

actually go and learn it so that's my

play20:03

Approach with it that's how I think you

play20:04

will kind of get unstuck from tutorial

play20:06

hell uh by just building stuff and

play20:08

challenging yourself through more and

play20:10

more complex projects so if you enjoy

play20:12

this video please leave a like down

play20:13

below and comment which you want to see

play20:14

next subscribe because I'm posting every

play20:16

week and I would massively appreciate it

play20:18

if you guys are looking to deploy a

play20:19

website check out uh our partners

play20:22

hostinger I'll leave a link in the

play20:23

description uh they're really nice this

play20:25

video is not sponsored but I always like

play20:27

shouting them out cuz I do really like

play20:29

their service so uh that's basically it

play20:32

really hope you guys enjoyed it and I

play20:33

see you guys next time

Rate This

5.0 / 5 (0 votes)

相关标签
React LearningWeb DevelopmentJavaScriptFunctional ComponentsHooksTypeScriptState ManagementReact RouterAPI FetchingNext.js
您是否需要英文摘要?