DEV Community: Rarai365

Full-Stack Data Flow in React: With and Without Redux

Rarai365 — Fri, 07 Mar 2025 10:44:50 +0000

When building a React application, understanding how data flows between the frontend, backend, and database is crucial. This blog will explore the full-stack data flow, both without Redux and with Redux, explaining why Redux was introduced and what problems it solves.

Data Flow in React Without Redux

In a traditional React application without Redux, the data flow follows these steps:

UI State Management
The UI consists of multiple React components, each of which may have its own state using React's built-in state management (e.g., useState). When a user performs an action, such as clicking a button, the state updates accordingly.
API Request Using Axios

Once the UI needs data (e.g., fetching a list of users), it sends an API request to the backend using Axios. Axios is a popular library for making HTTP requests, helping React applications interact with a server.

3.API Query to the Database

The back end receives the request and queries the database for the required data. This step involves querying a relational or non-relational database. The database processes the query and returns the requested data to the backend.

4.Response from API to UI

The backend processes the data and sends it back to the front end. The front end then updates the component state, triggering a re-render of the UI to display the new data.

Challenges Without Redux:

State is scattered: Each component manages its own state, making state management complex.

Prop drilling: Passing data through multiple component layers creates inefficiencies.

Reusability issues: Data fetching logic gets repeated across multiple components, leading to duplication.

Data Flow in React With Redux

Redux was introduced to solve the state management problems in larger applications by centralizing state in a single store. Instead of managing state locally in individual components, Redux maintains a single source of truth for the entire application.

Why Redux?

Centralized state management: A global state allows data to be easily shared across components.

Avoids prop drilling: Components can access state directly without passing props manually.

Improved debugging: Redux DevTools provides a clear view of state changes and dispatched actions.

Efficient state updates: Redux ensures that only necessary components re-render when the state changes.

Data Flow in Redux:

User Interaction: A user performs an action (e.g., clicking a button), triggering an event in the UI.

Dispatching an Action: Instead of directly calling an API, the event dispatches an action to Redux.

Middleware & API Request: If the action requires data from an API, Redux middleware (like Redux Thunk) makes the API request.

API Query to the Database: The backend retrieves data from the database and sends it back as a response.

Redux Store Update: Upon receiving the API response, Redux updates the global state.

Component Re-Render: The updated state triggers a UI re-render, ensuring the latest data is displayed.

Advantages of Redux in Data Flow:

Global State Management: Eliminates scattered state, making data management more predictable.

Performance Optimization: Components only re-render when necessary, avoiding unnecessary updates.

Better Asynchronous Handling: Redux middleware like Redux Thunk efficiently manages API calls.

Improved Debugging: Redux DevTools enable developers to track actions, making debugging easier.

Conclusion

Without Redux, state management in large applications becomes difficult due to scattered state and repeated API calls. Redux simplifies state handling by centralizing data, improving scalability, performance, and maintainability.

For small projects, React’s built-in state management or the Context API may be sufficient. However, for complex applications, Redux is a powerful tool to manage state efficiently and ensure a structured, maintainable codebase.

Building a Functional Calculator App with HTML, CSS, and JavaScript

Rarai365 — Fri, 28 Feb 2025 07:31:00 +0000

Creating a calculator app is an excellent project to practice web development skills. This blog will walk you through the process of building a functional calculator from designing the user interface (UI) to implementing the core logic. I have used HTML, CSS, and JavaScript to create the app.

Step 1: Designing the User Interface (HTML and CSS)

The first step is to create a clean and intuitive UI for our calculator. Here’s how I approached the design.

I have created a .wrapper class which is a container that centers the calculator on the screen. It ensures the calculator is both vertically and horizontally aligned, providing a clean layout.

.wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  background-color: rgb(167, 219, 219);
}

Inside the wrapper container, I have put another class .calculator-container for a calculator display screen and buttons. By using display: flex; and flex-direction: column; the child elements stack vertically with a gap of 12px between them.

.calculator-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 500px;
}

Each row of buttons is wrapped in a .flex-container class. This class uses display: flex; to arrange the buttons in a horizontal row. The gap: 12px; property creates consistent spacing between the buttons, ensuring they are visually appealing and user-friendly.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

The .display-box class styles the calculator’s result display area. The text-align: end; property aligns the text to the right and font-size: 24px; makes the text easy to read. The rounded corners and background colour improve aesthetics.

.display-box {
  padding: 24px;
  border: 1px solid black;
  border-radius: 8px;
  text-align: end;
  font-size: 24px;
  background-color: aliceblue;
}

This is how the UI looks at the end. I have also given some background colour and border radius to make it visually appealing.

Step 2: Adding Functionality with Javascript

Now that we have the UI, Let's Implement the logic to make the calculator functional.

JavaScript:

1.Selecting Elements
We need to interact with the display box and all the buttons. Let’s start selecting these elements.

const displayBox = document.querySelector(".display-box");
const calculatorBtn = document.querySelectorAll("button");

2.Handling Button Clicks

We loop through all the buttons using forEach and attach a click event listener to each. The listener calls the handleButtonAction function with the button’s value as an argument. This ensures that each button's functionality is dynamically handled based on its value.

const handleButtonAction = (buttonValue) => {}

let displayValue = "";

calculatorBtn.forEach((btn) => {
  const buttonValue = btn.innerText;

  btn.onclick = () => {
    handleButtonAction(buttonValue);
  };
});

3.Updating the display

The display () function updates the display box with the current value or a default 0.0.

const display = () => {
  displayBox.innerText = displayValue || "0.0";
};

4.Append Button Value
o Purpose: Adds the button’s value to the input string.
o Explanation: Handles all other valid inputs (numbers and operators) by appending them to the existing string.

displayValue += buttonValue; // Append the button value to the display
display();

5.Handling Button Actions

The if conditions in the handleButtonAction function are used to process the different types of button clicks (e.g., clearing input, appending values, handling operators) and ensure valid calculations. Let’s break them down:

Evaluate Expression ( “=” or Enter Key)

o Purpose: Evaluate the mathematical expression in displayValue.
o Explanation:

The eval () function computes the results of the mathematical expression.
The results are converted to a string and stored in displayValue for display

if (buttonValue === "=" || buttonValue === "Enter") {
  const result = eval(displayValue); // Calculate the result
  displayValue = String(result);
  display();
  return;
}

2.Clear All (AC button)
o Purpose: clears the entire input.

o Explanation: This resets displayValue to an empty string, effectively clearing the display box.


if (buttonValue === "AC") {
  displayValue = ""; // Clear the entire display
  display();
  return;
}

3.Clear Last Character (C button)

• Purpose: Deletes the last character from displayValue.
• Explanation: The slice(0, -1) method removes the last character of the string, making it useful for correcting minor input mistakes.

if (buttonValue === "C") {
  displayValue = displayValue.slice(0, -1); // Remove the last character
  display();
  return;
}

4.Prevent Invalid Operator Use
o Purpose: Ensures operators are used in a valid context.
o Explanation:

Prevents operators at the start of the expression(!displayValue)
Prevents two consecutive operators (checks the last character for another operator).

if (["%", "/", "*", "+", "-"].includes(buttonValue)) {
  if (!displayValue || displayValue.slice(-1).match(/[\%\*\+\-\/]/)) {
    return; // Prevent invalid operators
  }
}

5.Handle Decimal Point (.button)

o Purpose: Ensures a number contains only one decimal point.
o Explanation:

Splits displayValue into chunks based on operators (e.g., 12.5+3 becomes ["12.5", "3"]).
Checks the last chunk (number after the last operator).
If the last number already has a decimal, it prevents appending another.

if (buttonValue === ".") {
  const lastNumberSet = displayValue.split(/[\%\*\+\-\/]/).pop();
  if (lastNumberSet.includes(".")) return; // Prevent multiple decimals
}

6.Onkeypress Event Listener

Purpose: To make the calculator work with keyboard as well.

Explanation:

we used addEventListener event to the document and it takes two parameters, "keyPress" and "event". It checks if the code includes any "Key" and returns it.

document.addEventListener("keypress", (event)=>{
  console.log("event", event.key);

  if(event.code.includes("Key")){
    return
  }

  handleButtonAction(event.key)
})

Key Highlights

Valid Expressions: We ensure valid inputs by preventing consecutive operators, disallowing operators at the start, and handling decimal inputs properly.

Dynamic Updates: The display() function updates the UI in real time, giving users instant feedback.

Simplified Logic: Using eval() simplifies the calculation process, but be cautious about its use in production environments.

Final Thoughts

Building this calculator was an excellent exercise in combining HTML, CSS, and JavaScript to create a functional and interactive web application. From designing an intuitive UI to implementing robust input handling, this project covers essential concepts for aspiring web developers.

Try building your own version and experiment with adding new features or styling it differently! Let me know your thoughts or questions in the comments below.

Memory Management in JavaScript: A Beginner-Friendly Guide

Rarai365 — Thu, 13 Feb 2025 20:47:04 +0000

JavaScript is an essential language for web development, powering everything from interactive websites to complex applications. However, understanding how memory management works in JavaScript is crucial to writing efficient and optimized code. In this guide, we’ll break down the key concepts of memory management in a simple and beginner-friendly way.

1. What is Memory Management & Why is it Important?

Memory management is the process of handling the allocation and deallocation of memory in a program. JavaScript automatically manages memory for you, but understanding how it works helps prevent performance issues like memory leaks and inefficient resource usage.

Imagine your computer’s memory as a bookshelf. When you declare variables or objects, you’re adding books to the shelf. If you never remove old books (unused variables), your shelf becomes cluttered, making it harder to find what you need. Efficient memory management keeps your program running smoothly and prevents unnecessary memory consumption.

2. How is Memory Allocated in JavaScript? (Heap vs. Stack)

JavaScript primarily manages memory using two key structures:

Stack Memory:
Used for storing primitive values (numbers, strings, booleans) and function calls. It follows a Last In, First Out (LIFO) structure. When a function is called, its variables get pushed onto the stack, and when the function completes, they are removed.
Heap Memory:
Used for storing objects and complex data structures. Unlike stack memory, heap memory allows dynamic allocation, meaning objects persist in memory until explicitly removed.

let name = "John"; // Stored in the stack
let user = { age: 30 }; // Stored in the heap

3. Scope & Its Impact on Memory

Scope determines the lifetime and accessibility of variables in JavaScript. There are three main types of scope:

Global Scope:
Variables declared outside any function. These remain in memory throughout the program’s execution.
Function Scope:
Variables declared inside a function are removed when the function ends.
Block Scope:
Variables declared with let or const inside a block {} are removed once the block execution is complete.

Example:

function greet() {
  let message = "Hello"; // Stored temporarily in function scope
} // 'message' is removed from memory when function ends

Understanding scope helps in managing memory efficiently by ensuring variables don’t persist longer than needed.

4. Garbage Collection: How JavaScript Frees Up Memory

JavaScript uses Garbage Collection (GC) to automatically clean up unused memory. The most common technique used is Mark-and-Sweep.

Mark-and-Sweep Explained:

The GC marks all accessible objects by tracing references from the root (global scope or active functions).

Unreachable objects (those with no references) are marked for deletion.

The memory occupied by these objects is then released, making space for new allocations.

Visual Representation:

let user = { name: "John" };
user = null; // The object is now unreachable and eligible for garbage collection

5. Common Memory Issues: Memory Leaks & Circular References

Memory leaks occur when memory is allocated but never released, leading to excessive memory consumption.

Common Causes of Memory Leaks:
Global Variables: Variables declared without let, const, or var remain in memory indefinitely.
Uncleared Event Listeners:
Event handlers that are not removed can keep references to objects.
Circular References:
When two objects reference each other, making them inaccessible to garbage collection.

Example of Circular Reference:

let obj1 = {};
let obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1; // Both objects reference each other and won’t be collected

6. Best Practices for Efficient Memory Management

To avoid memory leaks and improve efficiency, follow these best practices:

✅ Use Local Variables: Limit the use of global variables to prevent unnecessary memory retention.
✅ Manually Nullify Objects: When an object is no longer needed, set it to null.
✅ Remove Event Listeners: Always clean up event listeners when they are no longer needed.
✅ Use WeakMap for Caching: WeakMap allows garbage collection of unused objects.
✅ Avoid Circular References: Be mindful when creating object references.

Example of Cleaning Up Event Listeners:

function setup() {
  let button = document.getElementById("myButton");
  function clickHandler() {
    console.log("Button Clicked!");
  }
  button.addEventListener("click", clickHandler);

  // Clean up when no longer needed
  button.removeEventListener("click", clickHandler);
}

Conclusion

Memory management in JavaScript is an essential concept for building efficient applications. By understanding how memory is allocated, how garbage collection works, and following best practices, you can prevent memory leaks and optimize performance.

Happy coding! 🚀

Experience Learning the History of the Web.

Rarai365 — Sun, 29 Dec 2024 01:46:33 +0000

My Journey Through the History of the Web

Learning about the history of the internet was like opening a treasure chest of innovation, collaboration, and creativity. As someone navigating the world of IT and aspiring to become a full-stack developer, delving into the origins of this revolutionary technology gave me a profound appreciation for the interconnected world we now take for granted.

The Humble Beginnings

The journey began in the 1960s, with the pioneering efforts of ARPANET. Funded by the U.S. Department of Defense, ARPANET was designed to connect computers for military and academic research purposes. It was fascinating to learn that the first message sent over ARPANET was "LOGIN," though only the letters "LO" made it through due to a system crash—a reminder that even groundbreaking innovations come with their share of challenges.

The Evolution of Protocols

Understanding the development of protocols like TCP/IP was a turning point in my exploration. These protocols laid the foundation for global communication, allowing diverse networks to interconnect seamlessly. It struck me how this technical advancement was as much about collaboration as it was about technology. Engineers and scientists worldwide worked together, embodying a spirit of collective progress.

The Birth of the World Wide Web

The 1990s saw the birth of the World Wide Web, thanks to Sir Tim Berners-Lee. His vision of a decentralized platform for sharing information was a game-changer. Learning about the creation of HTML, HTTP, and URLs, I couldn’t help but marvel at how these building blocks shaped the dynamic web experiences we enjoy today. This phase of history deeply resonated with me as a budding developer. It underscored the power of simplicity and scalability in creating tools that stand the test of time.

From Static to Dynamic

The transition from static web pages to interactive platforms, spurred by innovations like JavaScript and CSS, was another highlight. It’s incredible to see how these technologies evolved, empowering developers to create responsive and user-friendly designs. This evolution also sparked my interest in mastering full-stack development, knowing that the tools I’m learning today are the legacy of decades of experimentation and innovation.

Reflections and Takeaways

What struck me most during this learning experience was the internet’s transformative journey—from a small network connecting a handful of computers to a global system influencing every aspect of life. The internet’s history is a testament to humanity’s ability to innovate, adapt, and collaborate.

As I continue my journey in tech, this newfound understanding of the web’s origins has given me a deeper respect for the work I aspire to do. It’s inspiring to think that today’s developers stand on the shoulders of giants, building on decades of progress to create a more connected and accessible world.

Exploring the history of the internet isn’t just about understanding technology; it’s about appreciating the visionaries and unsung heroes who made it all possible. For anyone stepping into the world of IT or web development, I highly recommend taking a moment to look back. The past holds valuable lessons that can shape our future endeavors.

How to build a blog website using HTML CSS, and host it in GitHub and deploy it to Vercel.

Rarai365 — Sun, 29 Dec 2024 01:17:30 +0000

In this blog, we will learn how to build a website and how to host it in GitHub and Deploy it to Vercel.

Lets create a folder name first and open that folder in Vscode.

Once the folder is created in vscode, lets create two files one index.html and another one style.css and link the CSS to HTML file.

once you finished writing code we will need to host into GitHub. so lets create an account by going to the GitHub Website.

https://github.com

Okay we have created an account so now we can host our code into GitHub. Here is the simple instructions on how to create a new repository for the specific project and how to push our code into that Repository.

Create a new repository for your project

Name the Meaningful Repository Name and hit Create.

Go to your VScode and Open the code you want to push into GitHub.

Open Terminal in VScode

Write “git init” cmd in termimal

You will get this message.

(Initialized empty Git repository in /Users/rajeshrai/Desktop/DEV/Dented Code/css animation 1/.git/)

Go back to GitHub and open the repo you just created.

echo "# black-friday-animation" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Rarai365/black-friday-animation.git
git push -u origin main

copy the highlighted one and paste into VScode terminal after “git init” cmd.

Now they are linked, you can push your code to GitHub.

1st cmd: “git add”

2nd cmd: git commit -m “some description”

3rd cmd: “git push -u origin main”

Go back to your GitHub and refresh the repo. You will see your code being pushed into GirHub.

Now to deploy this code to vercel, go to your Vercel account or create one with your GitHub Account.

Once the account is created, you will see “Add New” option in vercel. Click that and select project.

Once you choose project, it will ask you to import your github projects. In our case, we choose the repo we created earlier “black-Friday-animation”.

After importing, Hit Deploy.

Congratulation, You have successfully Deployed your project on vercel.

After deploying if you go to your dashboard, you will see something like this.

You can click the domain link to open your project on the browser and you can also send it to your friends.