Steps to implement Context API.

Step 1: Implement a Context.

Javascript

/* Context.js */
import React, { createContext } from "react";
const Context = createContext({
    paragraph: "",
});
export default Context;

Step 2: Create a Context Provider component:

Javascript

/* Provide.js */
import React, { useState } from "react";
import Context from "./Context";
 
const Provider = ({ children }) => {
    const [paragraph, setParagraph] = useState("");
    const value = {
        paragraph,
        setParagraph,
    };
 
    return <Context.Provider value={value}>{children}
           </Context.Provider>};
 
export default Provider;

Step 3: Create a Button component that consumes the context:

Javascript

/* Button.js */
import React, { useContext } from "react";
import Context from "./Context";
 
const Button = () => {
    const { paragraph, setParagraph } = useContext(Context);
 
    const updateParagraph = () => {
        setParagraph("ReactJS Tutorials");
    };
 
    return (
        <div className="container">
            <h2> w3wiki</h2>
            <h4>{paragraph}</h4>
            <div className="button">
                <button onClick={updateParagraph}>Click Here</button>
            </div>
        </div>
    );
};
 
export default Button;

Step 4: Wrap the all components in app.js and update the App.css file

Javascript

/* App.js */
import React from "react";
import Provider from "./Provider";
import Button from "./Button";
import "./App.css"
function App() {
    return (
        <Provider>
            <Button />
        </Provider>
    );
}
 
export default App;

CSS

/* App.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
 
.button {
  margin-top: 20px;
}
 
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4caf50;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
button:hover {
  background-color: #45a049;
}
h2{
  color: #45a049;
}

Steps to run application:

Step 1: Open the terminal and type the following command.

npm start

Step 2: Open browser and search the given URL.

http://localhost:3000/

Output:

Comparing Redux and Context API in React: A Comprehensive Analysis

In this article, we are going to learn about the difference between the Redux and Context APIs. We will cover each of them entirely with their live examples, and then we will cover the differences between them.

Table of Content

Context API
Redux
Difference between Redux and Context API
Conclusion

Steps to implement Context API.

Javascript

Javascript

Javascript

Javascript

CSS

Steps to run application:

Comparing Redux and Context API in React: A Comprehensive Analysis

Similar Reads

Contact Us