How to Learn React Fast in 2024: A Beginner's Guide

Summary

This video outlines the six essential skills you must master to become a React developer and secure a frontend developer role. The presenter emphasizes the importance of learning class-based components, JavaScript data transformation, context usage, routing, custom hooks, and making API calls. Additionally, a bonus test is provided to evaluate your React skills, focusing on timers and hooks. The video encourages active learning, self-research, and practical coding tests to solidify knowledge, while also offering mentorship and interview preparation services for aspiring developers.

Takeaways

• 😀 Learning class-based components is essential, even though hooks are more popular today. You may encounter older codebases that use classes.
• 📚 Understanding classes will help you grasp hooks better, as they provide a contrast for understanding how hooks improve upon them.
• 🍳 Mastering JavaScript data transformation is key. Combining and transforming data (like in a to-do app or Facebook post) is a core skill.
• 🔑 Learning how to use React Context properly is important. It is commonly used for data storage but has other significant use cases as well.
• 🌐 Routing is essential for React developers. Learn React Router before moving to Next.js, focusing on dynamic routes and route protection.
• 🔧 Custom hooks are crucial for optimizing React code. Knowing when and how to create them can improve your development workflow.
• 📡 Understanding how to make API calls is mandatory. Learn how to fetch and manipulate external data using HTTP verbs and status codes.
• 🕹️ Testing your knowledge of timers, hooks, and base React APIs with a reaction time app is a good way to measure your proficiency.
• 🎯 Interview preparation is crucial. Practice interviews regularly to improve your chances of landing a front-end development job.
• 🚀 Reaction time tests can be used to challenge your React knowledge, particularly with timers, hooks, and handling custom hooks.

Q & A

Why is it important to learn class-based components in React, even though hooks are more commonly used?

Class-based components are important to learn because many older codebases still use them. Some companies have not adopted newer technologies like hooks, so understanding classes ensures you can work on legacy code. Additionally, learning classes helps provide a better understanding of how hooks work, allowing for a stronger grasp of React as a whole.

What is data transformation in the context of frontend development?

Data transformation involves taking raw data and modifying it into a format suitable for display or further use. For example, filtering and sorting data in a to-do list app based on user input, or transforming a list of comments into a count of total comments. It is a crucial skill for frontend developers, as many applications require manipulating data before presenting it to users.

What are some practical applications of React context, and when should it not be used?

React context is often used for passing data like global state without prop drilling, but it's not limited to that. Developers should understand how to use it for other purposes like theming or managing authentication. However, it should not be used for every situation, especially when simpler state management techniques would be more efficient.

Why is it recommended to learn routing in React before jumping into Next.js?

Learning routing with plain React and libraries like React Router helps developers understand the core concepts of routing, such as creating dynamic routes and protecting them. This foundational knowledge is useful before adopting Next.js, which has its own built-in routing mechanisms. Starting with plain React gives a deeper understanding of routing's workings.

What are custom hooks, and why are they important for a React developer?

Custom hooks allow developers to reuse logic across different components in a React application. They are a crucial concept because they help encapsulate complex logic, making the code more modular and maintainable. Knowing when and how to create custom hooks can greatly improve the efficiency and structure of a React codebase.

Why should React developers understand API calls, and what are some key concepts they should know?

React developers need to understand API calls because almost all applications rely on external data from servers. Knowing how to make HTTP requests, handle responses, and manage errors is essential. Developers should also understand the most common HTTP verbs (GET, POST, PUT, DELETE) and status codes (200, 404, 500) for effective API integration.

What is the purpose of the F1 reaction test mentioned in the script?

The F1 reaction test is a mock coding exercise that challenges developers to build a timer-based application. This test helps assess the developer's understanding of hooks, timers, and React's API. Passing this test indicates a strong grasp of React's core concepts and the ability to apply them in a practical scenario.

How does learning both class-based components and hooks benefit a React developer?

Learning both class-based components and hooks provides a well-rounded understanding of React. While hooks are the more modern approach, class-based components are still found in many existing projects. Understanding both allows developers to work on a wider variety of codebases and makes it easier to grasp the underlying principles of React's component architecture.

What is passive learning, and why does the speaker encourage doing personal research?

Passive learning is when someone absorbs information without actively engaging in the material, such as listening to a tutorial. The speaker encourages personal research because active learning, where you investigate and explore concepts on your own, leads to better retention and deeper understanding of the material.

What does the speaker mean by 'data transformation' in the context of a to-do app?

In a to-do app, 'data transformation' refers to operations like filtering the list based on user input and sorting tasks by certain criteria. For example, a user typing into a search bar to filter tasks is transforming the raw list of to-dos into a more refined dataset. This concept helps developers manage and display data dynamically based on user interactions.

Outlines

00:00

🚀 Mastering the Six Essentials of React Development

The speaker introduces the six essential skills required to become a proficient React developer and secure a frontend developer job. The first of these essentials is learning class-based components, which many believe are outdated but still relevant in legacy projects. Understanding classes also helps in grasping the differences between them and hooks. The speaker emphasizes the importance of trying both to appreciate the benefits of hooks.

05:02

💡 Understanding JavaScript and Data Transformation

Mastering JavaScript, specifically data transformation, is crucial for becoming a strong frontend developer. The speaker uses a cooking analogy to explain how data can be transformed to create more complex outputs. The importance of combining, filtering, and transforming data, as seen in common applications like to-do lists, is highlighted as essential knowledge for a React developer.

10:03

💻 The Value of Context, Routing, and Custom Hooks in React

The speaker emphasizes the importance of understanding React Context and routing. While many use Context for data storage, it's vital to explore its other use cases. Additionally, mastering routing is crucial, starting with basic React before advancing to frameworks like Next.js. The speaker also stresses the significance of creating custom hooks, providing an example of their utility in developing real-world applications like a CRM.

🌐 Making API Calls and Understanding HTTP Basics

The speaker discusses the importance of knowing how to make API calls and interact with servers, as most applications rely on external data. Understanding HTTP methods and status codes is essential for efficiently pulling data, displaying it, and enabling users to interact with it. The speaker encourages further research into these concepts for a deeper understanding.

🧪 Bonus Challenge: Testing Your React Knowledge

As a bonus, the speaker introduces a test to assess React skills, encouraging viewers to try an F1 reaction test that involves creating a small app. This test challenges developers to use hooks, timers, and custom hooks, and passing it signifies a solid understanding of React fundamentals. The speaker mentions that only one out of 20 people has passed this test, showcasing its difficulty.

🎯 Wrapping Up with Opportunities for Mentorship

The speaker concludes by promoting their mentorship program, which includes weekly mock interviews to help developers practice their interview skills. They also offer additional resources, such as a roadmap for frontend applications, which can be accessed for free. The speaker encourages viewers to apply for mentorship to accelerate their career change into remote frontend development.

Keywords

💡Class-based components

Class-based components are a way of writing components in React using JavaScript ES6 classes. Although now largely replaced by hooks, the video emphasizes their importance for understanding older codebases and for better grasping hooks. The speaker argues that even though classes are considered outdated, they help developers fully appreciate the benefits of hooks and may still be necessary in legacy code.

💡Hooks

Hooks are a more modern feature in React that allow developers to use state and other React features in functional components. The speaker contrasts hooks with class-based components, noting that while hooks are more commonly used today, understanding class-based components is critical to mastering hooks. Custom hooks, a type of hook created by developers to reuse logic, are also highlighted as essential for React developers.

💡Data transformation

Data transformation in programming refers to the process of modifying and combining data to create new, more meaningful information. In the video, the speaker uses a cooking analogy to explain how developers should learn to transform data into useful outputs, such as filtering, sorting, or aggregating data for display. This skill is vital for front-end developers who work with dynamic data in their applications.

💡Context

Context in React is a method for sharing data globally across the component tree without passing props manually at every level. The video stresses that understanding when and how to use context properly is crucial for React developers. While storing data is a common use case, the speaker hints at other advanced uses of context that developers should explore through research.

💡Routing

Routing in React refers to the mechanism that allows users to navigate between different pages or views in a web application. The speaker suggests that React developers should start by learning React Router, a popular library for handling routing in React apps, and understand how to create dynamic routes and protect them from unauthorized access. Mastering routing is essential because nearly all web applications use some form of navigation.

💡Custom Hooks

Custom hooks are functions that allow React developers to encapsulate reusable logic and share it between components. In the video, the speaker emphasizes the importance of learning how to create custom hooks, as they allow developers to organize their code better and avoid duplication. Custom hooks are essential in larger applications where similar logic needs to be reused in multiple places.

💡API calls

API calls involve making requests to a server to fetch, create, update, or delete data. The video mentions that React developers must be skilled in making API calls since most web applications interact with external data sources. Understanding HTTP verbs (e.g., GET, POST, PUT) and status codes (e.g., 200, 404, 500) is critical for building dynamic, data-driven applications.

💡HTTP status codes

HTTP status codes are standardized responses given by servers to indicate the result of an API request. Common codes include 200 (success), 404 (not found), and 500 (server error). The video highlights the importance of knowing these codes for debugging and understanding API responses when making requests in React applications.

💡Passive learning

Passive learning refers to absorbing information without actively engaging or applying the knowledge. The speaker encourages viewers to go beyond passive learning, such as simply listening to the video, and instead suggests conducting their own research to internalize and understand the concepts fully. This distinction is crucial for developing strong programming skills.

💡Mock interviews

Mock interviews are simulated interviews designed to prepare candidates for real job interviews. In the video, the speaker offers mock interviews as part of their mentorship program to help aspiring developers practice and gain confidence in their interview skills. The speaker stresses the importance of practicing interviews regularly as part of the job preparation process.

Highlights

To be considered a React developer, mastering six key areas is mandatory.

Class-based components are still relevant, especially for legacy codebases, despite the current preference for hooks.

Learning classes helps you better understand hooks by giving context on how React evolved.

Understanding JavaScript data transformation is essential for handling complex data manipulation in React apps.

Transforming data, like sorting and filtering lists, is a common requirement in front-end development.

Mastering React Context is crucial, not just for data storage, but for more advanced use cases.

Understanding routing is fundamental for building dynamic applications with protected and dynamic routes.

Creating custom hooks is essential for code reuse and handling complex logic in React.

API calls are fundamental to any React application, allowing you to fetch and manipulate data from external sources.

Familiarize yourself with HTTP verbs and status codes (e.g., 200, 404, 500) to handle API requests effectively.

The F1 reaction test is a bonus challenge that evaluates your proficiency with hooks, timers, and React’s base API.

Only one out of 20 students has passed the F1 reaction test, highlighting its difficulty.

Practicing mock interviews weekly is a core part of preparation, as interviewing is a skill that requires continuous practice.

The speaker offers a mentorship program designed to accelerate career transitions into front-end development.

The speaker provides a free roadmap of applications that was previously sold for $50.

Transcripts

so there are six things that you need to

master if you want to call yourself a

react developer and if you want to get a

frontend developer job and these six

things are absolutely mandatory I will

not consider you a react developer if

you don't know these six things and I'm

going to give you at the end a bonus uh

a quick test that's going to show how

good of a react developer are you okay

so the first thing that you need to know

or like the yeah the first that you need

to know are classes right the the the

class-based component architecture and I

know a lot of people are saying hey you

shouldn't learn classes you should learn

hooks probably most people don't even

mention classes anymore in their courses

in their tutorials and that's absolutely

insane in my opinion uh people say that

classes are outdated and in

uh in a way they are right nobody is

really using classes anymore but there

are a few exceptions so the reason why

you should learn classes is because you

might get a job sorry the fly is here

you might get a job where uh the code

they wrote was I don't know in 2016 2017

2018

2019 and believe it or not companies are

not jumping on the hype of a new

technology right away so even though you

are learning I don't know nextjs right

now people might still use react like uh

uh react created with create react up

which used to be the de facto uh way of

creating an application a few years ago

okay so you might jump into that and if

you don't know how to use classes you'll

be having a bit of a trouble okay also

classes will help you understand hooks

way better because all all the time

people are saying hooks are way better

than classes right or like hooks are so

good or like hooks are so easy to

understand easy to understand compare

with what because if I say hey do you

like pizza you'll say yeah but if you

never tried a burger would you be able

to choose between a pizza and a burger

no it's impossible so you have to try

both to understand if you like pizzas or

more or in this case to understand why

all the hype is about pizza so learn

about classes they will help you out

massively and there are a few things

that classes help you out uh with that

hooks are not I'm not going to get into

it right now because you should do your

own research because if you do your own

research that's when you're actually

learning right so right now you are

doing something called passive learning

I'm spitting stuff at you and you are

just taking it in hopefully but if you

do your own research that's when you

actually internalize information and I

recommend you uh to do that okay now the

next thing that you need to know as a

react developer is not even a reacting

is Javascript and most specifically you

should understand data transformation so

what do I mean by that imagine you have

uh a few ingredients in your fridge and

you want to cook a breakfast right you

want to prepare a breakfast for yourself

and for your girlfriend or for your

boyfriend or whatever you have okay well

what I've seen most of the time in

regular programming courses and uh in

most Juniors portfolios is that they

take an egg they boil the egg and they

they eat the egg okay they never even

bother thinking about maybe I could fry

the egg a little bit in um I don't know

in a butter then I can add some bacon

maybe I can add some chopped onions and

then I can have salad made of tomatoes

and cucumbers and feta cheese right so

what have I done there I have combined

certain ingredients to create a more

rounded dish if that makes sense and it

actually works in a similar way in

programming most of the time what you'll

see is a lot of data combin to create a

different type of data um for example

when you are on Facebook and you see

that a post has I don't know 300

comments well that number was created by

reducing the total amount of comments

and replies into a number so there are

not different data entities it's just

one big data structure cooked into one

number okay that was a data

transformation there are so many other

examples like for

example take a shot for every single

time I say example for example you could

have a to-do app and then a filter at

the top right so as you type in

something in the to-do app then the list

becomes sper because it's going to match

whatever you typed in the filter that's

a data transformation and then you can

have another I don't know maybe a drop

down that sorts the data so you filter

the data you sort the data and then you

display it and you give it to the user

okay so that's data transformation and

you should know that I can guarantee you

that's going to make you a strong front

end developer and uh is going to help

you create more interesting applications

which in fact or in turn will get you

paid okay cuz that's why we are doing

this to get paid not to have fun there

are other things that are way more fun

than writing code trust me okay but to

get to do those fun things you need to

learn how to code or go Plum the next

thing that you need to learn is context

and how to use it and when not to use it

I'm not going to get too much into this

because it's so simple and uh yet so

complex um you need to

understand cuz most people use context

to store data right but that's not the

only use case for uh context it's it's a

good use case for uh using context but

it's not the only use case so I would

highly recommend it to get into like the

Integrity of how context works and

whatnot

again I'm not going to get into this

right now because uh this video is going

to get too long then the next thing that

you need to learn is routing um I

recommend people to start uh their react

journey by not using nextg and using the

plain react maybe with react router

doome um and trying to understand how

routing works and how to create Dynamic

routes and whatnot or how to protect

certain routes from um from Intruders

that's going to help you out as well

because every application that you see

online has some sort of routing pretty

much all websites have some sort of

routing you need to understand this

concept then the next thing is to

understand Uh custom hooks so in the

beginning I told you that classes are

important you should know those um and

then I told you that you know people say

that hooks are better than classes I

agree to a certain extent uh but then

you should also learn how to create your

own custom hooks so I'm building my own

CRM right now an ass SAS

application where I track everything

that's happening inside the business and

oh my I'm I'm creating so many custom

hooks it's unbelievable this is such a

useful concept and you as a front end

developer uh as a react developer you

should absolutely know how to create

custom Hooks and you should know when to

create a custom hook and you should know

when not to create a custom hook that's

my opinion um then API calls you should

learn how to make API call because you

need to learn how to pull data from

outside and that's going to be very

beneficial because pretty much all apps

rely on a server an API that's going to

give you the data and you as a from the

developer will pull that data display

that data and let the user interact with

the data create new data etc etc so this

is an absolutely mandatory thing you

should know the most popular HTTP verbs

you should know the most popular HTTP

status codes like 500 200 40 for 403 uh

again I'm giving you ideas and I want

you to go ahead and research these

things on your own so you can actually

understand uh uh how those Concepts come

together okay now as a bonus I promised

you a bonus this is a test I give to all

my students because we do mock

interviews uh every week uh because I

believe that interviewing is a skill

that you need to practice it I don't

know how most aspiring developers are

are trying to wink the interview part of

the process of getting a job but we do

that every week so if you join my

program PL plug intended uh Shameless

plug uh you are going to get one

interview per week or you're going to

attend one interview prep a week you can

watch me interview other people and then

you can learn how an interview actually

works or how it looks how it feels etc

etc so you can get used to it whenever

you are going to have have an interview

but besides that I want you to go on

Google and type in F1 reaction

test and the first result should be f1st

start.

glitch.me and that's a very simple

application that simulates uh your

reaction time so let me

just basically I press start I need to

wait for the lights to go

out ah and now I have a jump start so

now I need to reset

so that's my reaction time so this silly

game wait this silly game that you see

here might look very simple yet childish

but this is going to test your knowledge

of timers of hooks of custom

hooks uh and we will see how good you

are uh using the base API of react so

far from what I remember I gave this

test to like 20 people only one person

managed to pass it okay that's how hard

it is but if you take this test and if

you can pass it if you can build this

app that means you

really understand how react works okay

all the other stuff that I mentioned are

important but this is going to be the

big test which which is going to show

you what you are made of all right so I

hope this video helps if you want me to

help you make this career change as fast

as possible so you can work remote as a

front end developer then apply for my

mentorship that's the first link in the

description if you want to check out the

program before you join that's the

second link in the description and if

you want my road map of applications

that I used to sell for 50 bucks you can

get it now for free by clicking the

third link in the description

so with that out of the way I wish you a

great day bye