React - The Complete Guide (incl. Hooks, React Router and Redux) [Video]

More Information
  • Build powerful, fast, user-friendly and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with ease
  • Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now

Learn React or dive deeper into it. Learn the theory, solve assignments, practice on demo projects and build one big application which is improved throughout the course: The Burger Builder! JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web. But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only. React to the rescue! React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed. Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed. By the end of the course, you will be able to build amazing React (single page) applications! A short refresher about the most important next-gen features is provided in the course.

Style and Approach

This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.


What's in the course?

  • The "What", "Why" and "How"
  • React basics (Base features, syntax and concepts)
  • How to output lists and conditional content
  • Styling of React components
  • A deep dive into the internals of React and advanced component features
  • How to access Http content from within React apps (AJAX)
  • Redux, Redux, Redux ... from basics to advanced!
  • Forms and form validation in React apps
  • Authentication
  • An introduction to unit testing
  • An introduction to Next.js
  • React app deployment instructions
Course Length 37 hours 43 minutes
ISBN 9781789132229
Date Of Publication 27 May 2018
Module Introduction
A Better Project Structure
Splitting an App into Components
Comparing Stateless and Stateful Components
Class-based vs Functional Components
class Component Lifecycle Overview
Component Creation Lifecycle in Action
Component Updating Lifecycle (for props Changes)
Component Updating Lifecycle (for state Changes)
Using useEffect() in Functional Components
Controlling the useEffect() Behavior
Cleaning up with Lifecycle Hooks & useEffect()
Cleanup Work with useEffect() - Ex
Using shouldComponentUpdate for Optimization
Optimizing Functional Components with React.memo()
When should you optimize?
PureComponents instead of shouldComponentUpdate
How React Updates the DOM
Rendering Adjacent JSX Elements
Using React.Fragment
Higher Order Components (HOC) - Introduction
Another Form of HOCs
Passing Unknown Props
Setting State Correctly
Using PropTypes
Using Refs
Refs with React Hooks
Understanding Prop Chain Problems
Using the Context API
contextType & useContext()
Wrap Up
[LEGACY] Splitting an App Into Components
[LEGACY] Comparing Stateless and Stateful Components
[LEGACY] Understanding the Component Lifecycle
[LEGACY] Converting Stateless to Stateful Components
[LEGACY] Component Creation Lifecycle in Action
[LEGACY] Component Updating Lifecycle Hooks
[LEGACY] Component Updating Lifecycle in Action
[LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)
[LEGACY] Performance Gains with PureComponents
[LEGACY] How React Updates the App & Component Tree
[LEGACY] Understanding React's DOM Updating Strategy
[LEGACY] Returning Adjacent Elements (React 16+)
[LEGACY] Understanding Higher Order Components (HOCs)
[LEGACY] A Different Approach to HOCs
[LEGACY] Passing Unknown Props
[LEGACY] Using setState correctly
[LEGACY] Validating Props
[LEGACY] Using References ("ref")
[LEGACY] More on the Ref API (React 16.3)
[LEGACY] The Context API (React 16.3)
[LEGACY] More on the Context API (16.6)
Updated Lifecycle Hooks (React 16.3)
The "memo" Method (16.4)
Wrap Up


Maximilian Schwarzmüller

Maximilian Schwarzmüller - Professional Web Developer and Instructor Since the age of 13, Maximilian Schwarzmüller has never stopped learning new programming skills and languages. In the early days, he started creating websites for friends and for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. The success and fun he has in this job is immense and really keeps that passion alive. Although he started web development on the back end (PHP with Laravel and NodeJS), he has increasingly become a front-end developer using modern frameworks such as React, Angular, or VueJS 2 in a lot of projects. He loves both worlds nowadays! As a self-taught developer, he had broadened his horizon by studying Business Administration, resulting in a Master's degree. This enabled him to work in a major strategy consultancy as well as a bank. Whilst learning and developing his skills, he realized that he enjoyed development more than these fields. As a self-taught professional, Max is familiar with the difficult topics when learning new or improving on already-known languages. This background and experience enable him to focus on the most relevant key concepts and topics. His track record is the best proof of that. Whether working as a development instructor or teaching Business Administration, he always receives great feedback. The most rewarding experience is to see how people find new and better jobs, build awesome web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Frequently bought together: