React Deep Dive: From Beginner to Advanced

Takeaway Skills

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.

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.

Course Overview

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.

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Introduction

Getting Started

General

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

How Did React Come into Existence?

Into the Deep End

React Elements

Tools and Setup

Zero Config Setup

Quiz

2. Introduction to ES2015+

The "New" Javascript

Variable Declarations with let and const

Arrow Functions

New String and Array Methods

Objects

Classes

Spread Operator

Destructuring

Rest Operator

Template Strings

Promises

Asynchronous Functions with async / await

Import Syntax and JavaScript Modules

Quiz

3. JSX – an Introduction

JSX as an Important Building Block in React Development

Expressions in JavaScript

What Else You Should Know

Quiz

4. Rendering of Elements and Components in React

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

5. State and Lifecycle Methods

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

6. Event Handling

Introduction to Event Handling

Differences Between the React Event Handlers and the Native Event

Scopes in Event Handlers

The SyntheticEvent Object

Quiz

7. Forms

Introduction to Forms

Uncontrolled Components

Controlled Components

Changing of Values

Quiz

8. Lists, Fragments, and Conditional Rendering

Introduction

Lists

Fragments

Conditional Rendering

Custom render() Methods and Components

Quiz

9. CSS and Styling

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

Introduction

Implementing a Higher Order Component

Exercise

Quiz

11. Functions as a Child and Render Props

Introduction

Functions as a child

Render Props

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

Quiz

12. Context API

Introduction

API

Usage of Multiple Contexts

contextType

Performance Issues

Quiz

13. Refs

Introduction

String Refs

Callback Refs

Refs Via createRef()

Ref Forwarding

Quiz

14. Error Boundaries

Introduction

Implementing an Error Boundary

Error Boundaries in Practice

Quiz

15. Portals

Introduction

Creating Portals

Portals and Their Relationship to Their Parent Component

Quiz

16. Code Splitting

Introduction

Using Dynamic Imports

Display Fallbacks with React.Suspense

Quiz

17. Typechecking with PropTypes, Flow, and TypeScript

Introduction

PropTypes

Flow

TypeScript

Quiz

18. React Hooks – an Introduction

Introduction

Built-in Hooks

Managing State with useState()

Adding Side Effects with useEffect()

Accessing Context with useContext()

Quiz

19. Hooks in Action

Introduction

Implement Your Own Hooks

Working with Data in Hooks

Quiz

20. The Hooks API

Introduction

useState

useEffect

useContext

useReducer

Reducers in Practice

useCallback

useMemo

useRef

useLayoutEffect

useDebugValue

useImperativeHandle

Quiz

21. Routing in React

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

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

Introduction

Setup of i18next

withTranslation() Higher-order Component

useTranslation() Hook

Complex Translations Using the Trans Component

Quiz

24. Conclusion

What's Next?

25. Appendix

Tools and Frameworks