Latest Posts
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 [...]
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 [...]
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
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
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 [...]
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, [...]
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).
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.
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!