DEV Community: Naveen prasad

Frontend Reviews: 13 Mistakes I See in Every PR (And How to Avoid Them)

Naveen prasad — Wed, 18 Jun 2025 17:53:06 +0000

After reviewing hundreds of PRs over the last few years, especially working in fast-paced startup environments, I’ve noticed some frontend mistakes repeat over and over.

Some of these seem harmless at first but often pile up into frustrating tech debt later.

Here are 13 mistakes I’ve repeatedly seen in frontend pull requests—and how you can avoid them.

1️⃣ Keeping Large Arrays/Objects in Global Constants

❗ The Mistake:

Storing large arrays or objects in global constant files.

🚫 Why It’s Bad:

Even if unused, they stay in memory because of their global scope. The garbage collector won’t help you here.

✅ The Fix:

Create wrapper functions that return these values only when needed. This ensures they’re created when required, freeing memory otherwise.

2️⃣ Duplication of Assets (SVGs, Images, HOCs)

❗ The Mistake:

Adding new SVGs or images wherever needed → over time duplicates sneak in.

✅ The Fix:

Maintain a centralized asset or icon library for media and common components. Also, for recurring logic (like showing loaders), build HOCs or reusable components.

3️⃣ Repeating the Same Logic in Multiple Components

❗ The Mistake:

Data fetching logic or transformations duplicated across multiple components.

✅ The Fix:

Abstract into custom hooks. Need to fetch profile info in 3 places? → useProfile() → update it in one place later.

4️⃣ Overusing `useState` Instead of `useRef`

❗ The Mistake:

Using useState to store everything—even values that don’t impact UI.

✅ The Fix:

Use useRef() for values that don’t require re-renders (e.g., timers, previous state snapshots).

5️⃣ Using `useEffect` for Everything

❗ The Mistake:

Triggering actions through useEffect() even when they should happen directly via user interaction.

✅ The Fix:

Prefer event handlers for actions like button clicks. Use useEffect() only for true side-effects tied to state or lifecycle changes.

6️⃣ Lifting State Prematurely

❗ The Mistake:

Moving local state higher up in the component tree unnecessarily.

✅ The Fix:

Keep state local by default. Lift it only when multiple components genuinely need access to it.

7️⃣ Overusing `React.memo` and `useMemo`

❗ The Mistake:

Adding React.memo() and useMemo() everywhere just because they exist.

✅ The Fix:

Optimize only where profiling shows performance bottlenecks.

8️⃣ Prop Drilling Hell

❗ The Mistake:

Passing data through 4-5 layers of components → painful.

✅ The Fix:

Use React Context responsibly for module-level shared data. Don’t over-nest contexts react—composition patterns help here.

9️⃣ Tedious Nested State Updates

❗ The Mistake:

Manually writing deep updates with spread operators for every nested object change.

✅ The Fix:

Use immer → makes working with complex state structures elegant and easier to maintain.

🔟 Skipping Tests

❗ The Mistake:

Skipping tests for components or utility functions to “save time.”

✅ The Fix:

Write unit tests, especially for complex components or functions. Tests help you understand your own code better.

1️⃣1️⃣ Multiple Components in One File

❗ The Mistake:

Defining multiple components in a single file → chaos over time.

✅ The Fix:

One component per file. Use kebab-case for filenames (user-profile.tsx).

1️⃣2️⃣ Using Contexts Like Globals

❗ The Mistake:

Creating Context Providers and dumping everything inside them → hard to maintain later.

✅ The Fix:

Adopt composition patterns. Break large contexts into smaller, purpose-driven providers.

1️⃣3️⃣ Inconsistent Folder/File Structures

❗ The Mistake:

Random folder structures, random naming conventions, different import patterns → painful.

✅ The Fix:

Pick a consistent folder structure—feature-based structures work great for React. Use ESLint and Prettier to enforce consistency.

🎯 Final Thoughts

These are not just things I’ve seen in PRs—they’re things I’ve personally done and learned from.

If you’re just starting out in frontend or React, I hope this helps you save time, avoid pitfalls, and write scalable code.

What mistakes have you seen or done in PRs?

Drop them in the comments 👇 I’d love to hear!

Web Communication: Long Polling Explained

Naveen prasad — Sun, 04 May 2025 17:22:59 +0000

In the previous post, we explored short polling. This time, let’s upgrade to long polling, a technique that keeps the client in sync with the server without frequent re-requests.

🧠 What’s Different?

In long polling:

Client sends a request and waits.
Server responds only when there is new data.
Once response is received, the client immediately resubscribes.

Let’s understand this using the core code blocks involved.

🧩 Server Code Highlights

1. Store connections for later use

const connections = [];

app.get('/subscribe', (req, res) => {
  if (req.query.data !== longPollingData) {
    return res.status(200).json({ message: longPollingData });
  }
  connections.push(res); // hold the response until new data is available
});

If the client already has the latest data, we hold the response (res) for future updates.

Otherwise, respond immediately.

2. Notify all clients on data update

app.post('/updateData', (req, res) => {
  longPollingData = req.body.userInput;

  connections.forEach((connection) => {
    connection.status(200).json({ message: longPollingData });
  });

  connections.length = 0;
  res.send('Update sent to all clients');
});

On receiving new data, we loop through all held responses and send the updated message.
Then, we clear the connections array.

Client Code Highlights

1. Subscribe and re-subscribe

const subscribe = async (lastData) => {
  try {
    const res = await fetch('/subscribe?data=' + lastData);
    const data = await res.json();

    updateData(data.message);
    await subscribe(data.message); // recursive re-subscribe
  } catch (err) {
    await new Promise((res) => setTimeout(res, 1000));
    await subscribe(lastData); // retry on failure
  }
};

Makes a /subscribe request and waits for server update.
Once update is received, it recursively re-subscribes.

2. Submit new data

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const inputValue = document.getElementById('userInput').value;

  await fetch('/updateData', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userInput: inputValue }),
  });

  form.reset();
  updateData(inputValue);
});

Sends new input to server which triggers an update to all subscribed clients.

✅ Summary

Long polling holds client requests until new data is ready.

It’s efficient and feels real-time without setting up a WebSocket.

✅ Conclusion

Long polling offers a smarter alternative to short polling by reducing unnecessary traffic and keeping clients updated with minimal latency. While not as seamless as WebSockets, it's a practical solution for many use cases where persistent connections aren’t viable.

👍 Pros

✅ Reduced network traffic compared to short polling.
✅ Near real-time data delivery without constant re-requesting.
✅ Works with HTTP/1.1, no need for WebSocket support.
✅ Simple implementation using standard HTTP methods.

👎 Cons

❌ Each update still requires a new HTTP connection.
❌ More resource-intensive than WebSockets at scale.
❌ Delayed response if no data is available for a while.
❌ Not truly bi-directional — only server-to-client.

🕒 When to Use Long Polling

You need real-time-like updates, but WebSockets are not an option (e.g., firewalls, older infrastructure).
Your app doesn’t need constant updates but should reflect new data quickly.
You want a simpler alternative to WebSockets that works in most browsers.

Web Communication: Understanding Short Polling with a Simple Node.js Example

Naveen prasad — Sun, 04 May 2025 14:08:16 +0000

When developers think about keeping the UI in sync with server-side changes, the knee-jerk solution is often WebSockets.

And it makes sense — WebSockets offer a full-duplex connection, enabling real-time, bidirectional communication between client and server.

But here’s the catch:

Not every application needs that level of complexity.

In many cases, especially when the data flows in just one direction (Server ➝ Client) — like a dashboard that fetches new stats or a feed that updates periodically — setting up WebSockets can be:

Overkill
Harder to scale
Unnecessarily complex

That’s where simpler, more tailored techniques come into play — short polling, long polling, Server-Sent Events (SSE), and more.

These alternatives can be easier to implement, lightweight, and often more cost-effective when the use case doesn’t demand bi-directional messaging.

📚 Web Communication Series — Chapter 1: Short Polling

Welcome to the first chapter of the Web Communication series, where we explore communication techniques between the client and server. In this post, we’ll break down short polling, one of the simplest ways for a client to fetch updates from the server periodically.

We'll go through the concepts and implement a working example using Express and plain JavaScript.

🔧 Project Setup

Let’s dive into building a simple app that demonstrates short polling.

Directory Structure

web-comm-short-polling/
├── frontend/
│ ├── index.html
│ └── shortPollingScript.js
├── server.js

In this example, we have:

A client that polls the server every 5 seconds for updates.

A server that returns the latest data and allows it to be updated.

🖥️ Server-Side Logic

✅ Route to Get the Latest Data

app.get('/getData', (req, res) => {
  return res.json({ message: data });
});

This is the endpoint our client keeps polling every few seconds. It returns the current value of a variable (data).

✅ Route to Update the Data

app.post('/updateData', (req, res) => {
  data = req.body.userInput;
  return res.json({ update: true });
});

This lets us update the server-side value using a POST request. Once updated, future short polls will return the new value.

🧑‍💻 Client-Side Logic

Polling the Server Every 5 Seconds

setInterval(() => {
  getData().then(updateData);
}, 5000);

This line is the heart of short polling. It calls getData() every 5 seconds and updates the UI with the result.

Fetching the Data

const getData = async () => {
  const res = await fetch('/getData');
  const data = await res.json();
  return data.message;
};

Simple GET request to fetch the current value.

Submitting New Data

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const inputValue = inputElement.value;

  await fetch('/updateData', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ userInput: inputValue }),
  });

  updateData(inputValue);
});

with this data updation, if we create two or more clients and update it from any one of the clients, it will be updated in all the clients.

🧪 Summary of Code Flow

Client loads the page with some default data.
Every 5 seconds, it polls the server for new data via /getData.
If the user submits the form, it updates the server-side data.
The next polling cycle will pick up the new data and reflect it in the UI.

✅ Pros and ❌ Cons of Short Polling

✅ Pros

Simple to implement – Works with any server that supports HTTP.
No need for persistent connections – Each request is independent.
Easier to debug – Plain HTTP requests are easier to inspect and test.
Works with most load balancers and proxies – No special configuration required.

❌ Cons

Increased server load – Frequent polling can create unnecessary traffic.
Latency in updates – Changes are only detected on the next poll (e.g., every 5 seconds).
Inefficient for real-time apps – Wastes resources when there's no new data.
Scalability concerns – Doesn't scale well with thousands of clients polling simultaneously.

🧠 When Should You Use Short Polling?

Short polling is a good fit when:

Updates are infrequent and not mission-critical.
You want a quick and easy solution without setting up complex infrastructure.
You’re building a proof-of-concept or MVP.
Your data update interval is predictable or doesn't need to be reflected in real-time.

🔚 Conclusion

Short polling offers a simple way to keep your frontend in sync with backend data. While it may not be the most efficient technique for real-time applications, it's perfect for low-frequency updates or when you need a quick and reliable solution without diving into more complex protocols.

In this chapter of the Web Communication Series, we covered how short polling works and built a working demo using Express and vanilla JavaScript.

You can find the complete source code for this example on GitHub:

🔗 Web Communication GitHub Repo

Stay tuned for the next chapter, where we’ll explore Long Polling and how it improves upon this approach!

How to Add TypeScript Support to Your Node.js Project

Naveen prasad — Sat, 19 Apr 2025 11:45:56 +0000

TypeScript is a game-changer for Node.js development, bringing type safety and modern tooling to your JavaScript codebase. In this guide, I’ll walk you through the exact steps I used to migrate my Node.js project to TypeScript—no prior TypeScript experience required!

1. Install TypeScript and Type Definitions

First, install TypeScript and the Node.js type definitions as development dependencies:

npm install --save-dev typescript @types/node

2. Initialize TypeScript Configuration

Generate a tsconfig.json file with the following command:

npx tsc --init

This creates a base TypeScript configuration file in your project root.

3. Update tsconfig.json

Open your tsconfig.json and add or update these important fields:

{
  "include": ["**/*.ts"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "outDir": "./dist"
    // ...other options
  }
}

include tells TypeScript to compile all .ts files.
exclude prevents node_modules from being compiled.
outDir specifies where the compiled JavaScript will go.

4. Rename Your Files to .ts

Rename your existing .js files to .ts. For example:

mv server.js server.ts

Delete the old .js files to avoid confusion.

5. Compile TypeScript Files

Now, compile your TypeScript files:

npx tsc

This will generate JavaScript files in the dist directory (as specified by outDir).

6. Run the Compiled JavaScript

Run your app using Node.js, pointing to the compiled entry file in dist:

node dist/server.js

Or whatever your entry point is.

7. (Optional) Update npm Scripts

For convenience, add a script to your package.json:

"scripts": {
  "build": "npx tsc",
  "start": "node dist/server.js"
}

Now you can run:

npm run build
npm start

Conclusion

That’s it! You’ve successfully added TypeScript support to your Node.js project. Enjoy better type safety, editor autocompletion, and more robust code!

If you found this guide helpful, follow me for more tips on JavaScript, TypeScript, and Node.js development.

Best Time For Vacation: Automating Your Holiday Planning with Node.js

Naveen prasad — Fri, 18 Apr 2025 14:13:02 +0000

This is a side project that I had been thinking about for a long time, to help find the best vacation time. It analyzes holiday data and suggests optimal vacation periods.

Planning vacations around public holidays can be tricky—especially if you want to maximize your time off with minimal leave. In this post, I'll walk you through how I built a tool that fetches holiday data, groups sequential holidays, and even suggests the best days to take leave for the longest possible break. We'll cover everything from setup to the logical reasoning behind the code.

Project Overview
Setting Up the Project
Fetching Holiday Data
Grouping Sequential Holidays
Bridging Holidays with Leaves
Bringing It All Together: The Main Function
Running the Project
Conclusion

Project Overview

Best Time For Vacation is a Node.js project that:

Fetches holiday data from an API (e.g., your company’s HR system)
Groups holidays that fall consecutively
Suggests the optimal days to take leave for a longer vacation

Setting Up the Project

First, create a new directory and initialize a Node.js project:

npm init -y

Install the required dependencies:

npm install dayjs node-fetch dotenv

Your package.json should look like this:

{
  "name": "bestTimeForVacation",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "dayjs": "^1.11.13",
    "node-fetch": "2.6.1",
    "dotenv": "^16.5.0"
  }
}

If you need to use environment variables (e.g., API tokens), create a .env file:

KEKA_TOKEN="YOUR_KEKA_TOKEN"

Fetching Holiday Data

We use node-fetch to retrieve holiday data from an API. Here’s a simplified version of the code:

import fetch from 'node-fetch';
import 'dotenv/config';

async function fetchHolidays() {
  const response = await fetch('YOUR_HOLIDAYS_API_URL', {
    headers: {
      Authorization: `Bearer ${process.env.KEKA_TOKEN}`,
      // ...other headers as needed
    }
  });
  const holidays = await response.json();
  return holidays; // Adjust if your API wraps holidays in a .data property
}

Grouping Sequential Holidays

To find holiday streaks, we use the dayjs library for date manipulation. The logic is:

Sort all holiday dates.
For each holiday, check if the next day is also a holiday.
Count how many days in a row are holidays.

import dayjs from 'dayjs';

function groupHolidaysSequentially(holidays) {
  const sorted = holidays.sort();
  const result = [];
  let i = 0;

  while (i < sorted.length) {
    let count = 1;
    let current = sorted[i];
    while (
      i + count < sorted.length &&
      dayjs(sorted[i + count]).diff(dayjs(current), 'day') === count
    ) {
      count++;
    }
    result.push({ date: current, numberOfDaysContinuous: count });
    i += count;
  }
  return result;
}

Bridging Holidays with Leaves

The real magic is in suggesting which leave days will maximize your vacation. The logic:

For each holiday, simulate taking a leave day before or after.
Calculate the new streak length.
Suggest the leave day that results in the longest break.

Example logic:

function bridgeHolidaysWithLeaves(holidays, numOfDaysToCheck, holidayDates) {
  let bridgedHolidays = [];
  let maxLeaveData = { date: '', vacationCountWithLeave: 0 };

  holidays.forEach(holiday => {
    for (let i = 1; i <= numOfDaysToCheck; i++) {
      const leaveDay = dayjs(holiday.date).add(i, 'day').format('YYYY-MM-DD');
      if (!holidayDates.includes(leaveDay)) {
        // Simulate adding leave and recalculate streak
        const streak = holiday.numberOfDaysContinuous + 1;
        bridgedHolidays.push({ date: leaveDay, vacationCountWithLeave: streak });
        if (streak > maxLeaveData.vacationCountWithLeave) {
          maxLeaveData = { date: leaveDay, vacationCountWithLeave: streak };
        }
      }
    }
  });

  return { bridgedHolidays, maxLeaveData };
}

This function finds the best possible leave day(s) to bridge holidays and maximize your time off.

Bringing It All Together: The Main Function

So, how do all these helper functions work together when you start the project? The answer lies in the main function, which orchestrates the entire process. Here’s what happens step by step:

const main = async () => {
  try {
    console.time('Execution Time');
    const numOfDaysToCheck = 3;
    const yearToCheck = 2025;
    const quarterToCheck = 1;

    // 1. Fetch holidays from the API
    let holidays = await fetchHolidays();

    // 2. Filter holidays for the desired quarter and year, and extract only the date
    holidays = holidays
      .filter((holiday) => checkIsDateInCurrentQuarter(holiday.date, quarterToCheck, yearToCheck))
      .map((data) => data.date);

    // 3. Get all weekends in the specified quarter
    const weekends = getAllWeekendsInaQuarter(quarterToCheck, yearToCheck);

    // 4. Combine holidays and weekends
    const holidayDates = [...holidays];
    holidays = groupHolidaysSequentially(
      holidays.concat(weekends).sort((a, b) => (dayjs(a).isBefore(b) ? -1 : 1))
    );

    // 5. Find the best days to bridge holidays with leaves
    const { bridgedHolidays, maxLeaveData } = bridgeHolidaysWithLeaves(
      holidays,
      numOfDaysToCheck,
      holidayDates
    );

    console.timeEnd('Execution Time');
    console.log(bridgedHolidays);
    console.log(maxLeaveData);
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
};

main();

Step-by-Step Breakdown

Fetch Holidays:

The function starts by fetching all holidays from the API.
Filter for Quarter and Year:

It then filters these holidays to only include those in a specific quarter and year, focusing your analysis on a relevant time window.
Get All Weekends:

All weekends in the quarter are calculated, since weekends are natural candidates for extending vacations.
Combine and Group:

The list of holidays and weekends is merged, sorted, and passed to groupHolidaysSequentially to find streaks of consecutive days off.
Bridge with Leaves:

The core logic then uses bridgeHolidaysWithLeaves to determine which leave days (if any) can be added to maximize your vacation length.
Output:

Finally, it prints out all possible bridged holidays and highlights the best option for the longest break.

This main function is what runs when you start the server with npm start, tying together all the helper logic to provide actionable vacation suggestions.

Running the Project

Make sure your environment variables are set and start the server:

npm install
npm start

The output will be a list of suggested vacation periods and the optimal leave day for the longest break.

Conclusion

With just a bit of JavaScript and some clever date logic, you can automate your vacation planning and get the most out of your holidays!

Feel free to fork the repo, tweak the logic, or integrate with your favorite calendar app.

Happy holidays and happy coding!

If you have questions or want to see the full source code, check out the GitHub repo.

Let me know in the comments if you’d like a deep dive into any part of the logic!

Setting Up ESLint and Prettier in Your React Project with Webpack and Babel (Continued)

Naveen prasad — Mon, 14 Apr 2025 14:33:49 +0000

In our previous post, we set up a React project from scratch using Webpack and Babel. Now, let's enhance our project by adding ESLint for code linting and Prettier for code formatting. These tools will ensure that our codebase remains consistent, readable, and error-free as it grows.

What is ESLint?

ESLint is a static code analysis tool that helps JavaScript developers find and fix problems in their code. It works by parsing your code using an Abstract Syntax Tree (AST). It uses the ESTree format for the AST structure, which is similar to Babel's AST.

For example, the AST representation of a simple code like 1 + 2 would look like this:

{ "type": "ExpressionStatement", "expression": { "type": "BinaryExpression", "left": { "type": "Literal", "value": 1, "raw": "1" }, "operator": "+", "right": { "type": "Literal", "value": 2, "raw": "2" } } }
With this AST structure, tools like ESLint can easily detect violations in your code.

How to Install ESLint in Your React Project

Install ESLint as a dev dependency: npm install -D eslint
Initialize ESLint: npx eslint --init This will prompt you with a series of questions to generate the eslint.config.js file. For a React project, ensure you select React as your framework.

Sample ESLint Config File (for React)

Once you've run npx eslint --init, your eslint.config.js will look something like this:
`import { defineConfig } from "eslint/config";
import js from "@eslint/js";
import globals from "globals";
import pluginReact from "eslint-plugin-react";

export default defineConfig([
{ files: ["*/.{js,jsx}"], languageOptions: { globals: globals.browser }, plugins: { js }, extends: ["js/recommended"] },
pluginReact.configs.flat.recommended,
]);
`

Let's break down the configuration:

files: Specifies which files this config will apply to. Here it’s set to apply to all .js and .jsx files.

languageOptions: Contains JavaScript-specific options, such as setting the global variables (globals.browser in this case).

plugins: Specifies additional plugins to use for linting, such as the js plugin for general JavaScript linting.

extends: This property tells ESLint to extend rules from eslint:recommended, a set of base rules that ESLint provides.

Now that we have the basic setup for ESLint, let’s configure some custom rules to match our project’s requirements.

Adding Custom ESLint Rules

You may want to customize ESLint’s behavior for your specific use case. For example, we can disable the prop-types rule and turn off the need to import React in every JSX file for React 17+.

Here's how to do it:
export default defineConfig([ { files: ["**/*.{js,jsx}"], languageOptions: { globals: globals.browser }, plugins: { js }, extends: ["js/recommended"] }, { ...pluginReact.configs.flat.recommended, rules: { ...pluginReact.configs.flat.recommended.rules, "react/prop-types": "off", // Disable prop-types rule "react/react-in-jsx-scope": "off" // No need to import React in every file (React 17+) }, }, ]);

Setting Up ESLint in VS Code

To make sure ESLint works seamlessly in your editor, we’ll need to install the ESLint extension for VSCode.

Install the ESLint Extension: Search for ESLint in the Extensions tab of VSCode and install it.
Configure VSCode: Create a .vscode/settings.json file and add the following configuration: { "eslint.experimental.useFlatConfig": true, "eslint.validate": ["javascript", "javascriptreact"], "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } This configuration ensures ESLint runs automatically every time you save your file.

Ignoring Files with ESLint

In ESLint, if you want to ignore certain files (like webpack.config.js), you should do it via the ignores property in your eslint.config.js instead of using .eslintignore (which is deprecated for flat config):

ignores: ["webpack.config.js"]

Setting Up Prettier

Prettier is an opinionated code formatter that ensures consistency in your code. It integrates seamlessly with ESLint to format your code while also catching linting violations.

Install Prettier:
Install the necessary packages:
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Create a .prettierrc File:
This file will define your formatting rules. Here’s an example:
{ "singleQuote": true, "trailingComma": "all", "printWidth": 100, "semi": true }

Integrate Prettier with ESLint:

To ensure that Prettier’s rules are respected in ESLint, update your eslint.config.js file:
`import { defineConfig } from 'eslint/config';
import js from '@eslint/js';
import globals from 'globals';
import pluginReact from 'eslint-plugin-react';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import prettierConfig from 'eslint-config-prettier';

export default defineConfig([
{
files: ['*/.{js,jsx}'],
ignores: ['webpack.config.js'],
languageOptions: { globals: globals.browser },
plugins: { js },
extends: ['js/recommended'],
},
{
...pluginReact.configs.flat.recommended,
rules: {
...pluginReact.configs.flat.recommended.rules,
'react/prop-types': 'off', // Turn off prop-types rule
'react/react-in-jsx-scope': 'off', // React import no longer required
'react/jsx-key': 'error', // Enforce keys in lists
},
},
eslintPluginPrettierRecommended,
prettierConfig,
]);
`
Configure VSCode for Prettier
To format code automatically with Prettier in VSCode, you need to install the Prettier extension:

Install the Prettier Extension:

Search for Prettier - Code formatter in the VSCode Extensions marketplace and install it.

Set Prettier as the Default Formatter:

Add the following to your .vscode/settings.json:
{ "editor.defaultFormatter": "esbenp.prettier-vscode" }

Adding Lint and Format Scripts to package.json
Now that we have everything set up, let’s add some useful scripts to our package.json to make it easier to run ESLint and Prettier checks:

"scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix", }

Conclusion

In this post, we’ve walked through how to set up ESLint and Prettier in a React project created without CRA (using Webpack and Babel). We also covered how to:

Install and configure ESLint for React.
Add custom ESLint rules.
Integrate Prettier with ESLint to auto-format code.
Set up VSCode to work seamlessly with both ESLint and Prettier.
Add useful scripts to package.json for easy linting and formatting.

Setting Up React with Webpack and babel from Scratch

Naveen prasad — Mon, 31 Mar 2025 19:49:07 +0000

If you're starting a React project from scratch and want full control over your setup, using Webpack is a great option. In this guide, we'll go step by step to configure Webpack and integrate React, Babel, CSS, and assets properly.

Step 1: Initialize the Project

First, create a Node.js project and install the necessary dependencies:

npm init -y

Then, install React and Webpack:

npm install react react-dom webpack webpack-cli webpack-dev-server

Next, create essential project files:

touch index.js index.html

Step 2: Basic React Setup

Inside index.js, set up a basic React component and render it inside a div with id="root":

import React from "react";
import ReactDOM from "react-dom";

const App = () => <h1>Hello, Webpack with React!</h1>;

ReactDOM.render(<App />, document.getElementById("root"));

Create a simple index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack Setup</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Step 3: Webpack Configuration

Create a webpack.config.js file. Webpack needs an entry file, an output path, and a filename for the bundled JavaScript:

const path = require("path");

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
};

Step 4: Adding Babel Support

Webpack works with loaders and plugins. Loaders tell Webpack how to process different file types. To compile JSX, we need Babel.

Install Babel dependencies:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

Then, update webpack.config.js to include Babel in module rules:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
        ],
    },
};

Next, create a .babelrc file to configure Babel:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Step 5: Setting Up Webpack Dev Server

To serve our React application, we need webpack-dev-server.

Modify webpack.config.js to add a development server:

module.exports = {
    devServer: {
        static: path.join(__dirname, "dist"),
        compress: true,
        port: 3000,
    },
};

Update package.json with scripts to start and build the project:

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack"
}

Now, run:

npm start

Your React app should open in the browser.

Step 6: HTML Template with Webpack Plugin

By default, Webpack does not generate an index.html file. We use html-webpack-plugin to create one with our bundle script linked. We will use the template option from the plugin to link to our index.html file we have created in the beginning.

Install the plugin:

npm install --save-dev html-webpack-plugin

Modify webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "index.html"),
        }),
    ],
};

Now, index.html will automatically include our bundled script.

Step 7: Adding CSS Support

Webpack does not process CSS files by default. To allow this, install the necessary loaders:

npm install style-loader css-loader

Now, update webpack.config.js to include rules for handling CSS: we need both these loader since style-loader is to use the css in the bundle and css-loader is for webpack to understand how to process the css.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
};

To apply CSS, create a styles.css file and import it inside index.js:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

Then, import it in index.js:

import "./styles.css";

Step 8: Handling Assets (Images, SVGs)

To use images in our project, we need Webpack to process them. Update webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|svg)$/i,
                type: "asset/resource",
            },
        ],
    },
};

Now, you can import and use images in your components:

import logo from "./logo.png";

Step 9: Resolving File Extensions

By default, Webpack requires file extensions when importing modules. To simplify imports, add the following to webpack.config.js:

resolve: {
    extensions: [".js", ".jsx"],
},

This allows us to import files without specifying .js or .jsx:

import Component from "./Component";

Conclusion

Now, you have a fully functional React setup with Webpack, Babel, CSS, and asset handling. This step-by-step approach ensures you understand each configuration. 🎉 Happy coding!

Checkout my github repo for the code discussed
[https://github.com/Naveenprasad59/How-to-create-ReactApp-from-Scratch/tree/master]

Understanding Babel: The JavaScript Compiler

Naveen prasad — Sun, 30 Mar 2025 18:25:10 +0000

What is Babel?

Babel is a compiler (more accurately, a transpiler) that converts modern JavaScript (ES6+) into an older syntax that browsers can understand. It ensures backward compatibility by transforming modern code features like arrow functions, classes, and template literals into equivalent ES5 syntax. Additionally, Babel can add polyfills for unsupported features.

Example: Arrow Functions Transformation

// Babel Input: ES6 Arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 Equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

// Before Babel
const square = n => n * n;

// After Babel
const square = function square(n) {
  return n * n;
};

Babel as a Codemod

Babel can be used for codemods, where large-scale code transformations are automated. For instance, if you need to change all import statements across your project, you can write a Babel codemod to handle it efficiently.

Example Use Case: Automating import transformations across multiple files.
Watch this YouTube video for a practical example.

Running Babel

Babel provides a CLI that allows you to compile JavaScript files easily:

babel file-name.js

babel src -d foldername

Babel Plugins and Presets

Babel doesn’t perform transformations by default; it requires plugins and presets to know what to do.

Plugins: Define specific transformations (e.g., converting arrow functions to ES5 functions).

Presets: Collections of plugins (e.g., @babel/preset-env).

You can also create custom presets by grouping multiple plugins together.

Babel’s Role in Static Analysis

Babel is widely used for static analysis, meaning it analyzes code without executing it. This enables use cases like:

Linting (ensuring code follows best practices)

Minification (reducing file size)

Optimization (enhancing performance)

Code transformation (rewriting syntax for compatibility)

Babel’s Three Stages

Babel’s compilation process consists of three key stages:

Parsing

The source code is broken down into tokens (lexical analysis) and then converted into an Abstract Syntax Tree (AST) (syntactical analysis).

Lexical Analysis (Tokenization)

Converting code into a structured list of tokens:

n * n;
[
  { type: { ... }, value: "n", start: 0, end: 1, loc: { ... } },
  { type: { ... }, value: "*", start: 2, end: 3, loc: { ... } },
  { type: { ... }, value: "n", start: 4, end: 5, loc: { ... } },
  ...
]

Syntactical Analysis

After tokenization, Babel constructs an Abstract Syntax Tree (AST), which represents the structure of the code.

Transforming

This is the most important step in Babel's compilation process. Here, Babel traverses the AST, applying transformations based on installed plugins and presets.

The AST is modified as per the transformation rules.

New syntax replacements, optimizations, and other changes are applied.

Code Generation

Finally, Babel converts the modified AST back into JavaScript code.

The AST is traversed depth-first to generate the final output.

The transformed code is written out as a JavaScript file.

Conclusion

Babel is a powerful tool that enables developers to write modern JavaScript while ensuring compatibility with older browsers. By leveraging plugins, presets, and codemods, Babel simplifies large-scale transformations and enhances the JavaScript development experience. Whether you're compiling ES6, optimizing performance, or modifying imports across files, Babel is an indispensable tool in the JavaScript ecosystem.

DEV Community: Naveen prasad

Frontend Reviews: 13 Mistakes I See in Every PR (And How to Avoid Them)

1️⃣ Keeping Large Arrays/Objects in Global Constants

2️⃣ Duplication of Assets (SVGs, Images, HOCs)

3️⃣ Repeating the Same Logic in Multiple Components

4️⃣ Overusing useState Instead of useRef

5️⃣ Using useEffect for Everything

6️⃣ Lifting State Prematurely

7️⃣ Overusing React.memo and useMemo

Optimize only where profiling shows performance bottlenecks.

8️⃣ Prop Drilling Hell

9️⃣ Tedious Nested State Updates

🔟 Skipping Tests

1️⃣1️⃣ Multiple Components in One File

1️⃣2️⃣ Using Contexts Like Globals

1️⃣3️⃣ Inconsistent Folder/File Structures

🎯 Final Thoughts

Web Communication: Long Polling Explained

🧠 What’s Different?

🧩 Server Code Highlights

1. Store connections for later use

2. Notify all clients on data update

Client Code Highlights

1. Subscribe and re-subscribe

2. Submit new data

✅ Summary

✅ Conclusion

👍 Pros

👎 Cons

🕒 When to Use Long Polling

Web Communication: Understanding Short Polling with a Simple Node.js Example

📚 Web Communication Series — Chapter 1: Short Polling

🔧 Project Setup

Directory Structure

🖥️ Server-Side Logic

🧑‍💻 Client-Side Logic

✅ Pros and ❌ Cons of Short Polling

✅ Pros

❌ Cons

🧠 When Should You Use Short Polling?

🔚 Conclusion

How to Add TypeScript Support to Your Node.js Project

1. Install TypeScript and Type Definitions

2. Initialize TypeScript Configuration

3. Update tsconfig.json

4. Rename Your Files to .ts

5. Compile TypeScript Files

6. Run the Compiled JavaScript

7. (Optional) Update npm Scripts

Conclusion

Best Time For Vacation: Automating Your Holiday Planning with Node.js

Table of Contents

Project Overview

Setting Up the Project

Fetching Holiday Data

Grouping Sequential Holidays

Bridging Holidays with Leaves

Bringing It All Together: The Main Function

Step-by-Step Breakdown

Running the Project

Conclusion

Setting Up ESLint and Prettier in Your React Project with Webpack and Babel (Continued)

What is ESLint?

How to Install ESLint in Your React Project

Sample ESLint Config File (for React)

Adding Custom ESLint Rules

Setting Up ESLint in VS Code

Ignoring Files with ESLint

Setting Up Prettier

Integrate Prettier with ESLint:

Conclusion

Setting Up React with Webpack and babel from Scratch

Step 1: Initialize the Project

Step 2: Basic React Setup

Step 3: Webpack Configuration

Step 4: Adding Babel Support

Step 5: Setting Up Webpack Dev Server

Step 6: HTML Template with Webpack Plugin

Step 7: Adding CSS Support

Step 8: Handling Assets (Images, SVGs)

4️⃣ Overusing `useState` Instead of `useRef`

5️⃣ Using `useEffect` for Everything

7️⃣ Overusing `React.memo` and `useMemo`