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

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

Maximilian Schwarzmüller

1 customer reviews
Dive in and learn React from scratch! Learn Reactjs, Redux, React Routing, Animations, Next.js basics and way more!
Packt Subscription
FREE
$9.99/m after trial
Video
$160.65
RRP $188.99
Save 14%
What do I get with a Packt subscription?
  • Exclusive monthly discount - no contract
  • Unlimited access to entire Packt library of 6500+ eBooks and Videos
  • 120 new titles added every month, on new and emerging tech
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the subscription reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the subscription reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the subscription reader
$0.00
$160.65
$9.99 p/m after trial
RRP $188.99
Subscription
Video
Start a FREE 10-day trial

Frequently bought together


React - The Complete Guide (incl. Hooks, React Router and Redux) [Video] Book Cover
React - The Complete Guide (incl. Hooks, React Router and Redux) [Video]
$ 188.99
$ 160.65
Vue JS 2 - The Complete Guide (incl. Vue Router and Vuex) [Video] Book Cover
Vue JS 2 - The Complete Guide (incl. Vue Router and Vuex) [Video]
$ 188.99
$ 160.65
Buy 2 for $321.30
Save $56.68
Add to Cart

Video Details

ISBN 13 9781789132229
Course Length 37 hours 43 minutes

Table of Contents

Diving Deeper into Components & React Internals
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
Bonus: Building the Burger CSS

Video Description

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.

Video Preview

What You Will Learn

  • 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

Authors

Table of Contents

Diving Deeper into Components & React Internals
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
Bonus: Building the Burger CSS

Video Details

ISBN 139781789132229
Course Length37 hours 43 minutes
Read More
From 1 reviews

Read More Reviews

Recommended for You

Vue JS 2 - The Complete Guide (incl. Vue Router and Vuex) [Video] Book Cover
Vue JS 2 - The Complete Guide (incl. Vue Router and Vuex) [Video]
$ 188.99
$ 160.65
The Complete React Js and Redux Course - Build Modern Web Apps [Video] Book Cover
The Complete React Js and Redux Course - Build Modern Web Apps [Video]
$ 173.99
$ 147.90
CSS - The Complete Guide (incl. Flexbox, Grid and Sass) [Video] Book Cover
CSS - The Complete Guide (incl. Flexbox, Grid and Sass) [Video]
$ 173.99
$ 147.90
Advanced Projects in Electron 4, React, and Redux [Video] Book Cover
Advanced Projects in Electron 4, React, and Redux [Video]
$ 124.99
$ 106.25
Deep Learning and Neural Networks using Python - Keras: The Complete Beginners Guide [Video] Book Cover
Deep Learning and Neural Networks using Python - Keras: The Complete Beginners Guide [Video]
$ 18.99
$ 16.15
Hands-On Server-Rendered React Application with Next.js [Video] Book Cover
Hands-On Server-Rendered React Application with Next.js [Video]
$ 124.99
$ 106.25