Latest Posts

By Omari Thompson-Edwards
How to Create Objects with Dynamic Keys in TypeScript

Introducing TypeScript into your JavaScript app introduces some rigidity to your code – you lose the complete flexibility of JavaScript, but gain a lot of robustness and reliability in your code. As you learn TypeScript however, you’ll find a lot of ways to quickly build dynamic types – the Record [...]

By Omari Thompson-Edwards
How to Handle and Convert the ‘Unknown’ Type in TypeScript

Hey there, TypeScript enthusiast! Working with TypeScript, chances are you’ve come across the intriguing “unknown” type. It’s like that enigmatic puzzle piece that doesn’t reveal its true nature until you’ve cracked the code. Well, consider this article your ultimate decoder ring, as we dive headfirst into the captivating realm of [...]

By Omari Thompson-Edwards
TypeScript’s Array Filter Method Explained

Welcome aboard, TypeScript enthusiasts! Today, we’re diving into the world of array filtering with TypeScript. Filtering arrays is a crucial skill every developer should have in their toolkit, allowing us to effortlessly sift through data, and extract exactly what we need. So, grab your favourite beverage, sit back, and let’s [...]

React Hooks

View all
By Hasan Shahid
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 [...]

By Omari Thompson-Edwards
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 [...]

By Hasan Shahid
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

By James Dietrich
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!

By James Dietrich
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

By James Dietrich
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!

By James Dietrich
How to use 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

View all
By Hasan Shahid
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 [...]

By Hasan Shahid
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 [...]

By Hasan Shahid
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

By Jesse Ryan Shue
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, [...]

By Jesse Ryan Shue
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 [...]

By James Dietrich
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.

By James Dietrich
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!

By James Dietrich
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!

By James Dietrich
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.

By James Dietrich
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

By Hasan Shahid
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 [...]

By Vlad Mihet
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 [...]

By Hasan Shahid
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 [...]

By Hasan Shahid
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 [...]

By Hasan Shahid
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 [...]

By Hasan Shahid
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? [...]

By Hasan Shahid
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.

By Hasan Shahid
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 [...]

By Hasan Shahid
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 [...]

By Hasan Shahid
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

By James Dietrich
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 [...]

By Vlad Mihet
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 [...]

By Vlad Mihet
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 [...]

By Vlad Mihet
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, [...]

By Vlad Mihet
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 [...]

By Vlad Mihet
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 [...]

By Hasan Shahid
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 [...]

By Hasan Shahid
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 [...]

By Vlad Mihet
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 [...]

By Vlad Mihet
How to set up a GraphQL server with Node.js & Express

In this article, we’ll have a walkthrough of the entire process of setting up a GraphQL server using Node.js & Express. We’ll be using Express’ middleware library, express-graphql, in order to assist us with that process. If you aren’t already familiar with GraphQL and what we are using it for, [...]