DEV Community: EL-PACHO

Make an Image drag and drop with CSS in React

EL-PACHO — Wed, 27 Aug 2025 16:12:50 +0000

React is a popular JavaScript library for building user interfaces, and its flexibility and versatility make it a great choice for building interactive applications. In this tutorial, we will show you how to create a drag-and-drop feature for images using only CSS in React.

Step 1 —
To start, let's set up a React project. You can use either Create React App or any other setup method that works best for you. Let's make a React application using create-react-app.

npx create-react-app drag-and-drop

Step 2 —
Replace App.js and App.css with the below code.

App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">

      </div>
    </div>
  );
}

export default App;
App.css


.App {
  text-align: center;
  width: 100vw;
  height: 100vh;

}

.heading {
  font-size: 32px;
  font-weight: 500;
}

Step 3 —
Now create a new file and component ImageContainer.js in the src directory and take a div for drag and drop container.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

    return (
        <div className="image-container">

        </div>
    );
};

export default ImageContainer;
Then make a CSS file ImageContainer.css in the src directory and add some styles in the image container.

ImageContainer.css

.image-container {
    width: 60%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, .3);
}

Step 4 —
Now we will take a div with an input field and input text title inside the .image-container class and add some style in the ImageContainer.css file. We will also take a state for the image URL and an onChage function for the update state.

ImageContainer.js will be

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
    const [url, setUrl] = React.useState('');

    const onChange = (e) => {
        const files = e.target.files;
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div className="image-container">
            <div className="upload-container">
                <input
                    type="file"
                    className="input-file"
                    accept=".png, .jpg, .jpeg"
                    onChange={onChange}
                />
                <p>Drag & Drop here</p>
                <p>or</p>
                <p>Click</p>
            </div>
        </div>
    );
};

export default ImageContainer;
ImageContainer.css will be

.image-container {
    width: 60%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.upload-container>p {
    font-size: 18px;
    margin: 4px;
    font-weight: 500;
}

.input-file {
    display: block;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

Step 5 —
Now we will preview the image file conditionally. If you have dropped an image will render the image and or render the drag-and-drop area.

ImageContainer.js will be

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
    const [url, setUrl] = React.useState('');

    const onChange = (e) => {
        const files = e.target.files;
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div className="image-container">
            {
                url ?
                    <img
                        className='image-view'
                        style={{ width: '100%', height: '100%' }}
                        src={url} alt="" />
                    :
                    <div className="upload-container">
                        <input
                            type="file"
                            className="input-file"
                            accept=".png, .jpg, .jpeg"
                            onChange={onChange}
                        />
                        <p>Drag & Drop here</p>
                        <p>or <span style={{ color: "blue" }} >Browse</span></p>

                    </div>
            }
        </div>
    );
};

export default ImageContainer;

Step 6 —
Now we will import the ImageContainer component in our App.js and run our application using the npm start command and have fun while coding.

App.js will be

import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;
In this tutorial, we showed you how to create a drag-and-drop feature for images using only CSS in React.

Top 10 React js interview questions.

EL-PACHO — Wed, 27 Aug 2025 16:08:57 +0000

As a React developer, it is important to have a solid understanding of the framework's key concepts and principles. With this in mind, I have put together a list of 10 important questions that every React developer should know, whether they are interviewing for a job or just looking to improve their skills.

Before diving into the questions and answers, I suggest trying to answer each question on your own before looking at the answers provided. This will help you gauge your current level of understanding and identify areas that may need further improvement.

Let's get started!

01. What is React and what are its benefits?
Ans: React is a JavaScript library for building user interfaces. It is used for building web applications because it allows developers to create reusable UI components and manage the state of the application in an efficient and organized way.

02. What is the virtual DOM and how does it work?
Ans: The Virtual DOM (Document Object Model) is a representation of the actual DOM in the browser. It enables React to update only the specific parts of a web page that need to change, instead of rewriting the entire page, leading to increased performance.

When a component's state or props change, React will first create a new version of the Virtual DOM that reflects the updated state or props. It then compares this new version with the previous version to determine what has changed.

Once the changes have been identified, React will then update the actual DOM with the minimum number of operations necessary to bring it in line with the new version of the Virtual DOM. This process is known as "reconciliation".

The use of a Virtual DOM allows for more efficient updates because it reduces the amount of direct manipulation of the actual DOM, which can be a slow and resource-intensive process. By only updating the parts that have actually changed, React can improve the performance of an application, especially on slow devices or when dealing with large amounts of data.

03. How does React handle updates and rendering?
Ans: React handles updates and rendering through a virtual DOM and component-based architecture. When a component's state or props change, React creates a new version of the virtual DOM that reflects the updated state or props, then compares it with the previous version to determine what has changed. React updates the actual DOM with the minimum number of operations necessary to bring it in line with the new version of the virtual DOM, a process called "reconciliation". React also uses a component-based architecture where each component has its own state and render method. It re-renders only the components that have actually changed. It does this efficiently and quickly, which is why React is known for its performance.

04. What is the difference between state and props?
Ans: State and props are both used to store data in a React component, but they serve different purposes and have different characteristics.

Props (short for "properties") are a way to pass data from a parent component to a child component. They are read-only and cannot be modified by the child component.

State, on the other hand, is an object that holds the data of a component that can change over time. It can be updated using the setState() method and is used to control the behavior and rendering of a component.

05. Can you explain the concept of Higher Order Components (HOC) in React?
Ans: A Higher Order Component (HOC) in React is a function that takes a component and returns a new component with additional props. HOCs are used to reuse logic across multiple components, such as adding a common behavior or styling.

HOCs are used by wrapping a component within the HOC, which returns a new component with the added props. The original component is passed as an argument to the HOC, and receives the additional props via destructuring. HOCs are pure functions, meaning they do not modify the original component, but return a new, enhanced component.

For example, an HOC could be used to add authentication behavior to a component, such as checking if a user is logged in before rendering the component. The HOC would handle the logic for checking if the user is logged in, and pass a prop indicating the login status to the wrapped component.

HOCs are a powerful pattern in React, allowing for code reuse and abstraction, while keeping the components modular and easy to maintain.

06. What is the difference between server-side rendering and client-side rendering in React?
Ans: Server-side rendering (SSR) and client-side rendering (CSR) are two different ways of rendering a React application.

In SSR, the initial HTML is generated on the server, and then sent to the client, where it is hydrated into a full React app. This results in a faster initial load time, as the HTML is already present on the page, and can be indexed by search engines.

In CSR, the initial HTML is a minimal, empty document, and the React app is built and rendered entirely on the client. The client makes API calls to fetch the data required to render the UI. This results in a slower initial load time, but a more responsive and dynamic experience, as all the rendering is done on the client.

07. How do work useEffect hook in React?
Ans: The useEffect hook in React allows developers to perform side effects such as data fetching, subscription, and setting up/cleaning up timers, in functional components. It runs after every render, including the first render, and after the render is committed to the screen. The useEffect hook takes two arguments - a function to run after every render and an array of dependencies that determines when the effect should be run. If the dependency array is empty or absent, the effect will run after every render.

08. How does React handle events and what are some common event handlers?
Ans: React handles events through its event handling system, where event handlers are passed as props to the components. Event handlers are functions that are executed when a specific event occurs, such as a user clicking a button. Common event handlers in React include onClick, onChange, onSubmit, etc. The event handler receives an event object, which contains information about the event, such as the target element, the type of event, and any data associated with the event. React event handlers should be passed
as props to the components, and the event handlers should be defined within the component or in a separate helper function.

09. What are some best practices for performance optimization in React?
Ans: Best practices for performance optimization in React include using memoization, avoiding unnecessary re-renders, using lazy loading for components and images, and using the right data structures.

10. How does React handle testing and what are some popular testing frameworks for React?
Ans: React handles testing using testing frameworks such as Jest, Mocha, and Enzyme. Jest is a popular testing framework for React applications, while Mocha and Enzyme are also widely used.

In conclusion, understanding key concepts and principles of React is crucial for every React developer. This article provides answers to 10 important questions related to React including what is React, the virtual DOM, how React handles updates and rendering, the difference between state and props, Higher Order Components, server-side rendering and client-side rendering, and more. Understanding these topics will help developers to build efficient and effective web applications using React.

Git Cheatsheet that will make you a master in Git

EL-PACHO — Wed, 27 Aug 2025 16:06:08 +0000

Introduction to Git
Git is a widely used version control system that allows developers to track changes and collaborate on projects. It has become an essential tool for managing code changes, whether working solo or in a team. However, mastering Git can be a challenge, especially for beginners who are not familiar with its commands and features. In this Git cheatsheet, we will cover both the basic and advanced Git commands that every developer should know. From creating a repository to branching, merging, and beyond, this cheatsheet will serve as a handy reference guide for anyone looking to improve their Git skills and become a more proficient developer. Whether you are just starting with Git or looking to enhance your existing knowledge, this cheatsheet will help you make the most out of Git and optimize your workflow.

Basic Git commands

Initialization
To initialize a new Git repository in the current directory, run the following command:

git init

This creates a hidden .git directory in the current directory that tracks changes to your code.

Cloning
To clone an existing Git repository to your local machine, run the following command:

git clone <repository URL>

This creates a new directory on your computer with a copy of the repository.

Staging changes
Before you commit changes to your code, you need to stage them using the git add command. This tells Git which changes you want to include in your commit.
To stage a file or directory, run the following command:

git add <file/directory>

You can also stage all changes in the current directory by running:

git add .

Committing changes
To commit the changes in the staging area with a commit message, run the following command:

git commit -m "<commit message>"

The commit message should briefly describe the changes you made in the commit.

Checking status
To check the current status of your repository, run the following command:

git status

This will show you which files have been modified, which files are staged for commit, and which files are untracked.

Viewing changes
To view the changes between the working directory and the staging area, run the following command:

git diff

To view the changes between the staging area and the last commit, run the following command:

git diff --cached

Branching
Git allows you to create multiple branches of your code so that you can work on different features or fixes without affecting the main codebase. The default branch in Git is called master.
To create a new branch with the specified name, run the following command:

git branch <branch name>

To switch to the specified branch, run the following command:

git checkout <branch name>

You can also create and switch to a new branch in one command by running:

git checkout -b <branch name>

To merge the specified branch into the current branch, run the following command:

git merge <branch name>

Pushing changes
To push changes to a remote repository, run the following command:

git push <remote> <branch>

is the name of the remote repository, and is the name of the branch you want to push.

Pulling changes
To pull changes from a remote repository, run the following command:

git pull <remote> <branch>

is the name of the remote repository, and is the name of the branch you want to pull.

Viewing history
To view the commit history, run the following command:

git log

This will show you a list of all the commits in the repository, along with the commit message, author, and date.

Advanced Git commands
Reverting changes
If you need to undo a commit, you can use the git revert command. This creates a new commit that undoes the changes made in the specified commit.

Resetting changes
If you want to undo a commit and remove it from the commit history, you can use the git reset command. This removes the specified commit and all subsequent commits from the commit history. There are three options for git reset: --soft, --mixed, and --hard.
--soft only resets the commit history and leaves the changes in the staging area.
--mixed resets the commit history and unstages the changes.
--hard resets the commit history, unstages the changes, and discards all changes made after the specified commit.

To reset the last commit using --soft, run the following command:

git reset --soft HEAD~1

To reset the last commit using --mixed, run the following command:

git reset --mixed HEAD~1

To reset the last commit using --hard, run the following command:

git reset --hard HEAD~1

Rebasing
If you want to apply your changes to a different branch, you can use the git rebase command. This command applies your changes on top of the specified branch.
To rebase the current branch onto the specified branch, run the following command:

git rebase <branch name>

Stashing
If you want to save changes without committing them, you can use the git stash command. This saves the changes in a stack of temporary commits, allowing you to switch to a different branch or work on something else.
To stash your changes, run the following command:

git stash

To apply your changes again, run the following command:

git stash apply

Cherry-picking
If you want to apply a specific commit from one branch to another, you can use the git cherry-pick command. This command applies the specified commit on top of the current branch.
To cherry-pick the specified commit, run the following command:

git cherry-pick <commit hash>

Git hooks
Git hooks are scripts that run automatically before or after specific Git commands, allowing you to customize the behavior of Git. Git comes with a set of built-in hooks, but you can also create your own custom hooks.
To create a custom Git hook, navigate to the .git/hooks directory in your Git repository and create a new file with the name of the hook you want to create (e.g., pre-commit, post-merge). The file should be executable and contain the script you want to run.

Git aliases
Git aliases are shortcuts for Git commands, allowing you to save time and type less. You can create your own custom aliases using the git config command.
To create a new alias, run the following command:

git config --global alias.<alias name> '<command>'

is the name of the alias you want to create, and is the Git command you want to alias.

Git workflows
Git workflows are strategies for using Git to manage code changes in a team. There are several popular Git workflows, including the centralized workflow, the feature branch workflow, and the Gitflow workflow.
The centralized workflow is a simple workflow that involves a single main branch, with all changes made directly to that branch.
The feature branch workflow involves creating a new branch for each feature or bug fix, and merging those branches back into the main branch when the changes are complete.
The Gitflow workflow is a more complex workflow that involves multiple branches, including a develop branch for ongoing development, a release branch for preparing releases, and feature branches for individual features.

Conclusion
In conclusion, Git is a powerful tool for version control and managing code changes. It allows developers to collaborate on projects, track changes, and revert to previous versions when necessary. While the basic Git commands are essential to know, the advanced Git commands discussed in this cheat sheet can help you be more efficient and effective when working with Git.

Top 10 ES6 Features that Every Developer Should know

EL-PACHO — Wed, 27 Aug 2025 15:57:25 +0000

JavaScript is one of the most widely-used programming languages in the world, and its popularity continues to grow. ES6, also known as ECMAScript 2015, introduced many new and exciting features to the JavaScript language. In this blog, we'll take a look at 10 advanced ES6 features that every JavaScript developer should master in order to stay ahead of the curve. Whether you're a beginner or an experienced developer, these features are sure to enhance your JavaScript skills and take your coding to the next level.

01. Arrow Functions:
Arrow functions are a concise syntax for writing anonymous functions.

For instance, instead of writing this:

const square = function (num) {
  return num * num;
};
You can write the same code with an arrow function:

const square = (num) => num * num;

02. Template Literals:
Template literals allow you to embed expressions in string literals. They use backticks instead of quotes and can be multi-line as well.

For example:

const name = "John";
const greeting = `Hello, ${name}!`;

03. Destructuring:
Destructuring allows you to extract data from arrays or objects into separate variables. This makes it easier to work with complex data structures.

Here's an example:

const numbers = [1, 2, 3];
const [first, second, third] = numbers; //Array destructure

const person ={
  name: "John",
  age: 18,
}
const {name, age} = person; // Object destructure

04. Spread Operator:
The spread operator allows you to spread elements of an array or properties of an object into a new array or object. This is useful for merging arrays or objects, or for spreading an array into function arguments.

Here's an example:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

05. Default Parameters:
Default parameters allow you to specify default values for function parameters in case no value is passed. This makes it easier to handle edge cases and reduces the need for conditional statements.

Here's an example:

const greet = (name = "John") => {
  console.log(`Hello, ${name}!`);
};

06. Rest Parameters:
Rest parameters allow you to collect an indefinite number of arguments into an array. This is useful for writing functions that can accept any number of arguments.

Here's an example:

const sum = (...numbers) => {
  let result = 0;
  for (const number of numbers) {
    result += number;
  }
  return result;
};

07. Class Definitions:
Class definitions provide a more object-oriented way of defining objects in JavaScript. They make it easier to create reusable objects with inheritance and encapsulation.

Here's an example:


class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

08. Modules:
Modules allow you to organize your code into smaller, reusable pieces. This makes it easier to manage complex projects and reduces the risk of naming collisions.

Here's a simple example:

// greeting.js
export const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

// main.js
import { greet } from "./greeting.js";
greet("John");
09. Promise:
Promises are a way to handle asynchronous operations in JavaScript. They provide a way to handle errors, and can be combined to create complex asynchronous flows.

Here's a simple example:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
};

fetchData().then((data) => {
  console.log(data);
});
10. Map and Set:
The Map and Set data structures provide an efficient way to store unique values in JavaScript. They also provide a variety of useful methods for searching and manipulating the data.

For example:

// Creating a Map
const map = new Map();
map.set("name", "John");
map.set("age", 30);

// Accessing values in a Map
console.log(map.get("name")); // Output: John
console.log(map.get("age")); // Output: 30

// Iterating over a Map
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// Output:
// name: John
// age: 30

// Creating a Set
const set = new Set();
set.add("John");
set.add("Jane");
set.add("Jim");

// Iterating over a Set
for (const name of set) {
  console.log(name);
}

// Output:
// John
// Jane
// Jim

// Checking if a value exists in a Set
console.log(set.has("John")); // Output: true

In conclusion, the advanced ES6 features outlined in this blog are essential for every JavaScript developer to master. They provide a more efficient, concise, and organized way of writing code, making it easier to work with complex data structures and handle asynchronous operations. Whether you're looking to improve your existing skills or just starting out with JavaScript, these features are an excellent starting point. Remember that becoming an expert in these features takes time and practice, so don't be discouraged if you don't understand everything right away. With consistent effort and dedication, you'll be able to master these advanced ES6 features and take your JavaScript skills to new heights.

Build an awesome GitHub developer portfolio.

EL-PACHO — Wed, 27 Aug 2025 15:51:59 +0000

In the software development world, it's crucial to effectively present your work alongside the code you write. A portfolio website is an excellent way for developers to showcase their skills, projects, and contributions. One innovative way to enhance your portfolio is by integrating GitHub statistics, which can provide real-time insights into your coding activity and contributions.

To assist other developers in achieving this, I have created a new website from scratch that highlights your GitHub works. The website is built using NextJS and Tailwind CSS, and it fetches all data from your GitHub profile and work.

This article will guide you through the setup process step by step, and it will also provide you with the GitHub link.

STEP 01:
Clone the Repository using GitHub link and change the directory to the github-portfolio.

git clone https://github.com/barrujamisrg/PORTOFOLIO.git
cd github-portfolio

STEP 02:
Now install all packages using npm or yarn.

npm install
# or
yarn

After installation, all packages, Now change all data on data/user-data.js according to you. For example:

 export const userData = {
  githubUser: 'said7388',
  devUsername: "said7388",
  github: 'https://github.com/said7388',
  facebook: 'https://www.facebook.com/abusaid.riyaz/',
  linkedIn: 'https://www.linkedin.com/in/abu-said-bd/',
  twitter: 'https://twitter.com/said7388',
  stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said',
  leetcode: "https://leetcode.com/said3812/",
  resume: "https://drive.google.com/file/d/1eyutpKFFhJ9X-qpQGKhUNnVRkB5Wer00/view?usp=sharing",
  skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'],
  timezone: '+6'
};

STEP 03:
If you want to use Google Analytics, Please create a new .env file from the .env.example file and provide the value. The .env file will be the following:

NEXT_PUBLIC_GTM = ""

STEP 04:
Now the GitHub portfolio website is ready for the run. You can run it using npm or yarn.

npm run dev
# or
yarn dev

If you like this GitHub portfolio project you can consider giving it a star on the GitHub Repository.

How does ChatGPT generate human-like text?

EL-PACHO — Wed, 27 Aug 2025 15:45:08 +0000

ChatGPT, developed by OpenAI, is a cutting-edge language model that has made a significant impact in the field of natural language processing. It uses deep learning algorithms to generate human-like text based on the input it receives, making it an excellent tool for chatbots, content creation, and other applications that require natural language processing. In this post, we will explore the workings of ChatGPT to understand how it generates human-like text.

The Core of ChatGPT :
The backbone of ChatGPT is a transformer-based neural network that has been trained on a massive amount of text data. This training allows the model to understand the patterns and relationships between words in a sentence and how they can be used to generate new text that is coherent and meaningful. The transformer-based architecture is a novel approach to machine learning that enables the model to learn and make predictions based on the context of the input. This makes it ideal for language models that need to generate text that is relevant to the context of a conversation.

How ChatGPT Generates Text :
ChatGPT uses an autoregressive language modeling approach to generate text. When you provide input to ChatGPT, the model first encodes the input into a vector representation. This representation is then used to generate a probability distribution over the next word in the sequence. The model selects the most likely next word and generates a new vector representation based on the new input. This process is repeated until the desired length of text has been developed.

One of the key strengths of ChatGPT is its ability to handle context. The model has been trained to understand the context of a conversation and can generate text that is relevant to the current topic. This allows it to respond to questions and generate text that is relevant to the context of the conversation. This makes it an excellent tool for chatbots, as it can understand the user's intention and respond accordingly.

Scalability and Fine-tuning :
Another critical aspect of ChatGPT is its scalability. The model can be fine-tuned for specific use cases by training it on specific data sets. This allows it to generate text that is more tailored to the needs of the application. For example, if ChatGPT is being used in a customer service chatbot, it can be fine-tuned on data that is relevant to customer service queries to generate more accurate and relevant responses. This fine-tuning process can be done by using transfer learning, where the model is trained on a smaller data set, leveraging the knowledge it gained from its training on the larger data set.

Real-world Applications :
ChatGPT has a wide range of real-world applications, from content creation to customer service. It can be used to generate news articles, creative writing, and even poetry. In customer service, ChatGPT can be used as a chatbot to respond to customer queries, freeing up human agents to handle more complex issues. Additionally, ChatGPT can be used in language translation, as it has the ability to understand the context of a conversation and translate text accordingly.

In summary, ChatGPT's ability to generate human-like text and understand context makes it a versatile tool with endless potential applications. Its deep learning algorithms and transformer-based architecture allow it to generate coherent and meaningful text, making it an exciting development in the field of natural language processing. Whether it's being used in customer service, content creation, or language translation, ChatGPT has the potential to revolutionize the way we interact with machines.

Conclusion :
In conclusion, this blog has explored the workings of ChatGPT, a cutting-edge language model developed by OpenAI. We have seen that the model is based on a transformer-based neural network that has been trained on massive amounts of text data, allowing it to generate human-like text based on the context of a conversation. Its scalability and fine-tuning capabilities make it a valuable tool for a wide range of applications, from customer service to content creation. With its ability to understand the context and generate coherent and meaningful text, ChatGPT has the potential to revolutionize the way we interact with machines and will play a crucial role in the development of AI-powered applications.

disclaimer: This post is also written using ChatGPT.