Latest Articles & Tutorials

How to make a custom hook that wraps useState with TypeScript properly.

React is a JavaScript library that is ideal for creating impressive apps. There are countless projects that you can make with React, but here are seven that are on my list to build in 2021.

In this article, we’ll compare the top five React animation libraries and evaluate each for popularity, developer experience, readability, documentation, and bundle size to help you choose the right library for your next React project.

In this article, we will compare styled-components and Emotion, including differences, drawbacks, and benefits.

In this tutorial, we’ll show you how to use Hooks with React Router and minimize code lines in a component.

In this article, we'll explore various ways we can write shorter, simpler and easier to understand React code. So let's get started.

In this tutorial, we will discuss how to use MobX with React, but first, we will begin by getting to understand MobX a little better.

I initially ran into problems on mobile devices with some graphs I was working on creating. After a lot of fumbling, I made some reusable components that can shield me from this pain.

GSAP or GreenSock Animation Platform is a JavaScript animation library that helps you to create fast and silky smooth animations for your interface. It provides simple APIs that grants you full control over your animation sequences, but easy enough to understand and use for simple animations

This post is inspired by a now-deleted Reddit post from someone who had learned React in 2016, and was concerned about how to get back into it and refresh their skills.

To become a better React developer, you don't always have to learn an entirely new, challenging skill. You can instantly improve your React code in a few minutes by using the powerful features your development tools make available.

Transitions in mobile applications provide design continuity. This continuity is provided by connecting common elements from one view to the next while navigating in the app.

In this tutorial, we’re going to learn how to use Grommet as a UI library for React applications. We’ll use Grommet as a UI library of choice to create a pricing component, this would help us have a better understanding of how to use Grommet.

Definitive answers and clarification on the purpose and use cases for Context and Redux.

I want to take this fear from you by showing how you can easily define your React components with TypeScript in this article.

In this article, I'll first explain how to configure TypeScript with the tsconfig file. Afterward, we'll see how to set up an entire project using Webpack or Create React App.

In this tutorial, we’ll show you how to implement geolocation in React Native. We’ll build an example app in React Native that displays the user’s location on a map in longitude and latitude coordinates and enables the user to send their location to another source, such as Twitter.

In this article, we’ll look at five useful React Hooks libraries and compare their utility.

When it comes to building a conversational chat assistant that could be used at a small or enterprise level, Dialogflow would most likely be one of the first options that would show up in your search list — and why wouldn’t it?

A combination of fetching with proper lifecycle events might be a good solution for a complete client-side application, but when things get on the server, it’s not enough. This is where a third-party library known as React Frontload comes in.

Get to know the art of performance profiling with React Profiler Chrome Extension

In this article we'll measure the performance of an example React app with both the Profiler tab in React DevTools, and the Profiler component.

In this post, I’ll walk you through some of the date picker libraries that I found really useful. Note that we’ll only be going through the libraries which have been updated recently. This is to ensure it will work on your project without going through a lot of hoops.

This post will cover the relevant bits of this new strategy and explain why it’s a game-changer for web development.

This new type of component promises to revolutionize the way we interact with the back-end.

A few weeks ago the React team has revealed an exciting feature that’s currently still under development: React Server Components. This “feature” will not only introduce a new type of components for the server but rather a completely new taxonomy of React components.

2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components.

Embed Egghead, Codepen, and Twitter into MDX.

In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features.

How I upgraded my project to React 17 and Webpack 5.

Today we’re announcing our fourth and final SDK release of 2020, Expo SDK 40. SDK 40 includes React Native 0.63, mostly the same version as SDK 39 but with some additional bugfixes cherry-picked on top.

What’s New for JSX in React 17 and Why You Should Care

So, you've got some code in React.useEffect and you want to know how to test it. This is a pretty common question. The answer is kinda anti-climatic and general.

Using a <table /> element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.

When the world moved from React class components and lifecycle methods to React function components and hooks, we left behind a bug that many of us didn't even know was plaguing our class-based codebases.

How and why I import react using a namespace (import * as React from 'react').

Developers spend a lot of time optimizing websites to provide a better user experience. Web Vitals are a set of useful metrics that aim to capture the user's experience on a web page.

The idea behind this post is to tell the story of how I did it, the tech involved, what I learned along the way and most importantly to inspire many more people to build their own website.

A Hook is a react function that lets you use state and react features from a function based component. Hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one. So the solution to your problem will be a "one-liner" now.

A search bar is a great way to make content on your Gatsby site discoverable. In this tutorial, I'll be walking you through how to add local search to Gatsby with FlexSearch.

In this article, we will take a look at this library, what it does, and, by the end of the article, create a simple React app wherein users can import an image from their computer, use it to make an avatar, and download the avatar to their computer.

In this post, we will look at functional components using React Hooks that were introduced in version 16 of React and why you should use them over class components.

In this blog post, we will build a simple NextJS app from scratch, using Apollo Client to consume the GraphQL API of Slash GraphQL.

In this article, we’ll learn how to authenticate our React apps using Auth0. We will also learn how to set up Social Logins in our apps. This article will be beneficial to readers who want to add some form of authentication to their apps or want to get familiar with Auth0.

In this post, we will create a simple React app that is server-side rendered using Deno

In this discourse, our focus will be on local state management and the various React patterns we can use to avoid its common pitfalls.

Navigate component libraries fast

As you know, React is just JavaScript. That means it can be tested just like any other JS application. There are lots of testing libraries and test runners out there, but I find that the best setup is Jest + React Testing Library.

AWS Amplify is a tool developed by Amazon Web Services that helps make app development easier.

react-three-fiber is a powerful Three.js renderer that helps render 3D models and animations for React and its native applications. In this tutorial, you will learn how to configure and build 3D models in a React application.