Continuing our Plop.js journey from last blog In our previous discussion, we explored an introduction to Plop.js and its installation in a Next.js project. Additionally, we looked at a basic skeleton of plopfile.js. Understanding the Components of plopfile.js As we saw earlier, the plopfile.js consists of key elements that define the generator. Let’s break them […]
Posts Tagged ‘ReactJS’
Plop.js – A micro-generator framework: Introduction and Installation (Part-1)
We all may have come across this situation countless times in our projects—copying and pasting files just to create a new component, page, or service. Unfortunately, this slows us down and hampers our productivity by introducing errors into the workflow. However, there’s a solution! Plop.js is the answer to this problem, as it automates these […]
Implementing a Fuzzy Search in React JS Using Fuse.JS
When setting up client search, we usually rely on string comparison methods like indexOf, contains, etc. These methods work fine, but in real-life situations, users may search using incorrect spellings, jumbled sentences, and so on. Fuzzy Search helps us solve these issues. Fuzzy Search Fuzzy Search, also known as Approximate String Matching, is a technique […]
Using TypeScript with React: Best Practices
Nowadays, TypeScript has become the first choice for building scalable and maintainable React applications. By combining the approaches for static typing with dynamic capabilities of React, TypeScript enhances productivity, improves the readability of code and reduces the runtime errors. In this blog, we will explore best practices for using TypeScript in React projects, covering type […]
Suspense in Action: Simplifying Async Data Fetching in React
Building React apps often involves dealing with async data fetching. This can be complex and impact the user experience. React Suspense is here to help, making async data fetching simpler and more efficient. It improves your app’s performance and user experience. React Suspense streamlines async data fetching. It lets you focus on building your app […]
Implementing Nested Routes with React Router 6
In React Router version 6, nesting routes are a straightforward way to render multiple components within the same layout based on the URL path. This feature is especially useful for applications where you want to display different sections of content without navigating away from the current page. It’s ideal for scenarios like forums, blogs, or […]
Why Choose TypeScript Over JavaScript?
JavaScript is a loosely typed language which is very dynamic in nature. It has been very popular for its strong web development for decades. Indeed, it is a powerful tool, but it can sometimes lead to huge codebase and runtime errors, mainly in heavy applications. Now, speak about TypeScript, a superset of JavaScript, overcoming its […]
How Copilot Vastly Improved My React Development
I am always looking to write better, more performant and cleaner code. GitHub Copilot checks all the boxes and makes my life easier. I have been using it since the 2021 public beta, the hype is real! According to the GitHub Copilot website, it is: “The world’s most widely adopted AI developer tool.” While that […]
Leveraging WebSockets for Real-Time Data in React Applications
In the modern web, real-time data has become a cornerstone of interactive and dynamic applications. WebSockets offer an effective solution for enabling real-time communication between the client and server, facilitating instant updates without relying on repetitive requests. In this blog, we’ll explore how to leverage WebSockets in React applications to deliver engaging, real-time experiences. What […]
State Persistence in Recoil using Local Storage
Ever wish your app could remember things like a user’s theme choice, preferences, or other settings, even after a page reload? Good news: it absolutely can! With Recoil, your trusty state management tool, and localStorage, the browser’s built-in memory, you can easily persist your app’s state. That means no more resetting the theme or losing […]
Build a Custom 404 Page Using React Router V6 and Next.js
Custom 404 Page Using React Router V6 React Router is a popular JavaScript library commonly used to create single-page applications in React. It offers a set of components and functions that allow you to define your app’s routing and navigation in a declarative way. In this blog post, we’ll walk you through the process of […]
Exploring the Top Features of React 19
React 19 brings a fresh set of improvements and features aimed at delivering better performance. In this post, I’ll showcase some of these new features like Server Components, Server Functions, the new hooks like use, useActionState and useOptimistic. React is a popular JavaScript library for building user interfaces. It uses a declarative approach to create […]