React: Context API Development
42mIntermediate2019-03-22
Authors
Emmanuel Henri
Executive with 20+ years of experience in programming and design
Course details
React components provide convenient units of self-contained functionality—but wiring them together, especially when data goes to multiple places, can get repetitive. In this course, join Emmanuel Henri as he explores the React context API, which lets you share values across component trees and subtrees. As he steps through the course project, Emmanuel goes over the syntax of context, how to set it up in your projects, and how to update context. Plus, learn how to consume multiple contexts into your app, as well as what to avoid when working with context.
Learning objectives
Creating a context object
Implementing the code for updating context
Updating context from a nested component
What to avoid when working with context
How the node tree in React applies to context
Consuming multiple contexts
Learning objectives
Creating a context object
Implementing the code for updating context
Updating context from a nested component
What to avoid when working with context
How the node tree in React applies to context
Consuming multiple contexts
Skills covered
React.jsMetaFront-End Web DevelopmentWeb DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Enable components to share data with the Context API
- 02 - What you should know
1. First Steps
- 03 - Introduction to the Context API
- 04 - Set up React
- 05 - Base project introduction
2. Overview of Context
- 06 - Create a context object
- 07 - Introduction to the context provider
- 08 - Introduction to the consumer
3. Update Context
- 09 - Overview of updating context
- 10 - Implementation of updating context
- 11 - Update context from a nested component
- 12 - What to avoid and how to resolve issues
4. Consume Multiple Contexts
- 13 - Overview of the node tree in React
- 14 - Multiple contexts
- 15 - Challenge - Implement final context
- 16 - Solution - Context implemented
Conclusion
- 17 - Next steps