Latest Posts

By Alejandro RodrΓ­guez
The Best Vue 3 UI Libraries

Due to its simplicity of usage and learning curve, Vue.js is the JavaScript framework of choice for a large number of front-end developers. The heart of the Vue framework are components, which make it much easier to transition quickly from an idea to a usable user interface. One of the [...]

By Omari Thompson-Edwards
Mastering TypeScript’s New “satisfies” Operator

TypeScript 4.9 beta is introducing a new operator, the “satisfies” operator. The short version is that this operator lets you ensure a variable matches a type, while keeping the most specific version of that type. You can check out the discussion on the feature [...]

By Omari Thompson-Edwards
Primitive Types in TypeScript

TypeScript provides some useful primitive types that you’ll be using every day. In this article, I’ll explain them, what they’re for, and the TypeScript-specific primitives. number The number type works as you expect in TypeScript, covering all the ways JavaScript allows you to represent [...]

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
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

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 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
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 [...]

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

By James Dietrich
Best Atom Packages for Front End Developers (Updated 2019)

Love Atom? Are you a front end developer? Then read on as I share the best Atom packages for front end developers (Updated November 2018).

By James Dietrich
How React Reignited My Love for Web Development

It's about time I shared my reasons why I came back to web development after five years of iOS development, and why I attribute a lot of these reasons to React.

By James Dietrich
jQuery vs React: The Ultimate Comparison Guide

jQuery and React are both JavaScript libraries, but they each have their pros and cons. Read on to answer the jQuery vs React debate!