Learn React Hooks

Defining the context

First, we have to define the context. Instead of defining it in the src/App.js file, in our blog app, we are going to create a separate file for the context. Having a separate file for contexts makes it easier to maintain them later on. Furthermore, we always know where to import the contexts from, because it is clear from the filename.

Let's start defining a theme context:

1. Create a new src/contexts.js file.
2. Then, we import React:

import React from 'react'

3. Next, we define the ThemeContext. As before in our small example, we set the default primaryColor to deepskyblue. Additionally, we set the secondaryColor to coral:

export const ThemeContext = React.createContext({    primaryColor: 'deepskyblue', secondaryColor: 'coral' ...