HomeCoursesReact Deep Dive: From Beginner to Advanced

4.3

Beginner

16h 40min

Updated 5 months ago

React Deep Dive: From Beginner to Advanced

Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

Join 2.7 million developers at

Overview

Content

Reviews

The primary goal of this course is to give you an excellent introduction to React and its ecosystem, tackle advanced features, and teach you as many best practices as possible. Furthermore, this course digs deeper into the most popular, latest, and straight forward ways to use React.

The primary goal of this course is to give you an excellent introduction to React and its ecosystem, tackle advanced features, a...Show More

WHAT YOU'LL LEARN

You will learn about both the basic and advanced topics in React.

You will learn one of React's best state management library, Redux.

You will master some of React's most complex concepts like Hooks, Routing, Internationalization, and many more.

You will learn about both the basic and advanced topics in React.

TAKEAWAY SKILLS

JavaScript

Front-end Development

React

Content

161 Lessons23 Quizzes4 Challenges

Introduction

9 Lessons

Get familiar with React fundamentals, ecosystem, and essential tools for efficient development.

Getting Started

General

When Should I Use React and When Is It Best to Avoid It?

How Did React Come into Existence?

Introduction to ES2015+

14 Lessons

Grasp the fundamentals of ES2015+ features crucial for modern JavaScript and React development.

The "New" Javascript

Variable Declarations with let and const

Arrow Functions

New String and Array Methods

Asynchronous Functions with async / await

Import Syntax and JavaScript Modules

Quiz

JSX – an Introduction

4 Lessons

Explore JSX syntax, its role in React, and embedding JavaScript expressions for dynamic UIs.

JSX as an Important Building Block in React Development

Expressions in JavaScript

What Else You Should Know

Quiz

Rendering of Elements and Components in React

7 Lessons

Grasp the fundamentals of rendering and optimizing components, utilizing props, and maintaining pure functions.

Rendering of Elements

The Two Types of React Components

Component Composition: Multiple Components in One

Dividing Components - Keeping an Overview

Props - Receiving Data in a Component

Pure Functions in Detail

Quiz

State and Lifecycle Methods

8 Lessons

Solve problems in managing state, lifecycle methods, and component behavior in React.

Introduction

Our First Stateful Component

Changing State with this.setState()

Lifecycle Methods

Lifecycle Methods in Practice

The Combination of state and props

The Role of Lifecycle Methods in Combination with Components

Quiz

Event Handling

5 Lessons

Follow the process of managing events in React, using SyntheticEvent for cross-browser compatibility.

Introduction to Event Handling

Differences Between the React Event Handlers and the Native Event

Scopes in Event Handlers

The SyntheticEvent Object

Quiz

Forms

5 Lessons

Build on form handling in React, focusing on controlled and uncontrolled components.

Introduction to Forms

Uncontrolled Components

Controlled Components

Changing of Values

Quiz

Lists, Fragments, and Conditional Rendering

6 Lessons

Sharpen your skills in lists, fragments, conditional rendering for dynamic React applications.

Introduction

Lists

Fragments

Conditional Rendering

Custom render() Methods and Components

Quiz

CSS and Styling

6 Lessons

Look at various React styling methods including CSS-in-JS, CSS Modules, and inline styles.

Introduction

Styling with the Style Attribute

Using CSS Classes in JSX

Modular CSS with CSS Modules

CSS-in-JS - Moving Styles Into Javascript

Quiz

10.

Higher Order Components

4 Lessons

Go hands-on with higher-order components to create reusable, encapsulated component logic in React.

Introduction

Implementing a Higher Order Component

Exercise

Quiz

11.

Functions as a Child and Render Props

5 Lessons

Apply your skills to React patterns like FaaC and render props for flexible component composition.

Introduction

Functions as a child

Render Props

Render Props, Function as a Child, and Higher Order Components

Quiz

12.

Context API

6 Lessons

Deepen your knowledge of React Context API for data sharing and state management.

Introduction

API

Usage of Multiple Contexts

contextType

Performance Issues

Quiz

13.

Refs

6 Lessons

Focus on accessing and managing DOM elements in React using various types of refs.

14.

Error Boundaries

4 Lessons

Practice using error boundaries to manage and isolate React component errors effectively.

Introduction

Implementing an Error Boundary

Error Boundaries in Practice

Quiz

15.

Portals

4 Lessons

Learn how to use React Portals for rendering components outside their parent hierarchy.

Introduction

Creating Portals

Portals and Their Relationship to Their Parent Component

Quiz

16.

Code Splitting

4 Lessons

Look at how code splitting enhances React app performance by dynamically importing and lazy loading components.

Introduction

Using Dynamic Imports

Display Fallbacks with React.Suspense

Quiz

17.

Typechecking with PropTypes, Flow, and TypeScript

5 Lessons

Go hands-on with typechecking in React using PropTypes, Flow, and TypeScript.

18.

React Hooks – an Introduction

6 Lessons

Grasp the fundamentals of React Hooks for state management, side effects, and context access.

Introduction

Built-in Hooks

Managing State with useState()

Adding Side Effects with useEffect()

Accessing Context with useContext()

Quiz

19.

Hooks in Action

4 Lessons

Take a closer look at using React Hooks effectively, creating custom Hooks, and managing data.

Introduction

Implement Your Own Hooks

Working with Data in Hooks

Quiz

20.

The Hooks API

13 Lessons

Investigate React Hooks for state management, side effects, context, and performance optimization.

21.

Routing in React

11 Lessons

Learn how to improve routing in React using the React Router library.

Introduction

Routing

Defining Routes

Limit Matching Between Path and the URL

Parameters in URLs

Controlling Redirects of Particular Routes

Using Router Props

Navigating Different Routes

Connecting Components with a Router Using Higher-order Component

React Router and Hooks

Quiz

22.

State Management

17 Lessons

Step through managing state in React using Redux, including asynchronous actions and React hooks.

Introduction to State Management

Introduction to Redux

Store, Actions, and Reducers

Creating a Store

Action Creators vs. Actions

Complex Reducers

Asynchronous Actions

Typical Asynchronous Action Example

Debugging Using the Redux DevTools

Using Redux with React

mapStateToProps

mapDispatchToProps

mergeProps

Fourth Parameter for connect()

Combining the Puzzle Pieces

Redux with React Hooks

Quiz

23.

Internationalization

6 Lessons

Discover the logic behind internationalizing React applications using i18next and react-i18next.

Introduction

Setup of i18next

withTranslation() Higher-order Component

useTranslation() Hook

Complex Translations Using the Trans Component

Quiz

24.

Conclusion

1 Lessons

Engage with online React communities and share your feedback for continued mastery.

What's Next?

25.

Appendix

1 Lessons

Grasp the fundamentals of essential React tools and frameworks for enhanced development.

Tools and Frameworks

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Manuel Bieh and

Sibylle Lancaster

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

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

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

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.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

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