Year-End Discount: 10% OFF 1-year and 20% OFF 2-year subscriptions!

author-cover

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

1. Introduction

Getting Started

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

How Did React Come into Existence?

Into the Deep End

Tools and Setup

Zero Config Setup

2. Introduction to ES2015+

The "New" Javascript

Variable Declarations with let and const

Arrow Functions

New String and Array Methods

Spread Operator

Template Strings

Asynchronous Functions with async / await

Import Syntax and JavaScript Modules

3. JSX – an Introduction

JSX as an Important Building Block in React Development

Expressions in JavaScript

What Else You Should Know

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

5. 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

6. Event Handling

Introduction to Event Handling

Differences Between the React Event Handlers and the Native Event

Scopes in Event Handlers

The SyntheticEvent Object

7. Forms

Introduction to Forms

Uncontrolled Components

Controlled Components

Changing of Values

8. Lists, Fragments, and Conditional Rendering

Conditional Rendering

Custom render() Methods and Components

9. CSS and Styling

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

Implementing a Higher Order Component

11. Functions as a Child and Render Props

Functions as a child

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

12. Context API

Usage of Multiple Contexts

Performance Issues

13. Refs

Refs Via createRef()

14. Error Boundaries

Implementing an Error Boundary

Error Boundaries in Practice

15. Portals

Creating Portals

Portals and Their Relationship to Their Parent Component

16. Code Splitting

Using Dynamic Imports

Display Fallbacks with React.Suspense

17. Typechecking with PropTypes, Flow, and TypeScript

18. React Hooks – an Introduction

Managing State with useState()

Adding Side Effects with useEffect()

Accessing Context with useContext()

19. Hooks in Action

Implement Your Own Hooks

Working with Data in Hooks

20. The Hooks API

Reducers in Practice

useLayoutEffect

useImperativeHandle

21. Routing in React

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

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

Fourth Parameter for connect()

Combining the Puzzle Pieces

Redux with React Hooks

23. Internationalization

Setup of i18next

withTranslation() Higher-order Component

useTranslation() Hook

Complex Translations Using the Trans Component

24. Conclusion

25. Appendix

Tools and Frameworks

Join more than 1.6 million learners from companies like

What our learners are saying

What our learners are saying

COURSE BY:

Manuel Bieh

Sibylle Lancaster

Teams of every size choose

Educative for Business

to train, upskill & onboard their developers

Learn in-demand tech skills in half the time

SOLUTIONS

For Enterprise

For Individuals

For HR & Recruiting

For Bootcamps

PRODUCTS

Educative Learning

Educative Onboarding

Educative Skill Assessments

Educative Projects

Pricing

For Enterprise

For Individuals

Free Trial

LEGAL

Privacy Policy

Terms of Service

Business Terms of Service

CONTRIBUTE

Become an Author

Become an Affiliate

Become a Contributor

RESOURCES

Educative Blog

EM Hub

Educative Sessions

Educative Answers

ABOUT US

Our Team

Careers

Hiring

Frequently Asked Questions

Contact Us

Press

MORE

GitHub Students Scholarship

Course Catalog

Early Access Courses

Earn Referral Credits

CodingInterview.com

Copyright ©2022 Educative, Inc. All rights reserved.

soc2