0% completed

All LessonsFree Lessons (21)

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

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

JSX – an Introduction

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

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

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

Event Handling

Introduction to Event Handling Differences Between the React Event Handlers and the Native Event Scopes in Event Handlers The SyntheticEvent Object Quiz

Forms

Introduction to Forms Uncontrolled Components Controlled Components Changing of Values Quiz

Lists, Fragments, and Conditional Rendering

Introduction Lists Fragments Conditional Rendering Custom render() Methods and Components Quiz

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

Higher Order Components

Introduction Implementing a Higher Order Component Exercise Quiz

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

Context API

Introduction API Usage of Multiple Contexts contextType Performance Issues Quiz

Refs

Introduction String Refs Callback Refs Refs Via createRef()Ref Forwarding Quiz

Error Boundaries

Introduction Implementing an Error Boundary Error Boundaries in Practice Quiz

Portals

Introduction Creating Portals Portals and Their Relationship to Their Parent Component Quiz

Code Splitting

Introduction Using Dynamic Imports Display Fallbacks with React.Suspense Quiz

Typechecking with PropTypes, Flow, and TypeScript

Introduction PropTypes Flow TypeScript Quiz

React Hooks – an Introduction

Introduction Built-in Hooks Managing State with useState()Adding Side Effects with useEffect()Accessing Context with useContext()Quiz

Hooks in Action

Introduction Implement Your Own Hooks Working with Data in Hooks Quiz

The Hooks API

Introduction useState useEffect useContext useReducer Reducers in Practice useCallback useMemo useRef useLayoutEffect useDebugValue useImperativeHandle Quiz

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

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

Fourth Parameter for connect()

Combining the Puzzle Pieces

Redux with React Hooks

Internationalization

Introduction Setup of i18next withTranslation() Higher-order Component useTranslation() Hook Complex Translations Using the Trans Component Quiz

Conclusion

Appendix

Tools and Frameworks

React Deep Dive: From Beginner to Advanced/

...

/

Introduction to Redux

Introduction to Redux

We’ll learn about Redux’s functions and its basic principles.

We'll cover the following...

What is Redux?

What is Redux?

Redux is a predictable state container. But what exactly does this mean? It’s important to really understand the principles of Redux to avoid common errors and set yourself up for success.

Redux

Redux as a tool is based on the principles of Flux architecture. This type of architecture has been developed at Facebook to simplify ...