It seems that your browser is not supported by our application.

JSX as an Important Building Block in React Development

JSX – an Introduction

4 Lessons

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

Expressions in JavaScript

What Else You Should Know

The Two Types of React Components

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

Component Composition: Multiple Components in One

Dividing Components - Keeping an Overview

Props - Receiving Data in a Component

Pure Functions in Detail

State and Lifecycle Methods

8 Lessons

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

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

Introduction to Event Handling

Event Handling

5 Lessons

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

Differences Between the React Event Handlers and the Native Event

Scopes in Event Handlers

The SyntheticEvent Object

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

Lists, Fragments, and Conditional Rendering

6 Lessons

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

Custom render() Methods and Components

Lists

Fragments

Conditional Rendering

CSS and Styling

6 Lessons

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

Styling with the Style Attribute

Using CSS Classes in JSX

Modular CSS with CSS Modules

CSS-in-JS - Moving Styles Into Javascript

10.

Higher Order Components

4 Lessons

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

Implementing a Higher Order Component

Exercise

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.

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

Functions as a child

Render Props

12.

Context API

6 Lessons

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

Usage of Multiple Contexts

API

contextType

Performance Issues

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.

Implementing an Error Boundary

Error Boundaries in Practice

15.

Portals

4 Lessons

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

Portals and Their Relationship to Their Parent Component

Creating Portals

16.

Code Splitting

4 Lessons

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

Display Fallbacks with React.Suspense

Using Dynamic Imports

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.

Managing State with useState()

Built-in Hooks

Adding Side Effects with useEffect()

Accessing Context with useContext()

19.

Hooks in Action

4 Lessons

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

Working with Data in Hooks

Implement Your Own Hooks

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.

Limit Matching Between Path and the URL

Routing

Defining Routes

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

Introduction to State Management

22.

State Management

17 Lessons

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

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

23.

Internationalization

6 Lessons

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

withTranslation() Higher-order Component

Setup of i18next

useTranslation() Hook

Complex Translations Using the Trans Component

Build a Memory Game Using React

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

Course Author

Manuel Bieh and

Sibylle Lancaster

Project

intermediate

Project

Build a Memory Game Using React

Learn to build an interactive memory game with React and Vanilla CSS, focusing on coding, gameplay mechanics, and user engagement.

intermediate

Get Live Weather Information Using React

Project

intermediate

Project

Get Live Weather Information Using React

Build a React application that integrates the OpenWeather API to fetch live weather data and key weather metrics, with dynamic backgrounds based on the weather.

intermediate