Create a Context with React

To use the context API, you need to create a context by calling the `createContext` function with an optional default value when using JavaScript. This is the alternative to prop drilling or passing props down manually through every level of components. You wrap all components that share similar data within the context provider as a parent component and access the data in the context via a Consumer or `useContext` hook.

The React Context API is a way for a React app to effectively produce global variables that can be passed around. It provides an interface that enables data sharing across components without using the props drilling approach. Passing data from parent to child components would be easy if just a few layers of components were involved. However, when more components are introduced, things start to get complex, and keeping track of state and props can quickly become cumbersome.

To create a context object, you need to import the `createContext` function from the 'react' library and then call it with an optional default value. This context object will hold the data that you want to share across your application.

In this tutorial, we are going to build a mini e-commerce store and walk through examples of how we can use the context API for sharing data across multiple components. We'll explore both the legacy and newer ways of using the context API in React.

There are two different ways to use context: Via the newer `createContext` API and the legacy context API. The main difference between the two is that the legacy one requires you to wrap your component with a `Provider` component, whereas the new way uses the `useContext` hook directly.

Using the context in React requires 3 simple steps: creating the context, providing the context, and consuming the context. We'll dive deeper into each of these steps as we build our mini e-commerce store.

In the next section, we'll explore how to create a context object using the `createContext` function and provide some examples of how to use it in your React applications.

Createcontext react