React Hooks and Context (with React-Redux migration guide)

Learn the future of React and how to migrate your existing Redux code

Created byMohammad Iqbal

Last updated 6/2019

English

What you'll learn

React Hooks at a Deep Level
Use React hooks with existing Redux code
useState, useEffect, useReducer, useContext
Global state with Context api
Mimic Redux functionality with just Hooks
Redux migration guide to React Hooks
working with forms and React hooks

Course content

2 sections • 23 lectures • 50m total length

React Hooks Intro0:34
2 rules off using hooks0:31
4 Hooks Overview1:24
This lecture offers a basic overview of four main hooks—useState, useEffect, useContext, and useReducer—and their roles in local versus global state via context.
useState() overview2:58
Discover how useState initializes local state in functional components, returning [state, setState], with separate setters for each property, avoiding this and props, and optional additional state via another useState call.
useEffect() overview1:07
Explore the useEffect hook and its three usage patterns: no second argument, empty array (mount, like componentDidMount), and value array (trigger on change).
useReducer() overview1:16
Context overview1:53
Explain context as a means to pass a value from a parent to deeply nested components, enabling a global state, read and update via the provider.
useContext() overview2:33
Migration Guide from Redux to React hooks0:45
6 ways to update state reference0:09
For more free courses in the future follow me on twitter0:02

Introduction0:34
Demonstrate building a basic app by wiring a React hook alongside existing Redux code. Compare React hooks and Redux side by side while integrating them into the project.
Starter Code
creating your first React hook2:01
adding the useState() hook2:27
adding the useEffect() hook3:57
Learn to implement the useEffect hook in a React app by importing useEffect, wiring it to state with useState, and using a 3000 ms timeout to update and render values.
adding the useReducer() hook4:27
Learn to implement the use reducer hook by importing a reducer, initializing state, and dispatching actions via action creators to drive user interface updates.
adding the useContext() hook7:22
adding a Global state with Context4:54
Set up global state with context using the useReducer hook, mirroring redux with success and failure actions; expose state and dispatch, and toggle Prop 2 via two buttons.
creating a form with React Hooks2:26
adding useReducer() to the form3:44
Explore implementing form state with useReducer, creating action types and action creators for input change and submit, and wiring a reducer and dispatch to manage user text in the form.
adding global state to the form5:45
Final Project Code

Requirements

Javascript and basic React

Description

React Hooks?

React Hooks are the biggest fundamental change to React since React Fiber in Late 2017.

Previous tutorials with Redux and older patterns are becoming obsolete. Stay competitive and learn the current and future version of React.

I will show you how to migrate from React-Redux to React hooks without changing any of your Redux Code

What this course will cover?

We will begin with a detailed explanation about each of the major hooks. Then once we understand the hooks at a deep level we will begin coding.

I will give a detailed explanation of React hooks then we will go over how to integrate React Hooks into existing React - Redux projects. We will build these hooks from scratch so you will get the best of both worlds.

We will cover all the major hooks and I will show you how to write them in code.

By the end of the tutorial you will have the building blocks necessary to build complex apps.

Who this course is for:

Beginner React students

React Hooks and Context (with React-Redux migration guide)

What you'll learn

Explore related topics

Course content

Introduction - Overview11 lectures • 13min

Project - Hooks12 lectures • 38min

Requirements

Description

Who this course is for: