DEV Community: Kartik Budhraja

Performance Tips Every JS React Developer Should Know.

Kartik Budhraja — Thu, 14 Mar 2024 18:31:06 +0000

Introduction

Building a React app is easy. But optimization is the most difficult part. As a Javascript React developer, consistently improving the performance of your applications is an essential skill to master.

Code Splitting :

Code Splitting is one of the most popular techniques for optimizing web performance. In Code Splitting, we split our application into smaller chunks and load them when needed. and lazy() will help us with this.

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

const Parent = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Use PureComponent and React.memo for Component Optimization :

To avoid unnecessary re-renders, we can use PureComponent and React.memo.

PureComponent is a class component that implements the shouldComponentUpdate lifecycle method to perform a shallow comparison of its props and state. If the props and state have not changed, the component will not update. This can significantly improve application performance, especially for large and complex components.

React.memo is a higher-order component that works similarly to PureComponent, but for function components. It performs a shallow comparison of the component's props and returns a memoized version of the component if the props have not changed. This can also improve application performance, especially for functional components that rely on props.

Production Builds :

Ensure your Webpack configuration is set to production mode to enable optimizations like code minification and dead code elimination.

// webpack.config.js
module.exports = {
  mode: 'production',
  // other configurations...
};

Virtualization :

When dealing with large data sets, rendering all the data at once can lead to slower application performance. To avoid this, you can use virtualization to render only the visible data and load more data as the user scrolls.

Virtualization can be achieved using third-party libraries like react-window or react-virtualized. These libraries provide a way to render only the visible data and load more data as needed, resulting in faster application performance.

import { FixedSizeList } from 'react-window';
function VirtualizedList() {
  return (
    <FixedSizeList
      height={400}
      itemCount={1000}
      itemSize={40}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>Item {index}</div>
      )}
    </FixedSizeList>
  );
}

Optimize Images :

Images can become an enemy of web performance. So, we need to use images in the React project cautiously. We can use techniques like Lazy Loading Images, Image Compression, and Right Image Formatting to optimize images in the project.

<img src="placeholder.jpg" loading="lazy" alt="Lazy Loaded Image" />

Server-Side Rendering (SSR) :

Consider server-side rendering (e.g., with Next.js) to render React components on the server, improving initial load times and SEO.

// pages/index.js
import React from 'react';const HomePage = () => {
  return (
    <div>
      <h1>Hello, Next.js SSR!</h1>
    </div>
  );
};
export default HomePage;

Caching :

Caching is one of the most underrated ways to improve performance. Implement client-side caching for data that doesn't change frequently to reduce the need for unnecessary API calls.

Use Web Workers for Expensive Computation :

Expensive computation can also lead to slower application performance. To avoid this, you can use Web Workers to perform expensive computation in the background, freeing up the main thread for rendering and other tasks.

Web Workers are a way to run JavaScript code in a separate thread, allowing for parallel execution of code. You can use Web Workers to perform expensive computation like sorting or filtering data, without blocking the main thread and slowing down the application.

// worker.js
onmessage = function (e) {
  const result = performHeavyCalculation(e.data);
  postMessage(result);
};
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function (e) {
  console.log('Result:', e.data);
};
worker.postMessage({ /* data for calculation */ });

Bundle Analysis :

Regularly analyze your bundle size using tools like Webpack Bundle Analyzer. Identify and eliminate unnecessary dependencies.

# Install the analyzer package
npm install --save-dev webpack-bundle-analyzer# Update npm scripts
"scripts": {
  "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json"
}

Conclusion

In this article, I have discussed some of the most popular techniques for improving React Performance.

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

ReactJS advanced folder structure for scalable projects.

Kartik Budhraja — Tue, 21 Nov 2023 18:22:32 +0000

I have some good folder structure for the project then, We can achieve optimized performance.

Let me share…..

If you want to learn reactJS, You can refer to this official documentation.

Thank you :)

Tree Shaking in JavaScript: Boost Web Performance

Kartik Budhraja — Wed, 08 Nov 2023 19:15:09 +0000

Exciting News! 🌟 Just published my latest article on Medium, titled "Tree Shaking in JavaScript Applications: Boosting Performance with Dead-Code Elimination." 🚀 Dive into the world of web optimization and discover how tree shaking can transform your JavaScript applications.

💻 Explore the article here: https://kartikbudhraja.medium.com/tree-shaking-in-javascript-applications-boosting-performance-with-dead-code-elimination-35c44eb94e2d

I hope this article has provided you with valuable insights into the world of tree shaking and its applications in JavaScript development. If you found this information helpful, please consider sharing it with your network. Stay updated with more insightful content by following me on LinkedIn.

Random Password Generator with Reactjs

Kartik Budhraja — Fri, 03 Nov 2023 18:16:18 +0000

Introduction:

We’ll walk through how to create a password generator app with React. The app will enable users to create strong passwords with various combinations of characters, including uppercase and lowercase letters, symbols, and numbers. It’ll also have an indicator to help gauge the strength of the user’s chosen password.

Follow - Linkedin

Project Features

~ Customizable Passwords: Generate highly secure passwords tailored to your specifications. Customize the length of your password, and choose to include uppercase and lowercase letters, numbers, and symbols.

~ Error Handling and Feedback: Experience user-friendly error handling and feedback mechanisms. The application provides real-time validation, ensuring that your selected options align with industry best practices for password security.

~ Effortless Copy-Paste Functionality: Simplify the process of securing your accounts with a built-in copy button. Generated passwords can be instantly copied to your clipboard with a single click. No more manual typing or memorization required – enhance your online security effortlessly.

Let's break down the code step by step and explain each concept used in the provided React application.

Step 1: Importing Dependencies
In this step, the necessary dependencies are imported. React is imported to create React components, and useState and useEffect are hooks provided by React to manage state and side-effects respectively. The styles.css file contains the CSS styles for the application.

import React, { useState, useEffect } from "react";
import "./styles.css";

Step 2: Functional Component Definition
In this step, a functional React component named App is defined. The useState hook is used to create state variables for managing the password, password length, and options to include uppercase letters, lowercase letters, numbers, and symbols in the generated password. The errors state variable is used to handle error messages.

export default function App() {
  // State variables using useState hook
  const [password, setPassword] = useState("");
  const [passwordLength, setPasswordLength] = useState(15);
  const [uppercase, setUppercase] = useState(true);
  const [lowercase, setLowercase] = useState(true);
  const [numbers, setNumbers] = useState(true);
  const [symbols, setSymbols] = useState(true);
  const [errors, setErrors] = useState({});

Step 3: Password Generation Logic
The generatePassword function is responsible for generating the password based on user preferences. It checks the selected options and password length and generates a password accordingly. If there are errors in the user input, appropriate error messages are set using the setErrors function.

const generatePassword = () => {
    setErrors({});
    if (!uppercase && !lowercase && !numbers && !symbols) {
      return setErrors("sdfsfsd");
    } else if (passwordLength === "0") {
      return setErrors("Password length cannot be 0");
    } else if (passwordLength === "") {
      return setErrors("Invalid password length");
    } else if (passwordLength >= 30) {
      setPassword("");
      return setErrors("Password length cannot exceed 30 characters");
    }

    let password = "";
    for (let i = 0; i < passwordLength; i++) {
      let choice = random(0, 3);
      if (lowercase && choice === 0) {
        password += randomLower();
      } else if (uppercase && choice === 1) {
        password += randomUpper();
      } else if (symbols && choice === 2) {
        password += randomSymbol();
      } else if (numbers && choice === 3) {
        password += random(0, 9);
      } else {
        i--;
      }
    }
    setPassword(password);
  };

Step 4: Randomization Functions

These functions are helper functions used by the generatePassword function. random generates a random number within a specified range, randomLower and randomUpper generate random lowercase and uppercase letters respectively, and randomSymbol generates a random symbol from a predefined set of symbols.

const random = (min = 0, max = 1) => {
  // Function to generate a random number between min and max (inclusive)
  // ...
};

const randomLower = () => {
  // Function to generate a random lowercase letter
  // ...
};

const randomUpper = () => {
  // Function to generate a random uppercase letter
  // ...
};

const randomSymbol = () => {
  // Function to generate a random symbol
  // ...
};

Step 5: useEffect Hook
The useEffect hook is used to generate a password when the component is mounted. It runs the generatePassword function once, initializing the password based on the default preferences.

useEffect(() => {
  // useEffect hook to generate a password when the component is mounted
  generatePassword();
}, []);

Step 6: User Interface (JSX)

The return statement contains the JSX code representing the user interface of the application. It includes input fields for password length and checkboxes for selecting options (uppercase letters, lowercase letters, numbers, and symbols). The generated password is displayed along with a copy button. Error messages are displayed if there are any validation errors.

return (
  // JSX code for the user interface
  // ...
);

Here is the reference of the working code

Conclusion:

That's a step-by-step explanation of the provided React code, covering the key concepts of React components, state management with hooks, password generation logic, and the useEffect hook for handling side-effects.

Follow Me on Social Media!
If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Dark Mode Toggle in React

Kartik Budhraja — Tue, 31 Oct 2023 18:49:13 +0000

Introduction:

Dark mode has become a popular feature in modern web applications, providing users with a visually comfortable experience, especially during nighttime browsing. In this article, we'll explore how to create a simple dark mode toggle functionality using React and CSS. We'll break down the code step by step to understand how the dark mode toggle is implemented.

Follow - Linkedin

Understanding the Code:

1. Setting up the Component:

In this code snippet, we import React and useState hook from React. We set up a functional component App and initialize a state variable mode using the useState hook. The handleClick function toggles the mode state between true and false when the button is clicked.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [mode, setMode] = useState(false);
  const handleClick = () => {
    setMode(!mode);
  };

2. HTML Structure:

Here, we define the JSX structure of our component. The div with class App represents the main container. Inside it, there's a button with class toggle and a nested div with class btn. These elements have dynamic styles based on the mode state. Additionally, there are two h1 and h2 elements whose text color changes according to the mode state.

<div className="App" style={{ background: `${mode ? "#111" : "#FFF"}` }}>
  <button
    className="toggle"
    style={{ background: `${mode ? "rgba(255,255,255,1)" : "#333"}` }}
    onClick={handleClick}
  >
    <div
      className="btn"
      style={{
        marginLeft: `${mode ? "50px" : "5px"}`,
        background: `${mode ? "#333" : "#fff"}`
      }}
    ></div>
  </button>

  <h1 style={{ color: `${mode ? "#fff" : "#000"}` }}>Hello CodeSandbox</h1>
  <h2 style={{ color: `${mode ? "#fff" : "#000"}` }}>
    Start editing to see some magic happen!
  </h2>
</div>

3. CSS Styles:

In the CSS styles, we reset default margins and paddings, set the height of the root element to 100%, and define the layout and appearance of various elements. The .toggle class styles define the appearance of the toggle button, while the .btn class styles define the appearance of the inner button inside the toggle button, including the transition effect for a smooth animation.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  font-family: sans-serif;
  text-align: center;
  height: 100%;
}

h1 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h2 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toggle {
  border: 0;
  width: 80px;
  height: 30px;
  border-radius: 20px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: 0.4s ease-in-out;
}

Here is the reference of the working code

Conclusion:

In this article, we've explored how to create a dark mode toggle functionality in a React application. By understanding the code step by step, you've learned how to use state management with React's useState hook and apply dynamic styles based on the state. This knowledge can be applied to enhance user experience in various web applications by implementing features like dark mode toggles.

Follow Me on Social Media!
If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Redux Toolkit Query - Cache Behavior

Kartik Budhraja — Mon, 30 Oct 2023 18:16:58 +0000

RTK Query revolutionizes data management in Redux by intelligently handling caching strategies, enhancing your application's performance, and reducing redundant network requests. One of its key features is the default cache behavior, which ensures that data fetched from the server is stored in the Redux store, preventing repetitive calls for the same data.

By serializing the parameters used in API requests into a queryCacheKey, RTK Query identifies identical requests. When multiple components request the same data, they share the cached results, eliminating unnecessary network traffic. This efficient default behavior is invaluable, but challenges arise when cached data becomes outdated due to backend operations or errors.

Problem Description:

Scenario: Application fetches permissions for a user.
Event: Backend operation modifies these permissions.
Issue: Subsequent request results in a 404 error.
Importance: Crucial to update cached data.
Action:

Clear the cache for the specific query.
Set data to null to prevent outdated content persistence.

Objective: Ensure the cache contains the most recent, accurate information.
Outcome: Prevents display of outdated or erroneous data.
Result: Enhanced user experience, reliable data presentation.

RTK Query equips developers with methods for manipulating cache behavior. These tools empower you to proactively handle scenarios where cached data should be considered invalid or when refreshing data is necessary. Instead of allowing your application to continue using outdated information, these methods enable you to refresh the cache with accurate data, ensuring a seamless user experience.

Understanding these cache manipulation methods is vital for addressing real-world challenges. By employing these tools effectively, you can guarantee that your application consistently serves the most precise and up-to-date information, even in the face of unexpected errors or backend changes. RTK Query's flexibility and power lie not just in its default cache behavior but also in the control it offers developers to handle dynamic, real-time data scenarios.

Handling the distinction between data and currentData

It is a subtle yet crucial aspect of managing cache behavior in RTK Query. While the official documentation primarily emphasizes the use of data, it's equally important to recognize the significance of currentData. Here's a detailed guide on how to address this issue effectively:

Understanding data vs. currentData:

data: Represents the most recent data returned by a query or mutation, whether from the cache or a network request.
currentData: Represents the data as of the last successful fetch or query resolution, holding information from the latest successful request.

Best Practices:

Clearing the Cache on Error:

Whenever an error occurs (e.g., a 404 error), it's essential to clear the cache for the specific query. Set data to null to ensure outdated or incorrect data isn't used.

// Example of clearing cache on error
const clearCacheOnError = async (error: Error, { queryFulfilled, updateCacheData }: TClearOnError) => {
  try {
    await queryFulfilled;
  } catch (e) {
    updateCacheData(null);
  }
};

Utilizing currentData:

Always rely on currentData for rendering or other operations, especially when there's an error and the cache is cleared. currentData provides the most up-to-date and accurate information.

// Example of using currentData
const {
  data: permissions,
  currentData: currentPermissions,
  refetch: refetchPermissions,
  isFetching: isFetchingPermissions,
  isLoading: isLoadingPermissions,
} = useModifiedPermissionsQuery({ id });

By integrating these practices into your code, you ensure that your application handles errors gracefully and maintains data integrity. Clearing the cache on error and utilizing currentData for rendering not only aligns your application with the most recent data but also enhances the overall user experience.

Conclusion:

RTK Query is a valuable tool for managing cached data in Redux. However, a common challenge is the improper handling of cached data, especially when errors occur. To overcome this issue, it’s crucial to clear the cache when errors like 404 occur, using null to ensure outdated data isn't retained. Additionally, favor currentData over data to maintain accuracy after cache clearing. These best practices help ensure your application delivers up-to-date and reliable data to users.

Follow Me on Social Media!
If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Creating a Dynamic Star Rating System in React

Kartik Budhraja — Sun, 29 Oct 2023 11:42:03 +0000

When it comes to user feedback, star ratings have become a ubiquitous and intuitive way for people to express their opinions. In this article, we'll walk through the process of creating a dynamic star rating system using React. This interactive component allows users to easily rate something using a star-based system, and even lets them decide how many stars they want to display.

Follow for more - Linkedin

Setting Up the Basics

Firstly, let's import the necessary styles and React dependencies to get started:

In this snippet, we import the required CSS file for styling and React along with the useState hook for managing state in functional components.

import "./styles.css";
import React, { useState } from "react";

State Management

We use the useState hook to manage three pieces of state: rating (to store the user's selected rating), hover (to track the currently hovered star), and totalStars (to manage the total number of stars displayed).

const [rating, setRating] = useState(null);
const [hover, setHover] = useState(null);
const [totalStars, setTotalStars] = useState(5);

Rendering the Stars

This code snippet dynamically generates the star elements based on the totalStars state. It uses the Array.from() method to create an array of a specified length and then maps over this array to create the star elements. Each star is represented as a radio input and a span element displaying the star symbol (★). The color of the stars changes based on the current rating and hover state.

{[...Array(totalStars)].map((star, index) => {
  const currentRating = index + 1;

  return (
    <label key={index}>
      <input
        type="radio"
        name="rating"
        value={currentRating}
        onChange={() => setRating(currentRating)}
      />
      <span
        className="star"
        style={{
          color:
            currentRating <= (hover || rating) ? "#ffc107" : "#e4e5e9"
        }}
        onMouseEnter={() => setHover(currentRating)}
        onMouseLeave={() => setHover(null)}
      >
        &#9733;
      </span>
    </label>
  );
})}

Total Stars Input

This part of the code provides an input field below the star rating component, allowing users to change the total number of stars displayed. The handleChange function updates the totalStars state based on the value entered by the user in the input field.

<label style={{ fontWeight: 400 }}>
  Number of stars:
  <input
    style={{ marginLeft: "12px", maxWidth: "50px" }}
    onChange={handleChange}
    value={totalStars}
    type="number"
    min={1}
  />
</label>

Styling the Component

.App {
  font-family: sans-serif;
  text-align: center;
}

input[type="radio"] {
  display: none;
}
.star {
  cursor: pointer;
  font-size: 2rem;
  margin: 5px;
}

Here is the reference of the working code

Conclusion:

In summary, the React-based dynamic star rating system demonstrates the fusion of user experience and technological innovation. Through interactive features like hover effects and customizable star counts, this component exemplifies the versatility of modern web development. By empowering users to provide feedback effortlessly, it showcases the importance of user-centric design in creating engaging and responsive web applications.

Feel free to customize and expand upon this foundation to create more complex star rating system functionalities or integrate it into larger applications. If you have any specific questions or need further assistance, don't hesitate to ask! Happy coding! 🚀

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Building a Stopwatch in React

Kartik Budhraja — Fri, 27 Oct 2023 19:09:07 +0000

In this article, we will walk through the process of creating a stopwatch application using React. We will break down the code step by step, explaining each part of the implementation. By the end of this article, you will have a clear understanding of how to build a functional stopwatch in React.

Follow - Linkedin

Setting Up the Initial State:

We begin by initializing the state variables timer and isRunning using the useState hook. timer keeps track of the elapsed time, and isRunning determines whether the stopwatch is actively running.

const [timer, setTimer] = useState(0);
const [isRunning, setIsRunning] = useState(false);

Handling Start, Pause, and Reset:

These functions control the behavior of the stopwatch. handleStart starts the timer by incrementing the timer state every 10 milliseconds. handlePause stops the timer, and handleReset resets both the timer and the running interval.

const handleStart = () => {
  if (isRunning) return;
  setIsRunning(true);
  timeInterval.current = setInterval(() => {
    setTimer((prev) => prev + 1);
  }, 10);
};

const handlePause = () => {
  if (!isRunning) return;
  setIsRunning(false);
  clearInterval(timeInterval.current);
};

const handleReset = () => {
  setIsRunning(false);
  clearInterval(timeInterval.current);
  setTimer(0);
};

Formatting the Timer:

The formatTime function takes the raw timer value (in milliseconds) and formats it into minutes, seconds, and milliseconds. The padStart method ensures that the formatted values always have two digits for minutes and seconds and three digits for milliseconds.

const formatTime = (timer) => {
  const minutes = Math.floor(timer / 60000).toString().padStart(2, "0");
  const seconds = Math.floor((timer / 1000) % 60).toString().padStart(2, "0");
  const milliseconds = (timer % 1000).toString().padStart(3, "0");

  return { minutes, seconds, milliseconds };
};

const { minutes, seconds, milliseconds } = formatTime(timer);

Displaying the Timer:

Here, we use the timer-box class to style each unit of time (minutes, seconds, and milliseconds). The colons are added as separate span elements with a colon class for styling.

<div className="timer-container">
  <div className="timer-box">
    <h1>{minutes}</h1>
  </div>
  <span className="colon">:</span>
  <div className="timer-box">
    <h1>{seconds}</h1>
  </div>
  <span className="colon">:</span>
  <div className="timer-box">
    <h1>{milliseconds}</h1>
  </div>
</div>

Managing the Interval with useRef:

We utilize the useRef hook to maintain a reference to the interval ID. This reference allows us to clear the interval when the timer is paused or reset, preventing memory leaks.

let timeInterval = useRef(null);

Here is the reference of the working code

Conclusion:

By following these steps, you've successfully created a functional stopwatch in React. Understanding the logic behind each part of the code is crucial for building more complex applications. Happy coding!

Follow Me on Social Media!
If you found this article helpful, feel free to connect with me on LinkedIn for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Building a Simple Note-Taking App with React

Kartik Budhraja — Thu, 26 Oct 2023 19:16:17 +0000

In this article, we'll delve into the creation of a basic note-taking application using React. By breaking down the code step by step, we'll explore how React components interact to deliver a seamless user experience.

Follow - Linkedin

Features of the Note-Taking Application:

User-Friendly Interface: The application offers an intuitive and aesthetically pleasing user interface, ensuring a seamless experience for users of all backgrounds.
Dynamic Note Creation: Users can create new notes by providing a title and content, enabling them to capture ideas and thoughts quickly.
Effortless Editing: The app allows users to edit existing notes with ease. They can modify the title and content of any note directly from the interface.
Interactive Buttons: Interactive buttons for adding, editing, and deleting notes enhance the user experience. The interface dynamically adjusts based on user actions.
Error Handling with Toast Notifications: The app incorporates toast notifications to handle errors effectively. Users receive timely alerts when they attempt to submit empty notes, guiding them to fill in the necessary fields.
Responsive Design: The application is designed to be responsive, ensuring a seamless experience across various devices, including desktops, tablets, and smartphones.

Setting Up the Project:

Before we dive into the code, make sure you have Node.js and npm (Node Package Manager) installed. If not, you can download and install them from the official Node.js website.

To begin our project, we create a new React application. If you haven't done this before, you can set up a new React project using the following command:

npx create-react-app note-taking-app
cd note-taking-app

Creating the Note-Taking Components:

App.jsx: This is our application's entry point. It imports the NoteApp component and renders it within the div element with the class name App.

import NoteApp from "./NoteApp";

export default function App() {
  return (
    <div className="App">
      <NoteApp />
    </div>
  );
}

NoteApp.jsx: The core functionality resides in this component. It manages the state for notes, handles user input, and maintains the list of notes. This component also contains the logic for adding, updating, deleting, and editing notes.

1. Import Statements and Initial State:

The code begins by importing necessary modules, including styles from "Note.css," React, icons for Add and Edit functionalities, NoteCard component, and components related to toast notifications.
useState hooks are used to create state variables: note to store current note input, values to store an array of notes, and editIndex to track the index of the note being edited.

import "./Note.css";
import React, { useState } from "react";
import AddIcon from "@material-ui/icons/Add";
import NoteCard from "./NoteCard";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import EditIcon from "@material-ui/icons/Edit";

export default function NoteApp() {
  const [note, setNote] = useState({
    title: "",
    content: ""
  });

  const [values, setValues] = useState([]);
  const [editIndex, setEditIndex] = useState(-1);

2. Event Handlers:

handleChange is an event handler that updates the note state when the user types in the input fields (title and content).
handleSubmit handles form submission. If the title or content is empty, it displays an error toast. Otherwise, it either adds a new note to values or updates an existing note if the editIndex is not -1.

const handleChange = (e) => {
  const { name, value } = e.target;
  setNote((prevNote) => {
    return {
      ...prevNote,
      [name]: value
    };
  });
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (!note.title || !note.content) {
    toast.error("Please fill in the field");
    return;
  }

  if (editIndex === -1) {
    setValues((prevValues) => [...prevValues, note]);
  } else {
    // Updating an existing item
    const updatedItems = [...values];
    updatedItems[editIndex] = {
      title: note.title,
      content: note.content
    };
    setValues(updatedItems);
    setEditIndex(-1);
  }

  setNote({
    title: "",
    content: ""
  });
};

3. Delete and Edit Functions:

deleteNote function removes a note from the values array based on its index.
EditNote function sets editIndex and populates the note state with the selected note's data for editing.

const deleteNote = (id) => {
  setValues((prevValues) => prevValues.filter((_, index) => index !== id));
};

const EditNote = (id) => {
  setEditIndex(id);
  setNote({
    title: values[id].title,
    content: values[id].content
  });
};

4. Form and Note Rendering:

The component renders a header with the title "Notes."
A form is displayed where users can input the note title and content. The form also contains a button that toggles between Add and Edit functionality based on the editIndex.
The component maps through the values array and renders individual NoteCard components for each note, passing necessary props.
ToastContainer is used from the react-toastify library for displaying error messages with a timeout of 1000 milliseconds.

return (
    <div className="main">
      <div className="header">
        <h1 className="notes__title">Notes</h1>
      </div>

      <div>
        <form className="create-note" action="">
          <input
            name="title"
            onChange={handleChange}
            value={note.title}
            placeholder="Title"
            type="text"
          />
          <textarea
            name="content"
            onChange={handleChange}
            value={note.content}
            placeholder="Take a note..."
            rows={3}
            type="text"
          />

          <button onClick={handleSubmit}>
            {editIndex === -1 ? <AddIcon /> : <EditIcon />}
          </button>
        </form>
      </div>

      {values &&
        values.map((item, index) => {
          return (
            <NoteCard
              key={index}
              id={index}
              title={item.title}
              content={item.content}
              onDelete={deleteNote}
              onEdit={() => EditNote(index)}
            />
          );
        })}

      <ToastContainer autoClose={1000} />
    </div>
  );

Styling with CSS

body {
  background: #eee;
  background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
  padding: 0 16px;
}
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}

.notes__title {
  color: rgb(44, 31, 31);
  font-size: 38px;
  font-family: "Montserrat";
  font-weight: 400;
}

.note {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 5px #ccc;
  padding: 10px;
  width: 240px;
  margin: 16px;
  float: left;
}
.note h1 {
  font-size: 1.1em;
  margin-bottom: 6px;
}
.note p {
  font-size: 1.1em;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.note button {
  position: relative;
  float: right;
  margin-right: 10px;
  color: rgb(37, 167, 206);
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  outline: none;
}

form.create-note {
  position: relative;
  width: 480px;
  margin: 30px auto 20px auto;
  background: #fff;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 0 1px 5px rgb(138, 137, 137);
}
form.create-note input,
form.create-note textarea {
  width: 100%;
  border: none;
  padding: 4px;
  outline: none;
  font-size: 1.2em;
  font-family: inherit;
  resize: none;
}
form.create-note textarea {
  margin-top: 5px;
  border-top: 1px solid rgb(196, 190, 190);
}
form.create-note button {
  position: absolute;
  right: 18px;
  bottom: -18px;
  background: rgb(37, 167, 206);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  outline: none;
}

Here is the reference of the working code

Conclusion:

In this step-by-step breakdown, we've explored the essential components and functions of a simple note-taking application built with React. Understanding how state management, user input handling, and component interaction work in React can serve as a foundation for more complex applications. By building upon these concepts, developers can create feature-rich, responsive, and interactive web applications. Happy coding!

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

React Calculator: Building Basic Arithmetic Operations with User-Friendly Interface

Kartik Budhraja — Tue, 24 Oct 2023 18:50:38 +0000

Introduction

In this article, we are going to make a calculator in react. This calculator allows users to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. It features a clean and intuitive user interface with responsive buttons for numeric input, operators, and special functions like clear and backspace.

Step 1: Setting Up the Project

The project starts with a typical React setup. In the App.js file, the Calculator component is imported from the Calculator.jsx file. Additionally, a CSS file named Calculator.css is imported to style the calculator interface.

import Calculator from "./Calculator/Calculator";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Calculator />
    </div>
  );
}

Step 2: Building the Calculator Component

In the Calculator.jsx file, the Calculator functional component is defined. It utilizes React hooks, specifically the useState hook, to manage the calculator's state. The result variable holds the current input and output of the calculator.

import React, { useState } from "react";
import "./Calculator.css";

const Calculator = () => {
  let [result, setResult] = useState("");
  // ... rest of the component code
};

Step 3: Handling User Input

The handleClick function is defined to handle button clicks. It concatenates the clicked button's value to the result state. If the input exceeds a certain length (16 characters in this case), it displays a message and clears the input after a short delay.

const handleClick = (e) => {
  if (result.length >= 16) {
    setResult("!Large Input");
    setTimeout(() => {
      setResult("");
    }, 500);
    return;
  }
  // ... logic to handle button clicks
};

Step 4: Performing Calculations

The calculate function evaluates the input using JavaScript's eval function. It handles errors gracefully and displays either the calculated result or an error message.

const calculate = () => {
  try {
    result = eval(result).toString();
    if (result.includes(".")) {
      result = +eval(result);
      result = result.toFixed(4).toString();
    } else {
      result = eval(result).toString();
    }
    setResult(result);
  } catch (err) {
    setResult("Error");
  }
};

Step 5: Styling the Calculator

The Calculator.css file contains styles for the calculator interface. It defines the appearance of the input field, buttons, and specific button classes like clear, equal, and color.

.container {
  width: 350px;
  height: 500px;
  padding: 40px 30px 30px;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 5px 5px 5px rgba(230, 230, 230, 0.547),
    5px 5px 5px rgba(84, 174, 187, 0.483),
    inset -5px -5px 15px rgba(253, 248, 248, 0.58),
    inset 5px 5px 15px rgba(145, 219, 234, 0.71);
}

input[type="text"] {
  height: 80px;
  width: 100%;
  background-color: transparent;
  font-size: 25px;
  outline: none;
  border: 1px solid rgb(148, 194, 204);
  color: rgb(41, 41, 41);
  text-align: right;
  font-weight: 800;
  padding: 5px;
  letter-spacing: 1px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(60px, auto);
}

.clear {
  grid-column: 1/3;
  grid-row: 1;
}

.equal {
  grid-column: 3/5;
  grid-row: 5;
}

.color {
  color: white;
  background-color: #56cbd5;
  font-size: 20px;
  font-weight: 600;
}
button {
  margin: 4px;
  margin-top: 7px;
  border: 1px solid rgb(148, 194, 204);
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

Here is the reference of the working code

Conclusion:

This React-based calculator application allows users to perform basic arithmetic operations. It handles user input, performs calculations, and displays the results or appropriate error messages. The styling ensures a visually appealing and user-friendly interface.

Feel free to customize and expand upon this foundation to create more complex calculator functionalities or integrate it into larger applications. If you have any specific questions or need further assistance, don't hesitate to ask! Happy coding! 🚀

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Building a Simple Tic-Tac-Toe Game with React

Kartik Budhraja — Fri, 06 Oct 2023 18:41:37 +0000

Tic-Tac-Toe, the classic paper-and-pencil game, has been a favorite pastime for generations. Thanks to modern web technologies and frameworks like React, creating a digital version of this timeless game has never been easier. In this article, we'll walk through the steps of building a simple Tic-Tac-Toe game using React, providing both the code and the styling necessary to bring the game to life.

Initial Project Setup

Create a new project using create-react-app

npx create-react-app your-component-app

Step 1: Import React and useState Hook

import React, { useState } from "react";
import "./TicTacToe.css";

export default function TicTacToe() {
  // ... component code ...
}

Here, we import React and the useState hook from React. The useState hook allows functional components to manage state.

Step 2: Initialize State Variables

const [turn, setTurn] = useState("X");
const [cells, setCells] = useState(Array(9).fill(""));
const [winner, setWinner] = useState();

Three state variables are initialized using the useState hook:

**turn**: Represents the current player's turn (either "X" or "O").
**cells**: An array representing the Tic-Tac-Toe grid, initialized with empty strings.
**winner** : Keeps track of the winner of the game.

Step 3: Define Winning Combinations

const combos = {
  across: [[0, 1, 2], [3, 4, 5], [6, 7, 8]],
  down: [[0, 3, 6], [1, 4, 7], [2, 5, 8]],
  diagonal: [[0, 4, 8], [2, 4, 6]]
};

An object combos is defined to store the winning combinations for Tic-Tac-Toe. It includes arrays for horizontal, vertical, and diagonal winning patterns.

Step 4: Handle Cell Clicks

const handleClick = (num) => {
  if (cells[num] !== "") return;

  let arr = [...cells];
  if (turn === "X") {
    arr[num] = "X";
    setTurn("O");
  } else {
    arr[num] = "O";
    setTurn("X");
  }
  checkWinner(arr);
  setCells(arr);
};

The handleClick function is called when a cell is clicked. It updates the game state based on the current player's turn, checks for a winner, and updates the cells state variable.

Step 5: Check for a Winner

const checkWinner = (arr) => {
  for (let combo in combos) {
    combos[combo].forEach((pattern) => {
      if (arr[pattern[0]] === "" || arr[pattern[1]] === "" || arr[pattern[2]] === "") {
        // Do nothing if any cell in the combination is empty.
      } else if (arr[pattern[0]] === arr[pattern[1]] && arr[pattern[1]] === arr[pattern[2]]) {
        setWinner(arr[pattern[0]]);
      }
    });
  }
};

The checkWinner function iterates through the combos object and checks if any winning combination is present on the game board. If a winner is found, the winner state variable is updated with the winning player's symbol.

Step 6: Render Cells and Handle Reset

const Cell = ({ num }) => {
  const cellValue = cells[num];
  const cellClassName = cellValue ? `cell cell-${cellValue}` : "cell";

  return (
    <td className={cellClassName} onClick={() => handleClick(num)}>
      {cellValue}
    </td>
  );
};

const handleReset = () => {
  setWinner();
  setCells(Array(9).fill(""));
};

The Cell component renders individual cells of the Tic-Tac-Toe grid. Each cell's click event is handled by the handleClick function. The handleReset function resets the game by clearing the winner state variable and resetting the cells state variable with empty values.

Step 7: Styling with CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

table td {
  border: 1px solid grey;
  width: 100px;
  height: 100px;
}

.cell {
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 36px;
  cursor: pointer;
}

.cell-X {
  background-color: #e93737d7;
  color: #ffffff;
}

.cell-O {
  background-color: #2deb2dc0;
  color: #ffffff;
}

.winner {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  display: none;
}

.winner.show {
  display: block;
}

.reset-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  cursor: pointer;
}

.reset-button:hover {
  background-color: #0056b3;
}

CSS styles are applied to the components to create a visually appealing interface. Classes like cell, cell-X, cell-O, winner, and reset-button are used to style the game cells, winner display, and the reset button.

The link of the complete code is - https://codesandbox.io/s/tic-tac-toe-z87vh8?file=/src/App.js

Conclusion

By following these steps, the Tic-Tac-Toe game is built using React, combining state management, event handling, and CSS styling to create an interactive and visually appealing user experience.

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Twitter: https://twitter.com/K_a_r_t_i_k_08

How to Build an Accordion Menu in React from Scratch.

Kartik Budhraja — Sat, 30 Sep 2023 13:14:33 +0000

Introduction

In modern web design, user interaction is paramount. Accordion components, those neat expandable and collapsible sections, are widely used to optimize space and enhance user experience. In this tutorial, we'll guide you through the process of creating a responsive accordion component in React. We'll break down the code step by step, explaining the logic behind each section. Let's dive in!

So let's get started.

Initial Project Setup

Create a new project using create-react-app

npx create-react-app your-component-app

Setting the Foundation: Import Statements

To start, let's import the necessary modules and components. We bring in the Accordion component from a separate file and a local stylesheet (styles.css). Additionally, we import React and its powerful useState hook, a fundamental part of React's functional components.

import Accordion from "./Accordion";
import "./styles.css";
import React, { useState } from "react";

Defining the Data Structure

Accordions often display dynamic content. In our example, we define an array of objects named AccordionMenu. Each object represents an accordion item with properties like index, title, and content. This data will be dynamically rendered by our React components.

const AccordionMenu = [
  {
    index: 0,
    title: "Content 1",
    content: `Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque. Aperiam ab atque incidunt dolores ullam est, earum ipsa recusandae velit cumque.`
  },
  {
    index: 1,
    title: "Content 2",
    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
    dolor ut sequi minus iste? Quas?`
  },
  {
    index: 3,
    title: "Content 3",
    content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
    reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
    quaerat iure quos dolorum accusantium ducimus in illum vero commodi
    pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
    quidem maiores doloremque est numquam praesentium eos voluptatem amet!
    Repudiandae, mollitia id reprehenderit a ab odit!`
  }
];

Building the Functional Component: App

The core of our application is the App functional component. Here, we employ React's useState hook to manage the active index of the accordion. The handleAccordionClick function toggles the active index, ensuring that only one accordion item is open at any given time. This component maps through the AccordionMenu array, rendering individual Accordion components with appropriate props.

export default function App() {
  const [activeIndex, setActiveIndex] = useState(-1);

  const handleAccordionClick = (index) => {
    setActiveIndex(index === activeIndex ? -1 : index);
  };

  return (
    <div className="App">
      <h1>Accordion</h1>
      <div className="accordion">
        {AccordionMenu.map((item, index) => (
          <Accordion
            key={index}
            title={item.title}
            content={item.content}
            index={index}
            activeIndex={activeIndex}
            onAccordionClick={handleAccordionClick}
          />
        ))}
      </div>
    </div>
  );
}

Constructing the Accordion Component

The Accordion component is where the magic happens. It receives various props like title, content, index, activeIndex, and onAccordionClick. Based on these props, it determines whether the current accordion item should be active or not. When a user clicks on an accordion title, the onAccordionClick function is triggered, updating the active index and re-rendering the component accordingly.

const Accordion = ({ title, content, index, activeIndex, onAccordionClick }) => {
  const isActive = index === activeIndex;

  return (
    <div className="accordion-item" key={title}>
      <div className="accordion-title" onClick={() => onAccordionClick(index)}>
        <div>{title}</div>
        <div>{isActive ? "-" : "+"}</div>
      </div>
      {isActive && <div className="accordion-content">{content}</div>}
    </div>
  );
};

Polishing with CSS

To make our accordions visually appealing and responsive, we apply CSS styles. Specific styles are defined for the accordion container, individual accordion items, titles, and content. Media queries ensure the accordions adapt gracefully to various screen sizes, providing a seamless user experience.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  background: rgb(94, 89, 91);
  background: radial-gradient(
    circle,
    rgb(255, 247, 250) 0%,
    rgb(174, 179, 180) 100%
  );
}

h1 {
  text-align: center;
  margin: 2rem 0 4rem 0;
}

.accordion {
  max-width: 600px;
  margin: 2rem auto;
}
.accordion-item {
  margin-bottom: 12px;
}

.accordion-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  background-color: #21aeca;
}

.accordion-title:hover {
  background-color: #12759c;
}

.accordion-title,
.accordion-content {
  padding: 1rem;
}

.accordion-content {
  background-color: #39b9d275;
}

@media screen and (max-width: 700px) {
  body {
    font-size: 18px;
  }

  .accordion {
    width: 90%;
  }
}

Conclusion

In conclusion, building a responsive accordion component in React involves careful management of state and props. By organizing the code into modular components and applying CSS styles for a polished look, we can create a user-friendly accordion interface. Understanding the interplay between React components and their states is crucial in developing interactive web applications. By following this step-by-step guide, developers can create similar components, enhancing their skills in React development and user interface design. Happy coding!

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Twitter: https://twitter.com/K_a_r_t_i_k_08