20 posts found for the tag React

Effective Ways to Manage Shadcn Dialog Box: 3 Tips with Code

Posted on September 16, 2024

Recently I encountered a couple of challenging use cases with the shadcn/ui dialog box with forms as its content. As I learned to tackle them, here is what I learned to share with you, hoping that it helps you as well. First, the shadcn dialog box co...

Next.js and Next-Auth V5: Guide to Social Logins(OAuth)

Posted on June 12, 2024

Authentication and Authorization are the implicit needs for any user-facing application. Using authentication users let the application and underlying services know who they are, and if they are the legitimate people to get access to the system. Ther...

How to upload and preview images in ReactJS?

Posted on March 9, 2024

Uploading and previewing images are fundamental requirements in any modern user-centric application. Be it Facebook, Instagram, WhatsApp, Twitter, LinkedIn, whatever you name, you have it there. In this article, we will learn how to handle image uplo...

How to navigate between routes in Next.js?

Posted on December 8, 2023

Next.js App router enables us to create file-system-based routing where the top-level app/ folder acts as the root route(/), and a special page.js file under it acts as the page for that route segment. Often, we would like to go from one page to anot...

Dynamic routes recipes from Next.js App Router

Posted on November 9, 2023

Next.js App Router has brought many improvements over its predecessor, Page Router. One of the significant improvements is the routing itself. Next.js App Router uses the file-system-based router, where you create directories(aka folders) to define r...

Create an e-learning platform using caisy and next.js app router

Posted on September 1, 2023

Developers learn better when they build or create something out of their learnings. We need to put our learnings into practice and try problem-solving. When we attempt to learn multiple technologies together or try out a tech stack, it makes sense to...

Understanding Next.js Server Actions With Examples

Posted on August 9, 2023

Next.js is a React-based framework for building performant, optimized, and scalable full-stack applications. As React developers, we create components, manage state, and handle data communications between them. Then Next.js comes on top of it to prov...

Explain React 18 useTransition Hook with Examples

Posted on May 2, 2023

React 18 has changed how developers design and write ReactJS code. Including the Concurrency model and many other new hooks help tackle niche use cases like responsiveness, performance, etc. In this article, we will discuss the hook I like most, the ...

How to Create a Self-Clicking Button with ReactJS?

Posted on March 27, 2023

What is a Self-Clicking Button? HTML has a <button> tag to create a clickable button element. You can attach an event handler to it to define an action to perform when users click on the button. <button onclick="handleClick()">Click me</button> A se...

Future-Proof Your Code: Top JavaScript Frameworks to Watch in 2023

Posted on February 10, 2023

The internet was written in JavaScript. This versatile programming language is supported by all major web browsers and has been used to create over 1.8 billion websites, which amounts to 98% of the world’s total (that figure will probably have jumped...

How to perform an end-to-end test of a React app using Cypress

Posted on September 20, 2022

Originally Published on Bugfender UI is nothing without UX. While user interface development is essential, it means nothing if it doesn’t lead to a good user experience. So whenever us devs add a new feature, or modifies the existing one, we must en...

Build your ecommerce store using Gatsby and Strapi

Posted on August 1, 2022

Originally Published on Bugfender Let’s start with a question: When building a website or app in this day and age, what are the primary things we need to consider? Well there are loads of potential answers to this question, but speed, cost, and secu...

Introducing ReactPlay - Learn, Create, Share ReactJS projects

Posted on May 13, 2022

If I tell you React(aka ReactJS) is one of the leading user interface technology(ok, library) in web development, would you believe it? Most of you will. For the rest of you, let me put forward some stats. As per the Stack Overflow Trends, React is t...

Comment system using React and GitHub Discussions

Posted on May 6, 2022

Introduction In a user-centric application, users should get a chance to express themselves. Users need the ability to provide comments and feedback about certain things in your application. The Comment System is a powerful feature to add to your app...

ReactJS Virtual DOM and Reconciliation - Explain Like I'm Five

Posted on April 11, 2022

What is DOM? DOM stands for Document Object Model. HTML is the language of web pages. It provides the web page structure with many specialized tags, including the way to link multiple pages together. The structure of a web page is represented as a tr...

React useEffect Hook usages you must know

Posted on March 22, 2022

React is a JavaScript-based user interface library. React components are isolated reusable pieces of code logic with their own UI. Multiple components come together to create a meaningful working React application. We can create components in two way...

Integrate SuperTokens Passwordless Authentication with Next.js

Posted on March 9, 2022

A Quick Introduction Authentication is the mechanism to validate a user's identity for an application. Authenticating a user with userId and password is the most common mechanism we use in many applications. However, there are other famous approaches...

ReactJS useState Hook - lazy initialization and previous state

Posted on February 17, 2022

The State of a Component ReactJS is a component-based user interface library. Each of the components we create should have an individual responsibility. In the real world ReactJS application, components need to interact by exchanging information or d...

How to create a countdown timer using React Hooks

Posted on February 1, 2022

⭐ Introduction React(aka ReactJS) is a library that builds declarative and component-based user interfaces. With the inclusion of functional components and hooks, it is even more potent in reusability, better code organization, and data flow. Web dev...

JavaScript object destructuring usages you must know

Posted on January 17, 2022

Introduction We use JavaScript objects to store data and retrieve it later. We store data(aka information) in key-value pairs. The key-value pair is also known as the object properties. Here is an employee object with three properties: id, name, dep...