Latest Posts
How to Validate Email Addresses with Ease in React
Email validation is a crucial part of any web application. It ensures that the user input is valid and can be used for various purposes like registration, login, and communication. In this article, we will walk through how to validate an email address in a React application with a few [...]
From A to B: Mastering Data Transfer Between Components in NextJS
Next.js is a popular React-based framework that enables server-side rendering, automatic code splitting, and simpler client-side routing. In this article, we’ll discuss how to send data from one component to another in Next.js. There are a few approaches you might take to passing data between components. In this article we’ll [...]
Demystifying For Loops In TypeScript: A Comprehensive Guide
Looping through an array is a common task in programming, and Typescript offers a variety of ways to accomplish this task. If you’re using React, you might be interested in this article on for loops in React. In this article, we’ll explore some of [...]
React Hooks
Guide: Build a Real-Time Chat Application With ReactJS 🔥+⚛️
When we talk about real-time chat applications, we think of web sockets and how to handle receive and send messages through dedicated sockets and handle them efficiently. In this guide, we are going to learn how to make a real-time chat application using firebase and [...]
How To Use Media Queries in React
Media queries are used in responsive design. They are used to apply different CSS rules to different types of devices, most commonly screen sizes, but they can also cover other options such as screen orientation, and even whether or not your display supports colour. They can also be accessed through [...]
How To Build Pluralization In ReactJS?
In this article, we are going to look at another i18n feature. We have learned why is it preferred to do internationalization in your application and we covered localization as well. It helped us translate our application as the user preferred. The only catch was to handle hardcoded strings in [...]
React Forms
Form Validation Using Custom React Hooks
Build a form validation engine using custom React Hooks, from scratch, without having to learn a single form library. Read on to learn how!
Using Custom React Hooks to Simplify Forms
Use custom React Hooks to build forms that require half the code to write, are reusable, and are much easier to read. Read on to learn more!
APIs and AJAX Requests in React
React AJAX Requests: How to Fetch Data
Sooner or later, every React developer needs to know how to make AJAX requests to fetch data from a server (make API calls). Let's learn how!
Using Axios with React to Make API Requests
Axios is a library used to make HTTP requests from the browser. Read on to learn how to use Axios with React to make API requests and display the response.
Building React Components
Guide: Build a Real-Time Chat Application With ReactJS 🔥+⚛️
When we talk about real-time chat applications, we think of web sockets and how to handle receive and send messages through dedicated sockets and handle them efficiently. In this guide, we are going to learn how to make a real-time chat application using firebase and [...]
Portals In ReactJS ⏳
Introduction In this article, we are going to render child components, which are outside the Document Object Model(DOM) to dwell within the DOM 🤯. In simpler terms, to make use of a component that exists outside the DOM hierarchy of the parent component. Usage Portals can be [...]
What Is Prop Drilling in ReactJS? 🔨
Introduction React components are capable of receiving some parameters, these certain parameters are called props in react terminologies, it is not a rule but a convention used by almost all of the react devs. What is Prop Drilling? Most of us have encountered the situation where [...]
React Event Handlers
How To Use React onDrag Event Handler (Example Code)
onDrag allows you to execute a function when a user drags a component. It is passed as a JSX attribute. onDrag Use Cases As its name suggests, onDrag fires whenever a React component is being dragged. This can be useful in web apps that require drag-and-drop functionality, [...]
How To Use React onKeyPress (Example Code Included)
To handle key presses in React, we use onKeyPress. It is passed as an attribute in <input> elements, and can be used to perform actions for any event involving the keyboard, whether you want to call a function on any key press, or only when a specific key [...]
React onHover Event Handling (with Examples)
There is no onHover event handler in React. Instead, we have the onMouseDown, onMouseLeave, and onMouseEnter events to perform onHover actions in React.
Adding Multiple Functions Inside a Single onClick Event Handler
There are several ways to call muliple onClick events in React, each with its own pros and cons. Let's explore each one and learn how they work in React!
Pass a Parameter Through onClick in React
A common thing you will want to learn in React is how to pass a value as a parameter through the onClick event handler. Read on to learn how!
React onChange Events (With Examples)
The onChange event in React detects when the value of an input element changes. Let's dive into some common examples of how to use onChange in React.
React onClick Event Handling (With Examples)
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.
JavaScript
State Management With MobX in ReactJS ⚛️
We have talked about different state management techniques in a reactJS application, to maintain the state of your application in a global store so that it can access any of the components inside the application wrapped by the provider. The techniques are ReduxContext In this one, we [...]
Optional Chaining in React
It often happens that, as a React Developer, you’re working with big data objects containing a lot of nested properties, especially those coming from an external API. Because of that, it’s not always possible for us to tell the exact shape of the object at runtime, as sometimes, due to [...]
Guide: Build a Real-Time Chat Application With ReactJS 🔥+⚛️
When we talk about real-time chat applications, we think of web sockets and how to handle receive and send messages through dedicated sockets and handle them efficiently. In this guide, we are going to learn how to make a real-time chat application using firebase and [...]
Portals In ReactJS ⏳
Introduction In this article, we are going to render child components, which are outside the Document Object Model(DOM) to dwell within the DOM 🤯. In simpler terms, to make use of a component that exists outside the DOM hierarchy of the parent component. Usage Portals can be [...]
What Is Prop Drilling in ReactJS? 🔨
Introduction React components are capable of receiving some parameters, these certain parameters are called props in react terminologies, it is not a rule but a convention used by almost all of the react devs. What is Prop Drilling? Most of us have encountered the situation where [...]
Cookies in ReactJS Application 🍪
When we talk about persisting data of our application, most developers confuse their choice between cookies and local storage. Well, both of them serve different purposes and are different in their way. We are going to talk about both of them but keep our focus and implement cookies in this one. What Are Cookies? [...]
Build Validation With Yup And React Hook Forms ✔
In this article, we are going to make our react hook forms perform even better with minimal code. We are going to inject validations so that we can check our data and inform the user accordingly with a suitable error message, with a bare minimum code.
Why Qwik Is Potentially the Future Of JS Frameworks? 🔥
Ladies and gentlemen, We have an announcement to make, Qwik is the new JS framework in town 📣. It all started from the developer making websites with Websites built with bare HTML with a sprinkle of JS so that the user can interact with it.JS generating HTML at runtimeJS [...]
Build Uncontrolled Components in ReactJS ⚛
We have learned about pure components, functional components, class components, and many more. This time around we are going to dig into uncontrolled components react, and how you can implement them with examples. Uncontrolled Components 🤨 Majority of the time when we are making our custom [...]
How To Build Pluralization In ReactJS?
In this article, we are going to look at another i18n feature. We have learned why is it preferred to do internationalization in your application and we covered localization as well. It helped us translate our application as the user preferred. The only catch was to handle hardcoded strings in [...]
Web Development
Mastering JavaScript Frameworks: A Comprehensive Learning Path for Web Developers
Introduction Web development is an ever-evolving landscape, with JavaScript frameworks playing a significant role in modern web applications. As a developer looking to stay relevant and ahead of the curve, mastering these frameworks is essential. In this article, we will provide you with a comprehensive learning path to help you [...]
How to Build an Accordion Menu with JavaScript
In the world of web development, creating a dynamic and user-friendly interface is key to delivering a great user experience. One way to achieve this is by implementing an accordion menu, allowing for a clean and organized content display. In this article, we will explore the process [...]
What is the Shadow DOM?
The Shadow DOM is a technique for creating and using isolated, reusable parts of a web page’s structure and styling. Introduction The Shadow DOM allows developers to encapsulate the structure and styling of a particular element or component so that it can be easily reused and integrated with other parts [...]
How to Preload and Prefetch Resources
Preloading and Prefetching are two techniques that can be used to improve the loading performance of a web application. These techniques are particularly useful for optimizing the loading time of resources, such as images, stylesheets, and JavaScript files, which are required for the application to function correctly. In this article, [...]
What is NPM?
NPM – Landing Page NPM, or the Node Package Manager, is a crucial tool for any developer working with Node.js, the popular JavaScript Runtime Environment. It allows developers to easily share and reuse code and manage their projects’ dependencies. In this article, we will explore what [...]
Temporal API: JavaScript Dates, but better
Photo by Aron Visuals on Unsplash Introduction If you’ve ever worked with Dates in JavaScript, you sure know how clunky and hard to work with they are; that’s why, recently, there has been a proposal for a brand new way of working with [...]
Web Development With FLUTTER? 🤯🤯
Is Web Development supported with flutter?Is Flutter a native or web?Can Flutter be used for the web?Is Flutter good enough for the web?Is Flutter web faster than react?Do I need CSS for Flutter?Does Flutter web have a future? We get so many queries along these lines that we decided to [...]
Why Qwik Is Potentially the Future Of JS Frameworks? 🔥
Ladies and gentlemen, We have an announcement to make, Qwik is the new JS framework in town 📣. It all started from the developer making websites with Websites built with bare HTML with a sprinkle of JS so that the user can interact with it.JS generating HTML at runtimeJS [...]
React vs Next.js. Which One Should You Use?
With the recent trends in Front-End Web Development, we’ve seen a lot of additions to the collection of JavaScript frameworks, each being unique in its way and coming with its perks and disadvantages. As such, I wanted to look at the React side of things only, check the two main [...]
Why should you adopt GraphQL in your Applications?
We all know that managing data in our application is oftentimes a chore, as they require: Separate Front-End clients to manage various platforms such as Web, Mobile (iOS, Android, etc.), and more often than not, those clients require different sets of dataA Back-End system that might source data from various [...]