Home>
Courses>

Learn React Hooks for Frontend Development

Learn React Hooks for Frontend Development

This course helps you learn web development with React using functional components in detail and introduces you to React internals.

Intermediate

97 Lessons

6h

Certificate of Completion

This course helps you learn web development with React using functional components in detail and introduces you to React internals.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

78 Playgrounds
34 Quizzes

This course includes

78 Playgrounds
34 Quizzes
Course Overview
What You'll Learn
Course Content

Course Overview

Web development has changed significantly in recent years. A web developer should not only know the basics of HTML, CSS, and JavaScript but also be proficient in frameworks such as Angular, React, and Vue. These frameworks make web development easier, enabling developers to focus on the application logic. This course is designed for newcomers to React and experienced React developers alike. You’ll start by learning the most fundamental concept in React—components. Specifically, you’ll learn about function ...Show More

What You'll Learn

Proficiency in React’s core constructs and concepts

A deep understanding of modern web development practices

The ability to create efficient, feature-rich web applications

Hands-on experience optimizing a React application

What You'll Learn

Proficiency in React’s core constructs and concepts

Show more

Course Content

1.

Prologue

Welcome to the Course
Course Overview
History of User Interface (UI)
2.

Introducing the Function Component

Building an App with ComponentsIntroducing the Function ComponentWriting a Function ComponentQuiz: Introducing the Function ComponentsChallenge: Multi-Stage NavbarSolution: Multi-Stage NavbarSummary
3.

Crafting States in Functions

Crafting a State in a Function ComponentMaking a Value PersistentSupporting Multiple StatesListening to a Value ChangePerforming a Task at the MountApplying States to Single-Page Application (SPA)Quiz: Crafting States in FunctionsChallenge: Handling Multiple States DynamicallySolution: Handling Multiple States DynamicallySummary
4.

Hooking into React

Creating a Good State SolutionUpdating a Hook at the MountWhat Is a Hook?Conditional Hook IssueAvoiding Conditional HooksQuiz: Hooking into ReactChallenge: Dynamic Navigation Menu Search BarSolution: Dynamic Navigation Menu Search BarSummary
5.

Use State to Jumpstart Components

The useState Hook DesignA Guide to the useState HookDispatching StatesThe useState Hook Flow in ReactThe useState Hook ExamplesQuiz: Use Start to Jumpstart ComponentChallenge: Quiz AppSolution: Quiz AppSummary
6.

Use Effect to Handle Side Effects

9 Lessons

7.

Use Memo to Boost Performance

9 Lessons

8.

Use Context to Cover an Area

10 Lessons

9.

Use Ref to Hide Stuff

11 Lessons

10.

Use Custom Hooks to Reuse Logic

12 Lessons

11.

Conclusion

1 Lesson

12.

Appendix: Exploring JavaScript and React

7 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Adaptive Learning

Explain with AI

AI Code Mentor

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath