Implement Stack Data Structure using ReactJS
Last Updated :
02 Nov, 2023
To implement Stack Data Structure using React JS and display it on the application. we will use the npm rooks package to create stack and its functionalities.
Prerequisites
Approach to Implement Stack in ReactJs
To implement the stack we will use a custom hook, i.e. the useStackState hook provided by the Rooks package for React. It manages the state in the form of a stack. It takes an array as an argument and returns array items containing list, listInReverse, and object with attributes push, pop, peek, and length.
Steps to create React Application
Step 1: Create a React application using the following command:
npx create-react-application demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Step 3: Install Rooks from npm.
npm i rooks
Project Structure:
The project should look like this.
The updated dependencies in package.json will look like:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"rooks": "^7.14.1",
"web-vitals": "^2.1.4"
}
}Example: The below example will illustrate the Data structure stack implementation in the React JS.
JavaScript
// Filename - App.js
import React, { useRef } from "react";
import { useStackState } from "rooks";
export default function App() {
const numberToPushRef = useRef(3);
const [
list,
{ push, pop, peek, length },
listInReverse,
] = useStackState([1, 2, 3]);
function addToStack() {
numberToPushRef.current =
numberToPushRef.current + 1;
push(numberToPushRef.current);
}
return (
<>
<h1 style={{ color: "blue", margin: "20px" }}>
Stack
</h1>
<div
style={{
display: "block",
fontSize: "20px",
margin: "20px",
}}
>
{listInReverse.map((item) => {
return (
<div
style={{
width: "30px",
height: "30px",
background: "#a3fc9d",
borderRadius: "5px",
margin: "10px",
textAlign: "center",
}}
key={item}
>
{item}
</div>
);
})}
</div>
<button
style={{
margin: "20px",
background: "#f8e1ee",
width: "200px",
borderRadius: "5px",
padding: "10px",
}}
onClick={addToStack}
>
Push
</button>
<button
style={{
margin: "20px",
background: "#bbfdd8",
width: "200px",
borderRadius: "5px",
padding: "10px",
}}
onClick={pop}
warning
>
Pop
</button>
<p
style={{
color: "#e84917",
fontSize: "20px",
margin: "20px",
}}
>
Top Element : {peek()}
</p>
<p
style={{
color: "#175ce8",
fontSize: "20px",
margin: "20px",
}}
>
Stack Size : {length}
</p>
</>
);
}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Similar Reads
How to implement Queue data structure in the ReactJS ? We'll explore the implementation of a basic queue data structure in a React application using the "rooks" library. Queues are fundamental in computer science and find applications in various scenarios, including task scheduling, handling requests, and managing data flow. Prerequisites:NodeJS or NPMR
3 min read
Appointment Management System using React The Appointment Management System is a web application that allows users to schedule, manage, and view appointments. It provides an easy-to-use interface for clients to book and keep track of appointments. Below is a simplified outline for creating an Appointment Management System using React JS. Pr
5 min read
Best ways to Structure React Components Structuring your React applications is critical for ensuring maintainability, scalability, and code readability as a software developer. In this tutorial, we'll delve into the best practices for organizing a React app, offering examples and code snippets along the way. Make sure you have the latest
3 min read
Understanding React State and Data Flow React, a very popular JavaScript library used for building user interfaces has the concept of components and they can manage the states efficiently. ReactJs is based on the concept of uni-directional data transfer. In this article, we will understand React State and Data Flow across the application.
4 min read
ReactJS Semantic UI List Element Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use the List element in React
2 min read
ReactJS Rendering Elements In this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read